分类选择 TreeSelect

多组数据选择，内置侧边栏组件

使用

API

安装使用

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

用法示例

基础用法

codesanbox

copy

code

import React from 'react';
import { TiTreeSelect } from 'titian-h5-react';

export default function App() {
  const options = [
    {
      label: '侧边导航',
      value: 'a1',
      children: [
        { label: '标题文字', value: 'a1-1' },
        { label: '标题文字', value: 'a1-2' },
      ],
    },
    {
      label: '侧边导航2',
      value: 'a2',
      children: [
        { label: '标题2文字', value: 'a2-1' },
        { label: '标题2文字', value: 'a2-2' },
      ],
    },
  ];
  return (
    <div className="content">
      <TiTreeSelect options={options} />
    </div>
  );
}

自定义内容

content-a

codesanbox

copy

code

import React, { useState } from 'react';
import { TiTreeSelect } from 'titian-h5-react';

export default function App() {
  const [index, setIndex] = useState(0);
  const options = [
    {
      label: '侧边导航1',
      value: 'a1',
    },
    {
      label: '侧边导航2',
      value: 'a2',
    },
  ];
  const onChangeNav = e => {
    setIndex(e.detail.index);
  };
  return (
    <div className="content">
      <TiTreeSelect options={options} onChangeNav={onChangeNav}>
        {index === 0 && <div className="code-container">content-a</div>}
        {index === 1 && <div className="code-container">content-b</div>}
      </TiTreeSelect>
    </div>
  );
}

自定义数据项别名

codesanbox

copy

code

import React from 'react';
import { TiTreeSelect } from 'titian-h5-react';

export default function App() {
  const alias = { label: 'name', value: 'id', children: 'list' };

  const options = [
    {
      name: '侧边导航',
      id: 'a1',
      list: [
        { name: '标题文字', id: 'a1-1' },
        { name: '标题文字', id: 'a1-2' },
      ],
    },
    {
      name: '侧边导航2',
      id: 'a2',
      list: [
        { name: '标题2文字', value: 'a2-1' },
        { name: '标题2文字', value: 'a2-2' },
      ],
    },
  ];
  return (
    <div className="content">
      <TiTreeSelect options={options} alias={alias} />
    </div>
  );
}

TiTreeSelect API

属性 Properties

名称	类型	必填	默认值	说明	备注
options	Array<Option>	是	-	选项数据，Option类型，普通模式需包含 children 字段，自定义模式不需要 children 字段	-
defaultIndex	number	否	0	左侧选中项的索引	-
activeValue	array	否	-	右侧选中项的 value，对应option 子项 value 值	-
disabledValue	array	否	-	禁用项，option 子项 value 值	-
height	number | string	否	100%	高度	-
maxCount	number	否	-	最多可选项数	-
icon	string	否	-	选项右侧 icon	-
alias	Record<string, string>	否	-	数据项默认字段名label value children的别名，用于自定义数据	-
extStyle	string | Record<string, string>	否	-	根节点样式	-

Option

API 属性中的 options 为一个对象数组，数组中的每一个对象有以下 key：

名称	类型	必填	默认值	说明	备注
label	string	是	-	展示文字	-
value	string	是	-	唯一id	-
children	Array<{label: string, value: string}>	否	-	右侧内容区域列表数据项，其中value值对应activeValue和disabledValue中的值	-

事件 Events

名称	参数列表	描述	备注
onChangeNav	(e: CustomEvent<{index: number, item: Record<string, any>}>) => void	父选项改变是触发	-
onChangeItem	(e: CustomEvent<{activeValue: array, current: Record<string, any>, item: Record<string, any>}>) => void	子选项改变是触发	-

插槽 Slots

名称	说明	备注
default	默认插槽	-

外部样式类 External Classes

名称	说明	备注
extClass	根节点样式类名	-
treeSelectSidebar	左侧 sidebar 样式类名	-
treeSelectContainer	右侧容器样式类名	-

CSS 变量 CSS Variable

变量	默认值	说明	备注
--tree-select-active-color	theme.color.brand.1000	右侧默认选项内容选中颜色	-
--tree-select-disabled-color	theme.color.gray.texticon.250	右侧默认选项内容禁用颜色	-