ant-design/components/select/demo/component-token.tsx
kiner-tang ff4989ccca
feat: Add some token for Select to customize hover/focus style (#50951)
* feat: add some token in select

* feat: add some token in select
2024-09-22 18:36:05 +08:00

100 lines
2.4 KiB
TypeScript

import React from 'react';
import { ConfigProvider, Select, Space } from 'antd';
import type { SelectProps } from 'antd';
const options: SelectProps['options'] = [];
for (let i = 10; i < 36; i++) {
options.push({
label: i.toString(36) + i,
value: i.toString(36) + i,
});
}
const App: React.FC = () => (
<Space direction="vertical">
<ConfigProvider
theme={{
components: {
Select: {
multipleItemBorderColor: 'rgba(0,0,0,0.06)',
multipleItemBorderColorDisabled: 'rgba(0,0,0,0.06)',
optionSelectedColor: '#1677ff',
hoverBorderColor: 'red',
activeBorderColor: 'green',
activeOutlineColor: 'pink',
},
},
}}
>
<Space style={{ width: '100%' }} direction="vertical">
<Select
mode="multiple"
allowClear
style={{ width: '100%' }}
placeholder="Please select"
defaultValue={['a10', 'c12']}
options={options}
/>
<Select
mode="multiple"
disabled
style={{ width: '100%' }}
placeholder="Please select"
defaultValue={['a10', 'c12']}
options={options}
/>
</Space>
</ConfigProvider>
<ConfigProvider
theme={{
token: {
controlHeightSM: 28,
},
}}
>
<Space style={{ width: '100%' }} direction="vertical">
<Select
mode="multiple"
allowClear
size="small"
style={{ width: '100%' }}
placeholder="Please select"
defaultValue={['a10', 'c12']}
options={options}
/>
<Select
mode="multiple"
allowClear
style={{ width: '100%' }}
placeholder="Please select"
defaultValue={['a10', 'c12']}
options={options}
/>
</Space>
</ConfigProvider>
<ConfigProvider
theme={{
components: {
Select: {
paddingXXS: 0,
controlHeight: 28,
},
},
}}
>
<Space style={{ width: '100%' }} direction="vertical">
<Select style={{ width: '100%' }} defaultValue="a10" options={options} />
<Select
mode="multiple"
style={{ width: '100%' }}
defaultValue={['a10', 'c12']}
options={options}
/>
</Space>
</ConfigProvider>
</Space>
);
export default App;