跳到主要内容

级联 Cascade

用于联动选择。

安装使用

import { TiCascade } from '@titian-design/mobile-react';

用法示例

静态数据

按照示例数据格式,把全部层级的数据传给 options 字段。

<TiCascade tabs={ tab } options={ options } />

动态数据

getOptions 属性传入一个异步接口,有 3 种做法:

  1. 该接口返回全部层级的数据。
  2. 该接口可以返回单层数据;选择时,会再次调用该接口,获取下一层级数据。
  3. 该接口可以搭配静态 options 数据;当在 options 内找不到下一层数据时,会尝试调用 getOptions 接口,拿到下一层级数据。
const App: React.FC = () => {
const asyncGetOptionAPI = async (value: any) => {
let rawResponse;
if (value) {
rawResponse = await fetch('api3/address/tmp/getAreasByCityId', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ areaCode: value.areaCode }),
});
} else {
rawResponse = await fetch('api3/address/tmp/getProvinceCity', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({}),
});
}
const { data } = await rawResponse.json();
return data;
};

return (<TiCascade getOptions={asyncGetOptionAPI}/>)
};

TiCascade API

属性 Properties

名称类型必填默认值说明备注
titlebarbooleantrue-
titlestring'选择地址'标题-
subTitlestring-副标题-
codestring'code'列标识-
labelstring'label'文案字段-
valuearray[]结果-
options { [key: string | number]: unknown }[] []数据源-
activenumber0当前展示项-
getOptionsfunction-获取列数据-
cascadestringchildren级联字段-
extHeaderStylestring | Record<string, string>header 样式-
extTabStylestring | Record<string, string>tab 样式-
extOptionItemStylestring | Record<string, string>当前项样式-

事件 Events

名称参数列表描述备注
onChangee: CustomEvent<{ value: unknown[]; options: CascadeOption[];active: number;}> => void当前选中项,见 级联项 CascadeOption-
onChangeSwiper`e: CustomEvent<{ current: number; source: 'touch''';}> => void`切换当前活动项目
onClose关闭-

CSS 变量 CSS Variable

变量默认值说明
--cascade-header-height88pxheader 高度
--cascade-header-padding-v0header 垂直方向的内边距
--cascade-header-padding-h20pxheader 水平方向的内边距
--cascade-tab-padding-v0tab 垂直方向的内边距
--cascade-tab-padding-h28pxtab 水平方向的内边距
--cascade-tab-font-size28pxtab 字体大小
--cascade-tab-colorvar(--neutral-color-4, #c4c4c4)tab 字体颜色
--cascade-tab-selected-colorvar(--neutral-color-2, #757575)tab 选中字体颜色
--cascade-tab-active-colorvar(--neutral-color-1, #212121)tab 活动状态字体颜色
--cascade-tab-active-font-weightvar(--font-weight-bold, 600)tab 活动状态字体 weight
--cascade-content-height750px内容区高度
--cascade-item-height108px内容区单项高度
--cascade-item-padding-v0px内容区单项垂直方向的内边距
--cascade-item-padding-h48px内容区单项水平方向的内边距
--cascade-item-font-size28px内容区单项字体大小
--cascade-item-font-weight400内容区单项字体 weight
--cascade-item-colorvar(--neutral-color-1, #212121)内容区单项字体颜色

数据结构 Data Structure

级联项 CascadeOption

type CascadeOption = { [key: string | number]: unknown }