Tantalum UI

Collapse/CollapseItem 折叠面板 

import {
  CollapseItemOnToggle,
  CollapseOnChange,
  TaCollapse,
  TaCell,
  TaGroup,
  showToast
} from '@/index'

export default function ExpCollapse() {
  const onChange: CollapseOnChange = activeNames => {
    console.log('change', activeNames)
    showToast(
      (activeNames.length > 0 ? activeNames.join('，') : '没有项') + '展开'
    )
  }

  const onToggle: CollapseItemOnToggle = res => {
    console.log('toggle', res)
    showToast(res.spread ? '展开' : '收起')
  }

  return (
    <>
      <TaGroup title="基础用法">
        <TaCollapse>
          <TaCollapse.Item title="标题1" name="row1">
            <div className="exp-collapse-pad">
              代码是写出来给人看的，附带能在机器上运行
            </div>
          </TaCollapse.Item>
          <TaCollapse.Item title="标题2" name="row2">
            <div className="exp-collapse-pad">
              代码是写出来给人看的，附带能在机器上运行
            </div>
          </TaCollapse.Item>
          <TaCollapse.Item title="标题3" name="row3">
            <div className="exp-collapse-pad">
              代码是写出来给人看的，附带能在机器上运行
            </div>
          </TaCollapse.Item>
        </TaCollapse>
      </TaGroup>
      <TaGroup title="手风琴">
        <TaCollapse accordion>
          <TaCollapse.Item title="标题1" name="row1">
            <div className="exp-collapse-pad">
              代码是写出来给人看的，附带能在机器上运行
            </div>
          </TaCollapse.Item>
          <TaCollapse.Item title="标题2" name="row2">
            <div className="exp-collapse-pad">
              代码是写出来给人看的，附带能在机器上运行
            </div>
          </TaCollapse.Item>
          <TaCollapse.Item title="标题3" name="row3">
            <div className="exp-collapse-pad">
              代码是写出来给人看的，附带能在机器上运行
            </div>
          </TaCollapse.Item>
        </TaCollapse>
      </TaGroup>
      <TaGroup title="其他">
        <TaCollapse value={['row1']}>
          <TaCollapse.Item title="默认展开" name="row1">
            <div className="exp-collapse-pad">
              代码是写出来给人看的，附带能在机器上运行
            </div>
          </TaCollapse.Item>
          <TaCollapse.Item title="和 Cell 组合" name="row2">
            <TaCell label="单元格" content="内容"></TaCell>
            <TaCell
              label="单元格"
              content="内容"
              description="描述信息"
            ></TaCell>
          </TaCollapse.Item>
          <TaCollapse.Item title="带图标" icon="MenuOutlined" name="row3">
            <div className="exp-collapse-pad">
              代码是写出来给人看的，附带能在机器上运行
            </div>
          </TaCollapse.Item>
          <TaCollapse.Item
            title="禁用"
            disabled
            icon="StopOutlined"
            name="row4"
          >
            <div className="exp-collapse-pad">
              代码是写出来给人看的，附带能在机器上运行
            </div>
          </TaCollapse.Item>
        </TaCollapse>
      </TaGroup>
      <TaGroup title="Collapse 的事件 change">
        <TaCollapse onChange={onChange}>
          <TaCollapse.Item title="标题1" name="第1项">
            <div className="exp-collapse-pad">
              代码是写出来给人看的，附带能在机器上运行
            </div>
          </TaCollapse.Item>
          <TaCollapse.Item title="标题2" name="第2项">
            <div className="exp-collapse-pad">
              代码是写出来给人看的，附带能在机器上运行
            </div>
          </TaCollapse.Item>
          <TaCollapse.Item title="标题3" name="第3项">
            <div className="exp-collapse-pad">
              代码是写出来给人看的，附带能在机器上运行
            </div>
          </TaCollapse.Item>
        </TaCollapse>
      </TaGroup>
      <TaGroup title="CollapseItem 的事件 toggle">
        <TaCollapse>
          <TaCollapse.Item title="标题1" name="row1" onToggle={onToggle}>
            <div className="exp-collapse-pad">
              代码是写出来给人看的，附带能在机器上运行
            </div>
          </TaCollapse.Item>
        </TaCollapse>
      </TaGroup>
    </>
  )
}

Import 

import { TaCollapse, TaCollapseItem } from 'tantalum-ui-mobile-react'

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

Import Type

组件导出的类型定义：

import type {
  CollapseActiveName,
  CollapseOnChange,
  CollapseItemOnToggle
} from 'tantalum-ui-mobile-react'

Collapse

Collapse Props

属性类型默认值必填说明
valuestring | string[][]否当前展开面板的 name 列表，需要每个 CollapseItem 组件都设置上 name
accordionbooleanfalse否是否开启手风琴模式

Collapse Events

事件描述回调函数参数TypeScript 函数
onChange切换面板时触发activeNames: string[]CollapseOnChange

Collapse Slots

children

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

<TaCollapse>
  <TaCollapse.Item title="标题1" name="row1">
    <div className="exp-collapse-pad">
      代码是写出来给人看的，附带能在机器上运行
    </div>
  </TaCollapse.Item>
  <TaCollapse.Item title="标题2" name="row2">
    <div className="exp-collapse-pad">
      代码是写出来给人看的，附带能在机器上运行
    </div>
  </TaCollapse.Item>
  <TaCollapse.Item title="标题3" name="row3">
    <div className="exp-collapse-pad">
      代码是写出来给人看的，附带能在机器上运行
    </div>
  </TaCollapse.Item>
</TaCollapse>

CollapseItem

CollapseItem Props

属性类型默认值必填说明
titlestring''否面板子项标题
iconstring否面板子项标题前图标，使用 Icon 组件
namestring是唯一标识，设置后配合 Collapse 的 value 和 onChange 使用
disabledbooleanfalse否是否禁用

CollapseItem Events

事件描述回调函数参数TypeScript 函数
onToggle面板子项展开/收起时触发payload: { name: string, spread: boolean } 其中 spread=true 展开/spread=false 收起CollapseItemOnToggle