uxcore-tag

2.3.0 • Public • Published

uxcore-tag Dependency Status devDependency Status

TL;DR

uxcore-tag ui component for react

setup develop environment

$ git clone https://github.com/uxcore/uxcore-tag
$ cd uxcore-tag
$ npm install
$ gulp server

Usage

const data = [
  {
    tag: 'owner创建0',
    count: 0,
    canAddCount: true,
    createByOwner: true,
    canDelete: true
  },
  {
    tag: 'owner创建1',
    count: 1,
    canAddCount: true,
    createByOwner: true,
    canDelete: false
  }
]

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      data: data
    }
  }

  onClickTag(tag) {

    console.log('点击标签: ', tag)
  }

  onAdd(tag) {
    let me = this,
      data = me.state.data;
    

    let item = {
      tag: tag,
      count: 0,
      canAddCount: false,
      createByOwner: false,
      canDelete: true
    }

    data.push(item);

    me.setState({
      data: data
    })

    console.log('添加标签: ' + tag);
  }

  onLike(tag) {
     let me = this,
      data = me.state.data;

      data = data.map(function (item) {
        if (item.tag == tag) {
          item.count = item.count + 1;
          item.canAddCount = false;
        }
        return item
      })

     me.setState({
      data: data
     }) 

    console.log('赞标签: ', tag);
  }
  
  onDelete(tag, cb) {
    let me = this,
      data = me.state.data;

      data = data.filter(function (item) {
        return item.tag != tag
      })

      cb && cb();
     me.setState({
      data: data
     }) 

    console.log('删除标签: ' + tag);
  }

  render() {
    let me = this;

    let props = {
      className: 'tag-classname',
      addTags: true,
      onAdd: me.onAdd.bind(me),
      locale: 'zh-cn'
      //locale: 'en-us'
    }

    return (
      <div className="demo">
        
        <Tag {...props}>
        {me.state.data.map(function (item, index) {
            return <Item 
                key={"uxcore-tag-item-" + index}
                className={item.createByOwner ? "create-by-owner" : ''}
                tag={item.tag}
                count={item.count}
                canAddCount={item.canAddCount}
                canDelete={item.canDelete}
                onClick={me.onClickTag.bind(me)}
                maxDisplayCount={99}
                onAddCount={me.onLike.bind(me)}
                onDelete={me.onDelete.bind(me)}
                confirmDeleteText="确定删除该标签吗?"
                locale="zh-cn"
                >
                {item.tag}
              </Item>
        })}
          
        </Tag>
      </div>
    );
  }

uxcore-tag

image

API

Props

Tag

配置项 类型 必填 默认值 功能/备注
className string optional '' 额外的className
addTags boolean optional true 是否可以新增tag
onAdd(tagName [, callback(keepOpen)]) function optional noop 新增tag的回调,tagName为新增的标签名;如果传入第二个参数,那么必须要执行callback,keepOpen表示是否保留输入框内容不收起输入框
locale string optional 'zh-cn' 语言,另可选'en-us', 'pl-pl'
placeholder string optional '请输入标签' 添加标签输入框的placeholder自定义

TagItem

通过 Tag.Item 取得。

配置项 类型 必填 默认值 功能/备注
className string optional '' 额外的className
tag string require '' tag的值
type string optional 枚举值 show, success, warning, info, danger
count number optional 0 标签后面的数字
canAddCount boolean optional false 是否可以增加数字
canDelete boolean optional false 是否可以删除标签
onClick(tagName) function optional noop 点标签回调
maxDisplayCount number optional 99 最大显示数字
onAddCount(tagName) function optional noop 点击增加数字的加号回调
onDelete(tagName, cb) function optional noop 点击删除icon回调 注意手动调用cb,否则弹窗不会消失
confirmDeleteText string optional '' 确认删除文案,如果不填则直接触发onDelete回调

Package Sidebar

Install

npm i uxcore-tag

Weekly Downloads

1

Version

2.3.0

License

MIT

Unpacked Size

69.2 kB

Total Files

24

Last publish

Collaborators

  • taoqili
  • eternalsky
  • ex90rts
  • damian1017