Tantalum UI

IndexView/IndexViewItem 索引栏 

import { TaIndexView, TaCell, TaGroup, IndexViewOnChange } from '@/index'

const offsetTop = 52
const indexList = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')

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

  const renderItems = () =>
    indexList.map(item => (
      <TaIndexView.Item name={item} key={item}>
        <TaCell label="单元格" />
        <TaCell label="单元格" />
        <TaCell label="单元格" />
        <TaCell label="单元格" />
        <TaCell label="单元格" />
      </TaIndexView.Item>
    ))

  return (
    <>
      <TaGroup title="基础用法">
        <TaIndexView stickyOffsetTop={offsetTop} onChange={onChange}>
          {renderItems()}
        </TaIndexView>
      </TaGroup>
    </>
  )
}

Import 

import { TaIndexView, TaIndexViewItem } from 'tantalum-ui-mobile-react'

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

Import Type

组件导出的类型定义：

import type { IndexViewOnChange, IndexViewRef } from 'tantalum-ui-mobile-react'

IndexView

IndexView Props

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

IndexView Events

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

Methods 

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

IndexView Slots

children

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

<TaIndexView>
  <TaIndexView.Item name="A">
    <TaCell label="单元格" />
    <TaCell label="单元格" />
    <TaCell label="单元格" />
  </TaIndexView.Item>
</TaIndexView>

IndexViewItem

IndexViewItem Props

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

IndexViewItem Slots

children 

<TaIndexView.Item name="A">
  <TaCell label="单元格" />
  <TaCell label="单元格" />
  <TaCell label="单元格" />
</TaIndexView.Item>