index.zh_CN.md

import BasicDemo from './demo/Basic'; import BasicSource from './demo/Basic.tsx?raw'; import SearchDemo from './demo/Search'; import SearchSource from './demo/Search.tsx?raw'; import MultipleDemo from './demo/Multiple'; import MultipleSource from './demo/Multiple.tsx?raw'; import SizesDemo from './demo/Sizes'; import SizesSource from './demo/Sizes.tsx?raw'; import GroupsDemo from './demo/Groups'; import GroupsSource from './demo/Groups.tsx?raw'; import CustomDemo from './demo/Custom'; import CustomSource from './demo/Custom.tsx?raw'; import RenderDemo from './demo/Render'; import RenderSource from './demo/Render.tsx?raw'; import ScrollToSelectedDemo from './demo/ScrollToSelected'; import ScrollToSelectedSource from './demo/ScrollToSelected.tsx?raw';

Select 选择器

从选项中选择值的选择器组件。

使用场景

• 用于展示选项的下拉菜单。
• 支持单选或多选。
• 支持搜索/过滤、自定义渲染和数据驱动的选项。

使用方式

import { Select } from 'tiny-design';

const { Option, OptGroup } = Select;

示例

基本用法

Select 组件的基本用法。

</Demo>
<Demo>

搜索

带搜索功能的下拉框。设置 showSearch 启用过滤功能。

</Demo>
<Demo>

多选

多选模式会将已选项目展示为标签。设置 mode="multiple"，可配合 showSearch 进行过滤。

</Demo>
<Demo>

滚动到选中项

打开下拉菜单时自动滚动到已选中的选项。默认开启，设置 scrollToSelected={false} 可关闭。

</Demo>

尺寸

三种尺寸：sm、md（默认）和 lg。

</Demo>
<Demo>

分组

使用 OptGroup 对选项进行分组。

</Demo>
<Demo>

自定义渲染和加载

使用 options 属性进行数据驱动渲染，optionRender 自定义选项内容，loading 显示加载状态。

</Demo>
<Demo>

自定义渲染

使用 optionRender 自定义下拉项，labelRender 自定义选中标签。

</Demo>

Props

Select

属性	说明	类型	默认值
value	当前选中的值	string | string[]	-
defaultValue	初始选中的值	string | string[]	-
mode	选择模式	'multiple' | 'tags'	-
showSearch	启用搜索过滤	boolean	false
filterOption	自定义过滤函数或禁用过滤	boolean | (inputValue, option) => boolean	true
onSearch	搜索输入变化时的回调	(value: string) => void	-
onChange	值变化时的回调	(value, option) => void	-
onSelect	选中选项时的回调	(value: string | string[]) => void	-
allowClear	显示清除按钮	boolean	false
loading	在下拉菜单中显示加载动画	boolean	false
size	选择器尺寸	'sm' | 'md' | 'lg'	'md'
maxTagCount	多选模式下最多显示的标签数	number	-
notFoundContent	无匹配选项时显示的内容	ReactNode	'No data'
options	数据驱动的选项（children 的替代方式）	{ value, label?, disabled? }[]	-
optionRender	自定义选项渲染	(option, { index }) => ReactNode	-
labelRender	自定义选中标签渲染	({ label, value }) => ReactNode	-
placeholder	占位文本	string	-
disabled	是否禁用	boolean	false
defaultOpen	下拉菜单的初始展开状态	boolean	false
open	下拉菜单的受控展开状态	boolean	-
onDropdownVisibleChange	下拉菜单展开状态变化时的回调	(open: boolean) => void	-
scrollToSelected	下拉菜单打开时是否滚动到已选中的选项	boolean	true
dropdownStyle	下拉菜单的样式	CSSProperties	-
style	容器的样式对象	CSSProperties	-
className	容器的类名	string	-

Option

属性	说明	类型	默认值
value	选项的值	string	-
label	显示标签（覆盖 children）	ReactNode	-
disabled	是否禁用	boolean	false

OptGroup

属性	说明	类型	默认值
label	分组标签	string	-