Tab 选项卡

选项卡切换，也可以用于表单项使用

示例

import { Tab } from '@/duxui'

<Tab>
  <Tab.Item title='标题1' paneKey={1} >
    <View>内容1</View>
  </Tab.Item>
  <Tab.Item title='标题2' paneKey={2} >
    <View>内容2</View>
  </Tab.Item>
  <Tab.Item title='标题3' paneKey={3} >
    <View>内容3</View>
  </Tab.Item>
</Tab>

// 仅使用导航部分
<Tab>
  <Tab.Item title='标题1' paneKey={1} />
  <Tab.Item title='标题2' paneKey={2} />
  <Tab.Item title='标题3' paneKey={3} />
</Tab>

Props

继承自Taro的View Props

defaultValue

默认选中的标签页的 key

类型	必填	默认值
string | number	否

value

用于控制选中的标签页

类型	必填	默认值
string | number	否

onChange

切换选项卡的时候触发的事件

类型	必填	默认值
(value: string | number) => void	否

type

设置tab样式

• line 底部线条样式
• button 按钮样式

类型	必填	默认值
enum('line', 'button')	否	button

buttonColor

按钮形式的时候未选中按钮背景颜色 可以指定为page颜色 默认为白色

类型	必填	默认值
enum('page')	否

buttonRound

按钮是否具有圆角

类型	必填	默认值
boolean	否	false

disabled

是否禁用

类型	必填	默认值
boolean	否	false

justify

高度撑满容器(flex: 1) 默认不撑起

类型	必填	默认值
boolean	否	false

lazyload

设置为true时，将不会在组件挂载的时候渲染被隐藏的标签页。

类型	必填	默认值
boolean	否	false

scroll

是否可横向滚动

类型	必填	默认值
boolean	否	false

expand

在右侧显示展开更多按钮 仅在滚动模式下生效

类型	必填	默认值
boolean	否	false

oneHidden

仅有一个Tab时是否隐藏Tab显示

类型	必填	默认值
boolean	否	false

tabStyle

tab的样式

类型	必填	默认值
CSSProperties	否	false

getItemStyle

用于自定义样式

const getItemStyle = useCallback(({ select }) => {
  if (isShop) {
    return {}
  }
  if (select) {
    return {
      line: {
        backgroundColor: '#fff'
      },
      text: {
        color: '#fff'
      }
    }
  } else {
    return {
      text: {
        color: 'rgba(255,255,255,0.7)'
      }
    }
  }
}, [isShop])

<Tab getItemStyle={getItemStyle}> 

</Tab>

需要返回的值说明

• line 底部线条样式
• text 文字样式
• container 项目的样式

类型	必填	默认值
(option: { select: boolean }) => { line?: CSSProperties; text?: CSSProperties; container?: CSSProperties }	否

Tab.Item Props

title

项目标题

类型	必填	默认值
string	否

paneKey

项目对应的key 如果不穿入将使用项目索引作为key

类型	必填	默认值
number | string	否

badgeProps

传入这参数可以给这一项加上红点指示

类型	必填	默认值
BadgeProps	否