Skip to content

Latest commit

 

History

History
181 lines (171 loc) · 5.65 KB

TabBar.mdx

File metadata and controls

181 lines (171 loc) · 5.65 KB
Raw
title
TabBar 标签栏

示例

import { TabBar, ListHeader } from '@tarojsx/ui'; import { UI } from '@/ui';

const Demo = () => {
  const [current, setCurrent] = React.useState(0);
  const onClick = React.useCallback((e) => {
    setCurrent(e.detail.value);
  }, []);
  return (
    <TabBar
      tabList={[{ title: '待办事项', text: 8 }, { title: '拍照' }, { title: '通讯录', dot: true }]}
      current={current}
      onClick={onClick}
    />
  );
};
const Demo = () => {
  const [current, setCurrent] = React.useState(0);
  const onClick = React.useCallback((e) => {
    setCurrent(e.detail.value);
  }, []);
  return (
    <TabBar
      backgroundColor="#ececec"
      color="#ea6bb8"
      selectedColor="#ff3333"
      tabList={[
        { title: '待办事项', iconType: 'bullet-list', text: 'new' },
        { title: '拍照', iconType: 'camera' },
        { title: '文件夹', iconType: 'folder', text: '100', max: 99 },
      ]}
      current={current}
      onClick={onClick}
    />
  );
};
const Demo = () => {
  const [current, setCurrent] = React.useState(0);
  const onClick = React.useCallback((e) => {
    setCurrent(e.detail.value);
  }, []);
  return (
    <TabBar
      tabList={[
        {
          title: '领取中心',
          image:
            'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png',
          selectedImage:
            'https://img14.360buyimg.com/jdphoto/s72x72_jfs/t17251/336/1311038817/3177/72595a07/5ac44618Na1db7b09.png',
          text: 'new',
        },
        {
          title: '找折扣',
          image:
            'https://img20.360buyimg.com/jdphoto/s72x72_jfs/t15151/308/1012305375/2300/536ee6ef/5a411466N040a074b.png',
        },
        {
          title: '领会员',
          image:
            'https://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png',
          text: '100',
          max: 99,
        },
      ]}
      current={current}
      onClick={onClick}
    />
  );
};
const Demo = () => {
  const [current, setCurrent] = React.useState(0);
  const onClick = React.useCallback((e) => {
    setCurrent(e.detail.value);
  }, []);
  return (
    <TabBar
      fixed
      tabList={[
        { title: '待办事项', iconType: 'bullet-list', text: 'new' },
        { title: '拍照', iconType: 'camera' },
        { title: '文件夹', iconType: 'folder', text: '100', max: 99 },
      ]}
      current={current}
      onClick={onClick}
    />
  );
};
{() => { const [current, setCurrent] = React.useState(0) const onClick = React.useCallback((e) => { setCurrent(e.detail.value) }, []) return (
) }}

API