mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-22 22:48:29 +08:00
023f3ec719
* demo: xsgames.co/randomusers => dicebear.com * chore: update snapshot * chore: update snapshot * chore: update snapshot * chore: update snapshot * chore: update snapshot
82 lines
1.9 KiB
TypeScript
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;
|