Tag 筛选组件

渲染出一个筛选list

特殊说明

  • tag组件的是否选中，取决于数据源中每个Item的isSelected决定

安装

npm install @qnpm/q-tag --save --registry=http://npmrepo.corp.qunar.com

使用说明

显示代码

import Tag from '@qnpm/q-tag/src';

const DATA_SOURCE = [
  {title: '北京', isSelected: false},
  {title: '上海', isSelected: false},
  {title: '广东', isSelected: false},
  {title: '深圳', isSelected: true},
  {title: '珠海', isSelected: false},
  {title: '三亚', isSelected: false},
  {title: '厦门', isSelected: true},
  {title: '乌鲁木齐', isSelected: false}
  ];

const render = () => (
  <View style={styles.container}>
    <TextSplit text={"默认"}/>
    <Tag dataSource={DATA_SOURCE} />
    <TextSplit text={"自定义未选中样式"}/>
    <Tag
      dataSource={DATA_SOURCE}
      normalFontColor={"blue"}
      normalBorderColor={"blank"}
      normalItemBackgroundColor={"yellow"}
    />
    <TextSplit text={"自定义选中样式"}/>
    <Tag
      dataSource={DATA_SOURCE}
      selectedFontColor={"blue"}
      selectedBorderColor={"blank"}
      selectedItemBackgroundColor={"yellow"}
    />
    <TextSplit text={"自定义通用样式"}/>
    <Tag
      dataSource={DATA_SOURCE}
      fontSize={14}
      borderWidth={1}
      itemWidth={70}
      itemHeight={30}
      itemGap={15}
    />
    <TextSplit text={"点击回调"}/>
    <Tag
      dataSource={DATA_SOURCE}
      onClickItem={(index, isSelected, title) => {
        alert(`${index} ${isSelected} ${title}`);
      }}
    />
  </View>
);

属性说明

属性名 类型 默认值 是否必须 说明
autoScroll boolean true false 点击某个item，是否会自动将该item滑动至可见区域（组件中间）
borderWidth number 0.5 false 边框宽度
customStyle ViewStyle '' false 组件样式，高度固定为24
dataSource {title: string, isSelected: boolean}[] [] false 筛选项数据源
fontSize number '12' false 单个筛选项文字字号
itemGap number 10 false 每个item之间的间隙
itemHeight number 24 false 单个item高度度
itemWidth number 无 false 单个item宽度，如果不设置，默认会跟随文字数量自适应
needScale boolean false false 是否幕大小改变缩放
normalBorderColor string #F2F2F2 false 单个筛选项正常状态边框色
normalFontColor string #333333 false 单个筛选项文字正常状态颜色
normalItemBackgroundColor string #F2F2F2 false 单个筛选项正常状态背景色
onClickItem (index: number, title: string) => void 无 false item的点击回调
selectedBorderColor string #00CAD8 false 单个筛选项选中状态边框色
selectedFontColor string #00CAD8 false 单个筛选项文字选中状态颜色
selectedItemBackgroundColor string #F2FCFD false 单个筛选项选中状态背景色
Tab
Tips