ant-design/components/select/demo/filled-debug.tsx

90 lines
2.1 KiB
TypeScript
Raw Normal View History

import React from 'react';
import { Flex, Select } from 'antd';
const App: React.FC = () => (
<Flex gap={12} vertical>
<Flex gap={8}>
<Select
value="lucy"
disabled
variant="filled"
style={{ flex: 1 }}
options={[
{ value: 'jack', label: 'Jack' },
{ value: 'lucy', label: 'Lucy' },
{ value: 'Yiminghe', label: 'yiminghe' },
]}
/>
<Select
value="lucy"
disabled
mode="multiple"
variant="filled"
placeholder="Outlined"
style={{ flex: 1 }}
options={[
{ value: 'jack', label: 'Jack' },
{ value: 'lucy', label: 'Lucy' },
{ value: 'Yiminghe', label: 'yiminghe' },
]}
/>
</Flex>
<Flex gap={8}>
<Select
value="lucy"
status="error"
variant="filled"
style={{ flex: 1 }}
options={[
{ value: 'jack', label: 'Jack' },
{ value: 'lucy', label: 'Lucy' },
{ value: 'Yiminghe', label: 'yiminghe' },
]}
/>
<Select
value="lucy"
status="error"
mode="multiple"
variant="filled"
placeholder="Outlined"
style={{ flex: 1 }}
options={[
{ value: 'jack', label: 'Jack' },
{ value: 'lucy', label: 'Lucy' },
{ value: 'Yiminghe', label: 'yiminghe' },
]}
/>
</Flex>
<Flex gap={8}>
<Select
disabled
value="lucy"
status="error"
variant="filled"
style={{ flex: 1 }}
options={[
{ value: 'jack', label: 'Jack' },
{ value: 'lucy', label: 'Lucy' },
{ value: 'Yiminghe', label: 'yiminghe' },
]}
/>
<Select
disabled
value="lucy"
status="error"
mode="multiple"
variant="filled"
placeholder="Outlined"
style={{ flex: 1 }}
options={[
{ value: 'jack', label: 'Jack' },
{ value: 'lucy', label: 'Lucy' },
{ value: 'Yiminghe', label: 'yiminghe' },
]}
/>
</Flex>
</Flex>
);
export default App;