Tag 标签

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

import { Tag } from 'uiw';
// or
import Tag from '@uiw/react-tag';

基础用法

```jsx mdx:preview&bg=#fff import React from 'react'; import { Tag, Divider } from 'uiw';

export default function Demo() { return (

### 标签禁用

```jsx mdx:preview&bg=#fff
import React from 'react';
import { Tag, Divider } from 'uiw';

export default function Demo() {
  return (
    <div>
      <Tag disabled title="成功-绿色" color="#28a745" />
      <Tag disabled title="主要-蓝色" color="#008EF0" />
      <Tag disabled title="信息-青色" color="#1EABCD" />
      <Tag disabled title="导航-藏青" color="#393E48" />
      <Tag disabled color="#ffc107">警告-黄色</Tag>
      <Tag disabled color="#F95C2B">提醒-橙色</Tag>
      <Tag disabled color="#dc3545">危险-红色</Tag>
      <Tag disabled>默认颜色</Tag>
      <Divider />
      <Tag light disabled color="#28a745">成功-绿色</Tag>
      <Tag light disabled color="#008EF0">主要-蓝色</Tag>
      <Tag light disabled color="#1EABCD">信息-青色</Tag>
      <Tag light disabled color="#393E48">导航-藏青</Tag>
      <Tag light disabled color="#ffc107">警告-黄色</Tag>
      <Tag light disabled color="#F95C2B">提醒-橙色</Tag>
      <Tag light disabled color="#dc3545">危险-红色</Tag>
      <Tag light disabled>默认颜色</Tag>
    </div>
  )
}

添加图标

```jsx mdx:preview&bg=#fff import React from 'react'; import { Tag, Divider, Icon } from 'uiw';

const Demo = () => (

### 控制关闭标签

```jsx mdx:preview&bg=#fff
import React from 'react';
import ReactDOM from 'react-dom';
import { Tag, Icon } from 'uiw';

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: true,
      visible1: true,
    }
  }
  onClose(type) {
    this.setState({
      [type]: !this.state[type],
    });
  }
  render() { 
    return (
      <div>
        <Tag
          closable
          onClose={this.onClose.bind(this, 'visible')}
          visible={this.state.visible}
          color="#F95C2B">提醒-橙色</Tag>
        <Tag
          closable
          light
          visible={this.state.visible1}
          color="#dc3545"
          onClose={this.onClose.bind(this, 'visible1')}
        >
            <Icon type="heart-on" verticalAlign="baseline" /> 信息-红色
        </Tag>
      </div>
    );
  }
}
export default Demo;

标签组动态删除

```jsx mdx:preview&bg=#fff import React from 'react'; import ReactDOM from 'react-dom'; import { Tag, Button, Icon } from 'uiw';

let num = 3; class Demo extends React.Component { constructor(props) { super(props); this.state = { dataTags: [ { label: '橘子', value: 1, color: '#28a745' }, { label: '苹果', value: 2, color: '#F95C2B' }, { label: '橘子', value: 3, color: '#008EF0' }, ] } } onClose(data) { const dataTags = this.state.dataTags.filter(item => item.value !== data.value); this.setState({ dataTags }); } addTag() { const { dataTags } = this.state; num += 1; dataTags.push({ label: 橘子${num}, value: num, color: '#28a745' }); this.setState({ dataTags }); } render() { const { dataTags } = this.state; return (

### 热门标签

选择你感兴趣的话题，下面实例类似 CheckBox 多选。

```jsx mdx:preview&bg=#fff
import React from 'react';
import ReactDOM from 'react-dom';
import { Tag } from 'uiw';

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dataTags: [
        { label: '橘子', value: 1, color: '#008EF0' },
        { label: '苹果', value: 2, color: '#008EF0' },
        { label: '橘子', value: 3, color: '#008EF0' },
        { label: '川菜', value: 4, color: '#008EF0' },
      ],
      values: [1, 2, 3],
    }
  }
  onTagChecked(data) {
    let { values } = this.state;
    const isChecked = values.indexOf(data.value) === -1;
    if(isChecked) {
      values.push(data.value);
    } else {
      values = values.filter(item => item !== data.value);
    }
    this.setState({ values });
  }
  render() { 
    const { dataTags, values } = this.state;
    return (
      <div>
        {dataTags.map((item, idx) => {
          const isChecked = values.indexOf(item.value) === -1;
          return (
            <Tag
              onClick={this.onTagChecked.bind(this, item)}
              key={idx}
              light={isChecked}
              bordered={false}
              color="#008EF0"
            >
              {item.label}
            </Tag>
          )
        })}
      </div>
    );
  }
}
export default Demo;

选择器

```jsx mdx:preview&bg=#fff import React from 'react'; import ReactDOM from 'react-dom'; import { Dropdown, Menu, Button, Icon, Input, Checkbox, Tag, Row, Col } from 'uiw';

function SelectTag(props) { const { placeholder, onChange } = props; const [selectOption, setSelectOption] = React.useState([]); const [value, setValue] = React.useState([...props.value]); const [isOpen, setIsOpen] = React.useState(false); const [option, setOption] = React.useState([...props.option]);

React.useEffect(() => { const selectOptionVal = props.value.map(val => option.find(item => val === item.value)).filter(item => !!item); if (selectOptionVal !== selectOption) { setSelectOption(selectOptionVal); } if (value !== props.value) { setValue(props.value); } }, [props.value]);

React.useEffect(() => { if (value !== props.option) { setOption(props.option); } }, [props.option]);

function modifyValue(itemVal, item) { let newValue = [...value]; let newSelectOption = [...selectOption]; const checked = newValue.includes(itemVal); if(!checked) { newValue.push(itemVal); newSelectOption.push(item); } else { newValue = newValue.filter(v => itemVal !== v); newSelectOption = selectOption.filter(v => item.value !== v.value); } setValue(newValue); setSelectOption(selectOption); // setIsOpen(false); onChange && onChange(newValue); }

function handleChange(e) { const options = option.filter(item => item.label.indexOf(e.target.value) > -1); setOption(options); }

return ( <Dropdown trigger="click" onVisibleChange={(open) => setIsOpen(open)} isOpen={isOpen} menu={ <Menu bordered style={{ minWidth: 220, height: 210, overflow: 'auto' }}> <Menu.Divider title={ <Input placeholder="请输入内容" onChange={(e) => handleChange(e)} /> } /> {option.map((item, idx) => { const active = value.includes(item.value); return ( <Menu.Item key={idx} text={ <Row gutter={10} justify="space-between"> {item.label} {active && <Checkbox checked={active} onChange={(e) => handleChange(e)} />} </Row> } onClick={() => { modifyValue(item.value, item) }} /> ); })} </Menu> } >

const option = [ { label: '台北市, 中国台湾', value: 1 }, { label: '海参崴, 俄罗斯', value: 2 }, { label: '三亚市, 中国', value: 3, color: '#dc3545' }, { label: '成都市, 中国', value: 4, color: '#dc3545' }, { label: '布拉格, 捷克', value: 5 }, { label: '布拉迪斯拉发, 斯洛伐克', value: 6 }, { label: 'LAX 洛杉矶, 美国', value: 7 }, { label: '黄冈市, 中国', value: 8, color: '#dc3545' }, ];

export default function Demo() { return (

Tag