标签栏

说明

设计

Api

参数	说明	类型	默认值
items	标签项列表	string[ ]	-
hasAll	是否有 ”全部“ 标签	boolean	true
seletTab	在选择新标签后执行的操作（参数是标签名）	Function	-

代码

type Props = {
  items: any[]
  hasAll?: boolean
  seletTab: (tab: string) => void
}
​
const Tabs = ({ items, hasAll = true, seletTab }: Props) => {
  // hasAll为true加入'全部'标签
  const list = hasAll ? ['全部', ...items] : [...items]
  // 当前选择的标签
  const [current, setCurrent] = useState(list[0])
  // 标签改变时执行
  const onChangeTab = (tab: string) => {
    setCurrent(tab)
    // 选择全部为“”
    if (tab === '全部') {
      tab = ''
    }
    //执行传入的函数
    seletTab(tab)
  }
  return (
    <div className={styles.tabs}>
      <input type="checkbox" id="extend" />
      <label htmlFor="extend">展开</label>
      <div className={styles.all}>
        {list.map((ele, index) => (
          <div
            key={index}
            className={`${styles.tab} ${current === ele ? styles.active : ''}`}
            onClick={() => onChangeTab(ele)}
          >
            {ele}
          </div>
        ))}
      </div>
    </div>
  )
}
​
export default Tabs

使用

import Tabs from '../../UI/Tab/Tabs'
​
const list = [
  '标签1',
  '标签2',
  '标签3',
  '标签4',
  '标签5',
  '标签6',
  '标签7',
  '标签8',
  '标签9',
  '标签10',
  '标签11',
  '标签12',
]
​
const TestTabs = () => {
  return (
    <div>
      <Tabs items={list} seletTab={console.log}></Tabs>
    </div>
  )
}
​
export default TestTabs

结束

GitHub源码地址

也欢迎到 我的博客 查看