Cascader 级联选择
介绍
级联选择框,用于多层级数据的选择,典型场景为省市区选择。
引入
import { Cascader } from "@taroify/core"
import { useCascader } from "@taroify/hooks"
代码演示
基础用法
级联选择组件可以搭配 Field 和 Popup 组件使用,示例如下:
import { Cascader, Field, Popup } from "@taroify/core"
import { useCascader } from "@taroify/hooks"
import { ArrowRight } from "@taroify/icons"
import * as _ from "lodash"
import { useState } from "react"
import area from "./area"
function BasicCascader() {
const [open, setOpen] = useState(false)
const [value, setValue] = useState<string[]>([])
const [fieldValue, setFieldValue] = useState("")
const { columns } = useCascader({ value, depth: 3, options: area })
return (
<>
<Field
readonly
label="选项值"
placeholder="请选择地区"
value={fieldValue}
rightIcon={<ArrowRight />}
onClick={() => setOpen(true)}
/>
<Popup open={open} rounded placement="bottom" onClose={setOpen}>
<Popup.Close />
<Cascader
value={value}
onSelect={setValue}
onChange={(values, options) => {
setOpen(false)
setFieldValue(
_.join(
_.map(options, ({ children }) => children),
"/",
),
)
}}
>
<Cascader.Header>请选择所在地区</Cascader.Header>
{
_.map(columns, (options, index) => (
<Cascader.Tab key={index}>
{
_.map(options, (option) => (
<Cascader.Option key={option.value} value={option.value}>
{option.label}
</Cascader.Option>
))
}
</Cascader.Tab>
))
}
</Cascader>
</Popup>
</>
)
}
自定义颜色
通过 CSS 变量来设置选中状态的高亮颜色。
<Cascader className="custom-color" />
.custom-color {
--tabs-active-color: #1989fa;
--cascader-active-color: #1989fa;
}
API
Cascader Props
参数 |
说明 |
类型 |
默认值 |
title |
顶部标题 |
string |
- |
defaultValue |
默认选中项的值 |
any[] |
- |
value |
选中项的值 |
any[] |
- |
placeholder |
未选中时的提示文案 |
string |
请选择 |
swipeable |
是否开启手势左右滑动切换 |
boolean |
false |
参数 |
说明 |
类型 |
默认值 |
children |
头部内容 |
ReactNoe |
- |
Cascader.Tab Props
参数 |
说明 |
类型 |
默认值 |
children |
子选项列表 |
ReactNoe |
- |
Cascader.Option Props
参数 |
说明 |
类型 |
默认值 |
children |
选项内容(必填) |
ReactNoe |
- |
value |
选项对应的值(必填) |
string | number |
- |
disabled |
是否禁用选项 |
boolean |
false |
Cascader Events
事件 |
说明 |
回调参数 |
onSelect |
选中项变化时触发 |
values: any[], options: Cascader.OptionObject[] |
onChange |
全部选项选择完成后触发 |
values: any[], options: Cascader.OptionObject[] |
onTabClick |
点击标签时触发 |
event: Tabs.TabEvent |
主题定制
样式变量
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。
名称 |
默认值 |
描述 |
—cascader-active-color |
var(—danger-color) |
- |
—cascader-header-height |
48px * $hd |
- |
—cascader-header-padding |
0 var(—padding-md) |
- |
—cascader-header-font-size |
var(—font-size-lg) |
- |
—cascader-header-font-weight |
var(—font-weight-bold) |
- |
—cascader-header-line-height |
20px * $hd |
- |
—cascader-tabs-height |
48px * $hd |
- |
—cascader-tab-font-weight |
var(—font-weight-bold) |
- |
—cascader-tab-color |
var(—text-color) |
- |
—cascader-inactive-tab-color |
var(—gray-6) |
- |
—cascader-options-height |
384px * $hd |
- |
—cascader-option-padding |
10px * $hd var(—padding-md) |
- |
—cascader-option-font-size |
var(—font-size-md) |
- |
—cascader-option-line-height |
var(—line-height-md) |
- |
—cascader-option-active-background-color |
var(—active-color) |
- |
—cascader-disabled-option-color |
var(—gray-5) |
- |
—cascader-active-option-color |
var(—cascader-active-color) |
- |
—cascader-active-option-font-weight |
var(—font-weight-bold) |
- |
—cascader-active-icon-font-size |
18px * $hd |
- |