Novices Plagiarizing Mozart
    Have ideas to improve npm?Join in the discussion! »

    @uiw/react-tag
    TypeScript icon, indicating that this package has built-in type declarations

    4.7.12 • Public • Published

    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 -

    Install

    npm i @uiw/react-tag

    DownloadsWeekly Downloads

    128

    Version

    4.7.12

    License

    MIT

    Unpacked Size

    37.8 kB

    Total Files

    15

    Last publish

    Collaborators

    • avatar