import Select from "../../../src/core/Select"; import type { StoryObj } from "@storybook/react"; /** * Select 组件是基于 antd Select 的封装,提供了更符合设计规范的样式和交互。 * * ### 参数说明 * * | 参数 | 说明 | 类型 | 默认值 | * | --- | --- | --- | --- | * | size | 选择器大小,large 用于表单场景,small 用于表格等紧凑场景 | 'large' \| 'middle' \| 'small' | 'middle' | * | loading | 加载状态,显示加载中的动画效果 | boolean | false | * | isLoadingValue | 是否正在加载选项值,用于异步加载选项时的加载状态 | boolean | false | * | disabled | 是否禁用选择器,禁用后不可点击选择 | boolean | false | * | mode | 设置选择模式,multiple 为多选,tags 为自由输入多选 | 'multiple' \| 'tags' | - | * | showSearch | 是否可搜索,开启后可通过输入关键字过滤选项 | boolean | false | * | danger | 错误状态,用于表单校验失败等场景 | boolean | false | * | placeholder | 选择框默认文本 | string | - | * | value | 指定当前选中的条目 | string \| string[] | - | * | defaultValue | 指定默认选中的条目 | string \| string[] | - | * | onChange | 选中值发生变化时的回调 | function(value, option) | - | * * 更多属性请参考 antd Select 组件文档 */ declare const meta: { component: import("../../../src/core").SelectComponentType; title: "Core/Select | 选择器"; args: { placeholder: string; options: ({ value: string; label: string; disabled?: undefined; } | { value: string; label: string; disabled: true; })[]; input: { value: string; }; }; }; export default meta; type Story = StoryObj; /** * Select 组件提供了三种尺寸: * - large: 适用于表单中的主要选择器 * - middle: 默认尺寸,适用于大多数场景 * - small: 适用于表格等紧凑型界面 */ export declare const Basic: Story; /** * Select 组件支持在选项中添加前缀和后缀图标: * - prefix: 在选项文本前显示图标,常用于表示状态或类型 * - suffix: 在选项文本后显示图标,常用于显示额外信息 */ export declare const WithIcons: Story; /** * 多选模式下可以选择多个选项,选中的选项会以 Tag 的形式展示。 * 支持以下特性: * - 可以通过点击 Tag 的关闭按钮删除已选项 * - 可以通过键盘删除键(Backspace)删除最后一个已选项 * - 支持通过搜索快速定位选项 */ export declare const Multiple: Story; /** * Select 组件提供了两种加载状态: * 1. loading: 原生的加载中 * 2. isLoadingValue: value 在加载,select 不能点击 */ export declare const Loading: Story; /** * 可搜索模式下,用户可以输入关键字过滤选项。 * 可以通过 filterOption 属性自定义搜索逻辑。 */ export declare const SearchSelect: Story; /** * Select 支持自定义触发器,可以替换默认的下拉箭头图标。 * 常见用法是使用自定义图标来表达特定的筛选含义。 */ export declare const CustomTrigger: Story; /** * 错误状态有两种实现方式: * 1. 使用 className="select-error" 添加错误样式 * 2. 使用 danger 属性(推荐) */ export declare const Error: Story; /** * 禁用状态下,选择器不可点击,显示为灰色。 */ export declare const Disabled: Story; /** * Select 组件可以通过特定的样式类实现组合效果: * - LeftEndSelectStyle: 左侧圆角 * - RightEndSelectStyle: 右侧圆角 */ export declare const Combined: Story;