title: Tag 标签 nav: title: 组件 order: 1 group: title: 数据展示 order: 2

Tag 标签

进行标记和分类的小标签。

基础用法

import React from 'react';
import { Tag } from '@fan-comp/tag';

export default () => (
  <div style={{ display: 'flex', gap: '8px' }}>
    <Tag>Tag 1</Tag>
    <Tag>Tag 2</Tag>
    <Tag closable onClose={() => console.log('Tag closed')}>
      可关闭标签
    </Tag>
  </div>
);

预设状态颜色

import React from 'react';
import { Tag } from '@fan-comp/tag';

export default () => (
  <div style={{ display: 'flex', gap: '8px' }}>
    <Tag color="success">success</Tag>
    <Tag color="processing">processing</Tag>
    <Tag color="warning">warning</Tag>
    <Tag color="error">error</Tag>
    <Tag color="default">default</Tag>
  </div>
);

API