Tantalum UI

TabView/TabViewItem 标签页 

import {
  TaTabView,
  TaScrollView,
  TaEmpty,
  TaGroup,
  ScrollViewOnRefreshing
} from '@/index'

export default function ExpTabView() {
  const onRefreshing: ScrollViewOnRefreshing = (res, done) => {
    setTimeout(() => {
      done()
    }, 2000)
  }

  return (
    <>
      <TaGroup title="基础用法">
        <TaTabView className="exp-tabView">
          <TaTabView.Item name="Tab 1">
            <TaScrollView
              className="exp-tabView-scroll-view"
              enablePullDirections={['down']}
              scrollY
              scrollX
              onRefreshing={onRefreshing}
            >
              <TaEmpty
                className="exp-tabView-empty"
                description="Tab 1 下拉刷新"
              ></TaEmpty>
            </TaScrollView>
          </TaTabView.Item>
          <TaTabView.Item name="Tab 2">
            <TaEmpty
              className="exp-tabView-empty"
              description="Tab 2"
            ></TaEmpty>
          </TaTabView.Item>
        </TaTabView>
      </TaGroup>
      <TaGroup title="垂直">
        <TaTabView className="exp-tabView" initialVertical scrollThreshold={1}>
          <TaTabView.Item name="Tab 1">
            <TaScrollView
              className="exp-tabView-scroll-view"
              enablePullDirections={['down']}
              scroll-y
              onRefreshing={onRefreshing}
            >
              <TaEmpty
                className="exp-tabView-empty"
                description="Tab 1 下拉刷新"
              ></TaEmpty>
            </TaScrollView>
          </TaTabView.Item>
          <TaTabView.Item name="Tab 2">
            <TaEmpty
              className="exp-tabView-empty"
              description="Tab 2"
            ></TaEmpty>
          </TaTabView.Item>
        </TaTabView>
      </TaGroup>
    </>
  )
}

Import 

import { TaTabView, TaTabViewItem } from 'tantalum-ui-mobile-react'

具体的引入方式可以参考引入组件。

Import Type

组件导出的类型定义：

import type {
  TabViewOnChange,
  TabViewOnAnimated,
  TabViewRef
} from 'tantalum-ui-mobile-react'

TabView

TabView Props

属性类型默认值必填说明
initialVerticalbooleanfalse否初始化是否侧边菜单展示方式
scrollThresholdnumber4否超过 scrollThreshold 个 Tab 使用滚动形式
backUpperWhenChangebooleanfalse否切换面板时，如果是旧面板，是否返回顶部/左侧位置

TabView Events

事件描述回调函数参数TypeScript 函数
onChange切换时触发(name: string, activeIndex: number)TabViewOnChange
onAnimated动画结束时触发(activeIndex: number)TabViewOnAnimated

TabView Slots

children

注：其中只可放置 TabViewItem 组件，否则会导致未定义的行为。

<TaTabView className="exp-tabView">
  <TaTabView.Item name="Tab 1">
    <TaScrollView
      className="exp-tabView-scroll-view"
      enablePullDirections={['down']}
      scrollY
      scrollX
      onRefreshing={onRefreshing}
    >
      <TaEmpty
        className="exp-tabView-empty"
        description="Tab 1 下拉刷新"
      ></TaEmpty>
    </TaScrollView>
  </TaTabView.Item>
  <TaTabView.Item name="Tab 2">
    <TaEmpty className="exp-tabView-empty" description="Tab 2"></TaEmpty>
  </TaTabView.Item>
</TaTabView>

Methods 

interface TabViewRef {
  switchTo: (name: string) => void
  switchToIndex: (index: number) => void
}
方法名说明
switchTo切换到指定 name 的 Tab
switchToIndex切换到指定索引的 Tab

TabViewItem

TabViewItem Props

属性类型默认值必填说明
namestring是对应的菜单名称

TabViewItem Slots

内容（children） 

<TaTabView.Item name="Tab 2">
  <TaEmpty description="Tab 2"></TaEmpty>
</TaTabView.Item>