packages/components/src/components/select/select_zh.stories.mdx
import { Select } from './index'; import { Canvas, ArgsTable, Story } from '@storybook/addon-docs'; import { ThemeToggle } from '../../stories/theme-toggle'; import { Tooltip } from '../tooltip'; import { StarOutlined, WarnCircleFilled } from '@apitable/icons';
<Meta title="表单组件/Select 下拉框/文档" />import { Select } from '@apitable/components';
弹出一个下拉菜单供用户选择
示例中 data 数据用来 mock 选项数据集合。结构如下：
const data = [];
for (let i = 0; i < 20; i++) {
data.push({ label: '这是测试的数据'+ i, value: 'opt' + i });
}
在某些情况下，下拉列表的需要根据内容的长度自定义，如果有这个需求，可以将 dropdownMatchSelectWidth 属性设置为 false（有最大宽度限制）：
设置该属性默认为 true：
每个选项都可以设置各自的前置 Icon 和后置 Icon，使用的 Icon 需要从 @apitable/icons 库中引入。
当选中的选项存在图标，触发器的结果也会默认将 Icon 显示出来。
<Canvas> <ThemeToggle> <Select options={[ { label: 'Test data 1', value: 'opt1', prefixIcon: <StarOutlined />, suffixIcon: <StarOutlined /> }, { label: 'Test data 2', value: 'opt2', prefixIcon: <StarOutlined />, suffixIcon: <StarOutlined /> }, { label: 'Test data 3', value: 'opt3', prefixIcon: <StarOutlined />, suffixIcon: <StarOutlined /> }, { label: 'Test data 4', value: 'opt4', prefixIcon: <StarOutlined />, suffixIcon: <StarOutlined /> }, { label: 'Test data 5', value: 'opt5', prefixIcon: <StarOutlined />, suffixIcon: <StarOutlined /> }, { label: 'Test data 6', value: 'opt6', prefixIcon: <StarOutlined />, suffixIcon: <StarOutlined /> }, { label: 'Test data 7', value: 'opt7', prefixIcon: <StarOutlined />, suffixIcon: <StarOutlined /> }, { label: 'Test data 888888888888888888', value: 'opt8' }, ]} value={'opt1'} dropdownMatchSelectWidth={false} triggerStyle={{ width: 100 }} /> </ThemeToggle> </Canvas>但需要注意的是，触发器本身也可以指定前置 Icon 和后置 Icon，当选中的结果也有相应的 Icon 传入时，触发器指定的 Icon 会比选项的 Icon 权重要高。
当某个选项无法选择时，可以给该选项设置 disabled 状态，并且可以提供一个不可选中的理由，当鼠标 hover 在内容区域，会显示该理由。
当一个选项过长导致内容显示不完全会出现省略号，此时悬浮在选项上会显示当前选项的完整内容，如果此刻该选项是 disabled 的，则 disabledTip 的权重会高于内容。
<Canvas> <ThemeToggle> <Select options={[ { label: 'Test data 1', value: 'opt1', disabled: true }, { label: 'Test data 2', value: 'opt2' }, { label: 'Test data 3', value: 'opt3' }, { label: 'Test data 4', value: 'opt4', disabled: true }, { label: 'Test data 5', value: 'opt5' }, { label: 'Test data 6', value: 'opt6' }, { label: 'Test data 7', value: 'opt7' }, { label: 'Test data 888888888888888888', value: 'opt8' }, ]} value={'opt1'} dropdownMatchSelectWidth={false} triggerStyle={{ width: 100 }} /> </ThemeToggle> </Canvas>可以指定禁用说明
<Canvas> <ThemeToggle> <Select options={[ { label: 'Test data 1', value: 'opt1', disabled: true, disabledTip: 'option disabled reason' }, { label: 'Test data 2', value: 'opt2' }, { label: 'Test data 3', value: 'opt3' }, { label: 'Test data 4', value: 'opt4', disabled: true, disabledTip: 'option disabled reason' }, { label: 'Test data 5', value: 'opt5' }, { label: 'Test data 6', value: 'opt6' }, { label: 'Test data 7', value: 'opt7' }, { label: 'Test data 888888888888888888', value: 'opt8' }, ]} value={'opt1'} dropdownMatchSelectWidth={false} triggerStyle={{ width: 100 }} /> </ThemeToggle> </Canvas>选项的后置 Icon 比较特殊，当一个选项处于 disabled 状态，前置 Icon 和文字部分都会变成灰色，但是后置 Icon 会保持原有的颜色。并且后置 Icon 也能有自己 hover
状态的提示，在 suffixIconTip 中传入内容即可。
<Canvas> <ThemeToggle> <Select options={[ { label: 'Test data 1', value: 'opt1' }, { label: 'Test data 2', value: 'opt2' }, { label: 'Test data 3', value: 'opt3' }, { label: 'Test data 4', value: 'opt4' }, { label: 'Test data 5', value: 'opt5' }, { label: 'Test data 6', value: 'opt6' }, { label: 'Test data 7', value: 'opt7' }, { label: 'Test data 8', value: 'opt8' }, { label: 'abcdefg', value: 'opt9' }, { label: 'ABCDEFG', value: 'opt10' }, ]} value={'opt1'} dropdownMatchSelectWidth triggerStyle={{ width: 100 }} openSearch /> </ThemeToggle> </Canvas>搜索英文大小写不敏感。
Select.Option可以不使用 options 属性，而是通过子元素方式添加选项，如下：