Tag 标签

用于标记和选择的标签

基本用法

  1. {
  2.     type: "page",
  3.     body: [
  4.         {
  5.             "type": "tag",
  6.             "label": "普通的标签",
  7.             "displayMode": "rounded",
  8.             "color": "inactive"
  9.         },
  10.         {
  11.             "type": "tag",
  12.             "label": "普通标签",
  13.             "color": "processing"
  14.         },
  15.     ]
  16. }

不同的模式

  1. {
  2.     "type": "page",
  3.     "body": [
  4.         {
  5.             "type": "tag",
  6.             "label": "面性标签",
  7.             "displayMode": "normal",
  8.             "color": "active"
  9.         },
  10.         {
  11.             "type": "tag",
  12.             "label": "线性标签",
  13.             "displayMode": "rounded",
  14.             "color": "inactive"
  15.         },
  16.         {
  17.             "type": "tag",
  18.             "label": "状态标签",
  19.             "displayMode": "status",
  20.             "color": "active",
  21.             "closable": true
  22.         },
  23.         {
  24.             "type": "tag",
  25.             "label": "#4096ff",
  26.             "displayMode": "rounded",
  27.             "color": "#4096ff"
  28.         },
  29.         {
  30.             "type": "tag",
  31.             "label": "#f70e47",
  32.             "displayMode": "rounded",
  33.             "color": "#f70e47"
  34.         }
  35.     ]
  36. }

自定义样式

可以通过 style 来控制背景、边框及文字颜色。如下

  1. {
  2.     "type": "page",
  3.     "body": [
  4.         {
  5.             "type": "tag",
  6.             "label": "面性标签",
  7.             "displayMode": "normal",
  8.             "color": "active"
  9.         },
  10.         {
  11.             "type": "tag",
  12.             "label": "线性标签",
  13.             "displayMode": "rounded",
  14.             "color": "inactive"
  15.         },
  16.         {
  17.             "type": "tag",
  18.             "label": "自定义样式1",
  19.             "displayMode": "normal",
  20.             "style": {
  21.                 "backgroundColor": "#fff",
  22.                 "border": "1px solid #ccc",
  23.                 "color": "#666",
  24.             }
  25.         },
  26.         {
  27.             "type": "tag",
  28.             "label": "自定义样式2",
  29.             "displayMode": "rounded",
  30.             "style": {
  31.                 "backgroundColor": "#2468f2",
  32.                 "borderColor": "#2468f2",
  33.                 "color": "#fff",
  34.             }
  35.         },
  36.     ]
  37. }

属性表

属性名 类型 默认值 说明
displayMode `’normal’ \ ‘rounded’ \ ‘status’` normal 展现模式
color `’active’ \ ‘inactive’ \ ‘error’ \ ‘success’ \ ‘processing’ \ ‘warning’ \ 具体色值 ` 颜色主题，提供默认主题，并支持自定义颜色值
label string - 标签内容
icon SchemaIcon dot 图标 status 模式下的前置图标
className string 自定义 CSS 样式类名
style object {} 自定义样式（行内样式），优先级最高