Tags 标签

基本用法

可以通过 tags 属性传入标签内容。

• javascript
• react
• angular
• vue

<Tags tags={["javascript", "react", "angular", "vue"]} />

可跳转标签

通过设置 isEnabled 属性为 true，并将标签内容和跳转链接通过 tags 属性传入。

• javascript
• react
• angular
• vue

<Tags tags={[
  {tag: "javascript", href: "/javascript"},
  {tag: "react", href: "/react", disenabled: true},
  {tag: "angular", href: "/angular", disenabled: false},
  "vue"]} />

自定义样式

通过 class 属性设置 tag 父容器样式，通过 tagClass 属性设置单个 tag 设置统一样式，通过 linkClass 属性设置单个 tag 中 a 标签的统一样式，

• javascript
• react
• angular
• vue

<Tags
  class="bg-slate-300 pt-2"
  tagClass="rounded-full text-lime-500"
  linkClass="text-lime-500"
  tags={[
    {tag: "javascript", href: "/javascript", linkClass: "text-white"},
    {tag: "react", href: "/react", disenabled: true, tagClass: "rounded-none"},
    {tag: "angular", href: "/angular", disenabled: false},
    {tag: "vue", href: "/vue", disenabled: false}
  ]}/>

API

属性	说明	类型	默认值
tags	标签内容	Array	[]
class	组件最外层容器的自定样式	string	-
tagClass	标签自定样式	string	-
linkClass	标签中链接的样式（ tags 中有 href，且 disenabled 不为 true 时生效）	string	-

Tags.tags

属性	说明	类型	默认值
tag	单个标签的内容	string	-
href	单个标签的链接地址	string	-
disenabled	是否禁用跳转功能	boolean	false
tagClass	单个标签的自定样式	string	-
linkClass	单个标签中链接的样式（ tags 中有 href，且 disenabled 不为 true 时生效）	string	-