- 组件总览
- 通用
- 布局
- 导航
- 数据录入
- 数据展示
- 反馈
- 其他
分段控制器。自 antd@4.20.0
版本开始提供该组件。
import React from 'react';
import { Segmented } from 'antd';
export default () => <Segmented options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />;
import React from 'react';
import { Segmented, Space } from 'antd';
const App: React.FC = () => (
<Space direction="vertical">
<Segmented options={['Map', 'Transit', 'Satellite']} disabled />
<Segmented
options={[
'Daily',
{ label: 'Weekly', value: 'Weekly', disabled: true },
'Monthly',
{ label: 'Quarterly', value: 'Quarterly', disabled: true },
'Yearly',
]}
/>
</Space>
);
export default App;
import React from 'react';
import { Avatar, Segmented, Space } from 'antd';
import { UserOutlined } from '@ant-design/icons';
const App: React.FC = () => (
<Space direction="vertical">
<Segmented
options={[
{
label: (
<div style={{ padding: 4 }}>
<Avatar src="https://xsgames.co/randomusers/avatar.php?g=pixel" />
<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',
},
]}
/>
</Space>
);
export default App;
import React from 'react';
import { Segmented, Space } from 'antd';
const App: React.FC = () => (
<Space direction="vertical">
<Segmented size="large" options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />
<Segmented options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />
<Segmented size="small" options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />
</Space>
);
export default App;
import React from 'react';
import { Segmented } from 'antd';
import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons';
export default () => (
<Segmented
options={[
{
value: 'List',
icon: <BarsOutlined />,
},
{
value: 'Kanban',
icon: <AppstoreOutlined />,
},
]}
/>
);
import React from 'react';
import { Segmented } from 'antd';
export default () => (
<Segmented block options={[123, 456, 'longtext-longtext-longtext-longtext']} />
);
import React, { useState } from 'react';
import { Segmented } from 'antd';
const Demo: React.FC = () => {
const [value, setValue] = useState<string | number>('Map');
return <Segmented options={['Map', 'Transit', 'Satellite']} value={value} onChange={setValue} />;
};
export default Demo;
import React, { useState } from 'react';
import { Segmented, Button, Space } from 'antd';
const Demo: React.FC = () => {
const [options, setOptions] = useState(['Daily', 'Weekly', 'Monthly']);
const [moreLoaded, setMoreLoaded] = useState(false);
const handleLoadOptions = () => {
setOptions((prev) => [...prev, 'Quarterly', 'Yearly']);
setMoreLoaded(true);
};
return (
<Space direction="vertical">
<Segmented options={options} />
<Button type="primary" disabled={moreLoaded} onClick={handleLoadOptions}>
Load more options
</Button>
</Space>
);
};
export default Demo;
import React from 'react';
import { Segmented } from 'antd';
import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons';
export default () => (
<Segmented
options={[
{
label: 'List',
value: 'List',
icon: <BarsOutlined />,
},
{
label: 'Kanban',
value: 'Kanban',
icon: <AppstoreOutlined />,
},
]}
/>
);
自
antd@4.20.0
版本开始提供该组件。
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
block | 将宽度调整为父元素宽度的选项 | boolean | false | |
defaultValue | 默认选中的值 | string | number | ||
disabled | 是否禁用 | boolean | false | |
onChange | 选项变化时的回调函数 | function(value: string | number) | ||
options | 数据化配置选项内容 | string[] | number[] | Array<{ label: ReactNode value: string icon? ReactNode disabled?: boolean className?: string }> | [] | |
size | 控件尺寸 | large | middle | small | middle | |
value | 当前选中的值 | string | number |