grouptag-react

    1.0.7 • Public • Published

    grouptag-react

    定义一组选中标签,可以单选也可以多选

    效果图

    WX20200330-171105@2x.png

    demo

    import GroupTag from 'grouptag-react'
    const { TagItem } = GroupTag;
     
    <section>
      <GroupTag
        value={["1", "2"]}
        source={[
          { id: "1", name: "电脑" },
          { id: "2", name: "水杯" },
          { id: "3", name: "冰箱" },
          { id: "4", name: "充电器" },
          { id: "5", name: "其他" },
        ]}
        onClick={onClickItem}
      />
     
      <GroupTag
        isSingle={true}
        onClick={onClickItem}
        source={[
          { id: "1", name: "电脑" },
          { id: "2", name: "水杯" },
          { id: "3", name: "冰箱" },
          { id: "4", name: "充电器" },
          { id: "5", name: "其他" },
        ]}
      />
     
      <GroupTag isSingle={true} onClick={onClickItem}>
        <TagItem value="a" className={styles.item}>
          电脑
        </TagItem>
        <TagItem value="b" style={{ color: "red" }}>
          水杯
        </TagItem>
        <TagItem value="c">冰箱</TagItem>
        <TagItem value="d">充电器</TagItem>
      </GroupTag>
    </section>

    GroupTag 参数说明

    参数 说明 默认值
    value 选中的值 []
    source 数据源,例如:[{id:'1',name:'电脑'}] 空数组:[]
    onClick 各项的点击事件 ,(checkedItem)=>{} 空函数
    isSingle 是否为单选 false
    idField 指定数据源中作为 id 的字段,比如uid id
    textField 指定数据源中作为 text 显示的字段,比如text name
    className 样式名称
    style 内嵌样式

    TagItem 参数说明

    参数 说明 默认值
    value 选中的值 []
    className 样式名称
    style 内嵌样式
    idField 指定 click 事件参数对象的 id 字段,比如uid 默认和数据源中一致,没有特殊情况这个无需设置
    textField 指定 click 事件参数对象的 id 字段,比如text 默认和数据源中一致,没有特殊情况这个无需设置

    Install

    npm i grouptag-react

    DownloadsWeekly Downloads

    19

    Version

    1.0.7

    License

    ISC

    Unpacked Size

    25.1 kB

    Total Files

    3

    Last publish

    Collaborators

    • wenmu