Tantalum UI

ScrollTab/ScrollTabItem 标签滚动布局 

import { TaScrollTab, TaGroup, ScrollTabOnChange } from '@/index'

const offsetTop = 52
const offsetBottom = 12

export default function ExpScrollTab() {
  const onChange: ScrollTabOnChange = res => {
    console.log('change', res)
  }

  return (
    <>
      <TaGroup title="基础用法">
        <TaScrollTab
          className="exp-scrollTab-boxs"
          stickyOffsetTop={offsetTop}
          stickyOffsetBottom={offsetBottom}
          onChange={onChange}
        >
          <TaScrollTab.Item name="Dust Red">
            <div className="exp-scrollTab-box box-1"></div>
          </TaScrollTab.Item>
          <TaScrollTab.Item name="Volcano">
            <div className="exp-scrollTab-box box-2"></div>
          </TaScrollTab.Item>
          <TaScrollTab.Item name="Sunset Orange">
            <div className="exp-scrollTab-box box-3"></div>
          </TaScrollTab.Item>
          <TaScrollTab.Item name="Calendula Gold">
            <div className="exp-scrollTab-box box-4"></div>
          </TaScrollTab.Item>
          <TaScrollTab.Item name="Sunrise Yellow">
            <div className="exp-scrollTab-box box-5"></div>
          </TaScrollTab.Item>
          <TaScrollTab.Item name="Lime">
            <div className="exp-scrollTab-box box-6"></div>
          </TaScrollTab.Item>
          <TaScrollTab.Item name="Polar Green">
            <div className="exp-scrollTab-box box-7"></div>
          </TaScrollTab.Item>
          <TaScrollTab.Item name="Cyan">
            <div className="exp-scrollTab-box box-8"></div>
          </TaScrollTab.Item>
          <TaScrollTab.Item name="Daybreak Blue">
            <div className="exp-scrollTab-box box-9"></div>
          </TaScrollTab.Item>
          <TaScrollTab.Item name="Geek Blue">
            <div className="exp-scrollTab-box box-10"></div>
          </TaScrollTab.Item>
          <TaScrollTab.Item name="Golden Purple">
            <div className="exp-scrollTab-box box-11"></div>
          </TaScrollTab.Item>
          <TaScrollTab.Item name="Magenta">
            <div className="exp-scrollTab-box box-12"></div>
          </TaScrollTab.Item>
        </TaScrollTab>
      </TaGroup>
    </>
  )
}

Import 

import { TaScrollTab, TaScrollTabItem } from 'tantalum-ui-mobile-react'

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

Import Type

组件导出的类型定义：

import type { ScrollTabOnChange, ScrollTabRef } from 'tantalum-ui-mobile-react'

ScrollTab

ScrollTab Props

属性类型默认值必填说明
stickyOffsetTopstring | number0否数值默认是 px，也支持 vw/vh
stickyOffsetBottomstring | number0否数值默认是 px，也支持 vw/vh

ScrollTab Events

事件描述回调函数参数TypeScript 函数
onChange切换时触发(name: string, activeIndex: number)ScrollTabOnChange

ScrollTab Slots

children

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

<TaScrollTab className="exp-scrollTab-boxs">
  <TaScrollTab.Item name="Dust Red">
    <div className="exp-scrollTab-box box-1"></div>
  </TaScrollTab.Item>
  <TaScrollTab.Item name="Volcano">
    <div className="exp-scrollTab-box box-2"></div>
  </TaScrollTab.Item>
</TaScrollTab>

Methods 

interface ScrollTabRef {
  scrollTo: (name: string) => void
  scrollToIndex: (index: number) => void
}
方法名说明
scrollTo切换到指定 name 的 Item
scrollToIndex切换到指定 index 的 Item

ScrollTabItem

ScrollTabItem Props

属性类型默认值必填说明
namestring是唯一标识，设置后配合 ScrollTab 组件的 value 和 onChange 使用
titlestring否分组名，也应用于吸附，如果没有设置则获取 name 的值

ScrollTabItem Slots

children 

<TaScrollTab.Item name="Dust Red">
  <div className="exp-scrollTab-box box-1"></div>
</TaScrollTab.Item>