ant-design/components/segmented/demo/custom.tsx
afc163 023f3ec719
demo: xsgames.co/randomusers => dicebear.com ()
* demo: xsgames.co/randomusers => dicebear.com

* chore: update snapshot

* chore: update snapshot

* chore: update snapshot

* chore: update snapshot

* chore: update snapshot
2024-01-18 17:18:40 +08:00

82 lines
1.9 KiB
TypeScript

import React from 'react';
import { UserOutlined } from '@ant-design/icons';
import { Avatar, Flex, Segmented } from 'antd';
const App: React.FC = () => (
<Flex gap="small" align="flex-start" vertical>
<Segmented
options={[
{
label: (
<div style={{ padding: 4 }}>
<Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=8" />
<div>User 1</div>
</div>
),
value: 'user1',
},
{
label: (
<div style={{ padding: 4 }}>
<Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
<div>User 2</div>
</div>
),
value: 'user2',
},
{
label: (
<div style={{ padding: 4 }}>
<Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
<div>User 3</div>
</div>
),
value: 'user3',
},
]}
/>
<Segmented
options={[
{
label: (
<div style={{ padding: 4 }}>
<div>Spring</div>
<div>Jan-Mar</div>
</div>
),
value: 'spring',
},
{
label: (
<div style={{ padding: 4 }}>
<div>Summer</div>
<div>Apr-Jun</div>
</div>
),
value: 'summer',
},
{
label: (
<div style={{ padding: 4 }}>
<div>Autumn</div>
<div>Jul-Sept</div>
</div>
),
value: 'autumn',
},
{
label: (
<div style={{ padding: 4 }}>
<div>Winter</div>
<div>Oct-Dec</div>
</div>
),
value: 'winter',
},
]}
/>
</Flex>
);
export default App;