Tantalum UI

SwipeCell 滑动单元格 

import {
  TaSwipeCell,
  TaCell,
  TaGroup,
  showToast,
  SwipeCellButtonOption,
  SwipeCellOnButtonClick
} from '@/index'

const buttons: SwipeCellButtonOption[] = [
  {
    text: '加入收藏',
    type: 'warning'
  },
  {
    text: '删除',
    type: 'danger'
  }
]

export default function ExpSwipeCell() {
  const onButtonClick: SwipeCellOnButtonClick = e => {
    console.log('onButtonClick', e)
    showToast(`点击了 ${e.item.text}`)
  }

  return (
    <>
      <TaGroup title="基础用法">
        <TaSwipeCell buttons={buttons}>
          <TaCell label="单元格" content="向左划"></TaCell>
        </TaSwipeCell>
      </TaGroup>
      <TaGroup title=" 事件监听">
        <TaSwipeCell buttons={buttons} onButtonClick={onButtonClick}>
          <TaCell label="单元格" content="向左划"></TaCell>
        </TaSwipeCell>
      </TaGroup>
    </>
  )
}

Import 

import { TaSwipeCell } from 'tantalum-ui-mobile-react'

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

Import Type

组件导出的类型定义：

import type {
  SwipeCellButtonOption,
  SwipeCellOnButtonClick
} from 'tantalum-ui-mobile-react'

Props

属性类型默认值必填说明
buttonsSwipeCellButtonOption[]是按钮列表

SwipeCellButtonOption 的结构 

type SwipeCellButtonOption = {
  text: string
  type?: StateType
}

const buttons: SwipeCellButtonOption[] = [
  {
    text: '加入收藏',
    type: 'warning'
  }
]

StateType 的合法值

值说明
primary主要
default次要
success成功
warning警告
danger危险

Events

事件描述回调函数参数TypeScript 函数
onButtonClick点击按钮时触发payload: { item: SwipeCellButtonOption, index: number }SwipeCellOnButtonClick

Slots

被挂载元素（children） 

<TaSwipeCell buttons={buttons}>
  <TaCell label="单元格" content="向左划"></TaCell>
</TaSwipeCell>