Segmented分段控制器
分段控制器。自 antd@4.20.0
版本开始提供该组件。
何时使用#
用于展示多个选项并允许用户选择其中单个选项;
当切换选中选项时,关联区域的内容会发生变化。
代码演示
import { Segmented } from 'infrad';
export default () => <Segmented options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />;
.code-box-demo {
overflow-x: auto;
}
.code-box-demo .ant-segmented {
margin-bottom: 10px;
}
import { Segmented } from 'infrad';
export default () => (
<>
<Segmented options={['Map', 'Transit', 'Satellite']} disabled />
<br />
<Segmented
options={[
'Daily',
{ label: 'Weekly', value: 'Weekly', disabled: true },
'Monthly',
{ label: 'Quarterly', value: 'Quarterly', disabled: true },
'Yearly',
]}
/>
</>
);
import { Avatar, Segmented } from 'infrad';
import { UserOutlined } from 'infra-design-icons';
export default () => (
<>
<Segmented
options={[
{
label: (
<div style={{ padding: 4 }}>
<Avatar src="https://joeschmoe.io/api/v1/random" />
<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',
},
]}
/>
<br />
<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',
},
]}
/>
</>
);
import { Segmented } from 'infrad';
export default () => (
<>
<Segmented size="large" options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />
<br />
<Segmented options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />
<br />
<Segmented size="small" options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />
</>
);
import { Segmented } from 'infrad';
import { AppstoreOutlined, BarsOutlined } from 'infra-design-icons';
export default () => (
<Segmented
options={[
{
value: 'List',
icon: <BarsOutlined />,
},
{
value: 'Kanban',
icon: <AppstoreOutlined />,
},
]}
/>
);
import { Segmented } from 'infrad';
export default () => (
<Segmented block options={[123, 456, 'longtext-longtext-longtext-longtext']} />
);
TypeScript
JavaScript
import React, { useState } from 'react';
import { Segmented } from 'infrad';
const Demo: React.FC = () => {
const [value, setValue] = useState<string | number>('Map');
return <Segmented options={['Map', 'Transit', 'Satellite']} value={value} onChange={setValue} />;
};
export default Demo;
TypeScript
JavaScript
import React, { useState } from 'react';
import { Button, Segmented } from 'infrad';
const defaultOptions = ['Daily', 'Weekly', 'Monthly'];
const Demo: React.FC = () => {
const [options, setOptions] = useState(defaultOptions);
const [moreLoaded, setMoreLoaded] = useState(false);
const handleLoadOptions = () => {
setOptions([...defaultOptions, 'Quarterly', 'Yearly']);
setMoreLoaded(true);
};
return (
<>
<Segmented options={options} />
<br />
<Button type="primary" disabled={moreLoaded} onClick={handleLoadOptions}>
Load more options
</Button>
</>
);
};
export default Demo;
import { Segmented } from 'infrad';
import { AppstoreOutlined, BarsOutlined } from 'infra-design-icons';
export default () => (
<Segmented
options={[
{
label: 'List',
value: 'List',
icon: <BarsOutlined />,
},
{
label: 'Kanban',
value: 'Kanban',
icon: <AppstoreOutlined />,
},
]}
/>
);
API#
自
antd@4.20.0
版本开始提供该组件。
Segmented#
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
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 | - | |
value | 当前选中的值 | string | number |