@uiw/react-tag

Tag 标签

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

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

基础用法

import React from 'react';
import { Tag, Divider } from 'uiw';

const Demo = () => (
  <div>
    <Tag title="成功-绿色" color="#28a745" />
    <Tag title="主要-蓝色" color="#008EF0" />
    <Tag title="信息-青色" color="#1EABCD" />
    <Tag title="导航-藏青" color="#393E48" />
    <Divider />
    <Tag color="#ffc107">警告-黄色</Tag>
    <Tag color="#F95C2B">提醒-橙色</Tag>
    <Tag color="#dc3545">危险-红色</Tag>
    <Tag>默认颜色</Tag>
    <Divider />
    <Tag light color="#28a745">成功-绿色</Tag>
    <Tag light color="#008EF0">主要-蓝色</Tag>
    <Tag light color="#1EABCD">信息-青色</Tag>
    <Tag light color="#393E48">导航-藏青</Tag>
    <Divider />
    <Tag light color="#ffc107">警告-黄色</Tag>
    <Tag light color="#F95C2B">提醒-橙色</Tag>
    <Tag light color="#dc3545">危险-红色</Tag>
    <Tag light>默认颜色</Tag>
  </div>
)
ReactDOM.render(<Demo />, _mount_);

标签禁用

import React from 'react';
import { Tag, Divider } from 'uiw';

const Demo = () => (
  <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>
)
ReactDOM.render(<Demo />, _mount_);

添加图标

import React from 'react';
import { Tag, Divider } from 'uiw';

const Demo = () => (
  <div>
    <Tag title={(
      <>
        <Icon type="heart-on" verticalAlign="baseline" /> 成功-绿色
      </>
    )} color="#28a745" />
    <Tag color="#1C7CEB"><Icon type="heart-on" verticalAlign="baseline" /> 限购一份</Tag>
    <Tag color="red"><Icon type="heart-on" verticalAlign="baseline" /> 胶囊</Tag>
    <Divider />
    <Tag light color="#28a745"><Icon type="heart-on" verticalAlign="baseline" /> 成功-绿色</Tag>
    <Tag light color="#008EF0"><Icon type="heart-on" verticalAlign="baseline" /> 主要-蓝色</Tag>
    <Tag light color="#dc3545"><Icon type="heart-on" verticalAlign="baseline" /> 信息-红色</Tag>
  </div>
)
ReactDOM.render(<Demo />, _mount_);

控制关闭标签

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>
    );
  }
}
ReactDOM.render(<Demo />, _mount_);

标签组动态删除

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 (
      <div>
        {dataTags.map((item, idx) => {
          return (
            <Tag
              key={idx}
              closable
              onClose={this.onClose.bind(this, item)}
              visible={this.state.visible}
              color={item.color}>
              {item.label}
            </Tag>
          )
        })}
        <Button style={{ marginLeft: 5, minHeight: 20, padding: 0 }} size="small" onClick={this.addTag.bind(this)}> <Icon type="plus" /> </Button>
      </div>
    );
  }
}
ReactDOM.render(<Demo />, _mount_);

热门标签

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

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>
    );
  }
}
ReactDOM.render(<Demo />, _mount_);

选择器

import React from 'react';
import ReactDOM from 'react-dom';
import { Dropdown, Menu, Button, Icon, Input, Checkbox, Tag, Row, Col } from 'uiw';

class SelectTag extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: props.value,
      option: props.option,
      selectOption: [],
      isOpen: false,
    };
  }
  componentDidMount() {
    const { value, option } = this.state;
    const selectOption = value.map(val => option.find(item => val === item.value)).filter(item => !!item);
    this.setState({ selectOption });
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    if (nextProps.value !== this.props.value) {
      this.setState({ value: nextProps.value });
    }
    if (nextProps.option !== this.props.option) {
      this.setState({ option: nextProps.option });
    }
  }
  onVisibleChange(isOpen) {
    this.setState({ isOpen });
  }
  onClick(item) {
    this.modifyValue(item.value, item);
  }
  modifyValue(itemVal, item) {
    const { onChange } = this.props;
    let { value, selectOption } = this.state;
    const checked = value.includes(itemVal);
    // let values = [...value];
    if(!checked) {
      value.push(itemVal);
      selectOption.push(item);
    } else {
      value = value.filter(v => itemVal !== v);
      selectOption = selectOption.filter(v => item.value !== v.value);
    }
    this.setState({ value: value, selectOption, isOpen: false }, () => {
      onChange && onChange(value);
    });
  }
  onClose(item, e) {
    e.stopPropagation();
    this.modifyValue(item.value, item);
  }
  onChange(item, e) {
    this.modifyValue(item.value);
  }
  onSearch(e) {
    let option = this.state.option;
    const options = this.props.option.filter(item => item.label.indexOf(e.target.value) > -1);
    this.setState({ option: options  });
  }
  render() {
    const { placeholder = '请选择' } = this.props;
    const { isOpen, value, option, selectOption } = this.state;
    return (
      <Dropdown
        trigger="click"
        onVisibleChange={this.onVisibleChange.bind(this)}
        isOpen={isOpen}
        menu={
          <Menu bordered style={{ minWidth: 220, height: 210, overflow: 'auto' }}>
            <Menu.Divider
              title={
                <Input placeholder="请输入内容" onChange={this.onSearch.bind(this)} />
              }
            />
            {option.map((item, idx) => {
              const active = value.includes(item.value);
              return (
                <Menu.Item
                  key={idx}
                  text={
                    <Row gutter={10} justify="space-between">
                      <Col>
                        <span style={{ verticalAlign: 'middle' }}>{item.label}</span>
                      </Col>
                      <Col fixed>
                        {active && <Checkbox checked={active} onChange={this.onChange.bind(this, item)} />}
                      </Col>
                    </Row>
                  }
                  onClick={this.onClick.bind(this, item)}
                />
              );
            })}
          </Menu>
        }
      >
        <div style={{ minWidth: 120, maxWidth: 320, padding: 5, border: '1px solid #c7c8ca', borderRadius: 3 }}>
          {selectOption.length === 0 && (
            <span style={{
              lineHeight: '23px',
              padding: '0 4px',
            }}>{placeholder}</span>
          )}
          {selectOption.map((item, idx) => {
            const { label, ...itemProps } = item;
            const props = {
              style: { margin: 2 },
              onClose: this.onClose.bind(this, item),
              key: idx,
              ...itemProps,
            }
            return (
              <Tag light closable {...props}>{label}</Tag>
            );
          })}
        </div>
      </Dropdown>
    )
  }
}

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' },
];

ReactDOM.render(
  <div>
    <SelectTag placeholder="选择城市" option={option} value={[2, 8]} onChange={(item) => { console.log('item', item); }} />
  </div>,
  _mount_
);

Tag

参数	说明	类型	默认值
title	标题，和 children 几乎是一样的	String/ReactNode	-
color	颜色	String	#1C7CEB
disabled	禁用	Boolean	false
light	有边框的标签	Boolean	false
bordered	当设置 light={ture} 时，起作用，设置为 false 不展示边框样式	Boolean	true
closable	显示关闭按钮	Boolean	false
visible	是否显示标签	Boolean	true
onClose	关闭时的回调	Function	-