You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
308 lines
27 KiB
308 lines
27 KiB
1 year ago
|
"use strict";(self.webpackChunkantd=self.webpackChunkantd||[]).push([[7648],{875111:function(p,o,t){t.r(o);var _=t(502143),u=t(968521),g=t(720719),v=t(28840),b=t(759907),i=t(828089),h=t(825673),y=t(902068),f=t(574399),x=t(863942),k=t(316073),D=t(24628),E=t(719260),Z=t(956140),s=t(127179),a=t(905388),P=t(40428),O=t(606965),S=t(268696),w=t(587302),r=t(424128),M=t(249706),C=t(795127),A=t(116846),L=t(212039),T=t(73024),R=t(553913),c=t(606641),d=t(667294),e=t(370917);function l(){var m=(0,c.eL)(),n=m.texts;return(0,e.tZ)(c.dY,null,(0,e.tZ)(d.Fragment,null,(0,e.tZ)("div",{className:"markdown"},(0,e.tZ)("p",null,n[0].value,(0,e.tZ)("code",null,n[1].value),n[2].value),(0,e.tZ)("h2",{id:"when-to-use"},(0,e.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#when-to-use",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"When To Use"),(0,e.tZ)("ul",null,(0,e.tZ)("li",null,n[3].value),(0,e.tZ)("li",null,n[4].value)),(0,e.tZ)("h2",{id:"examples"},(0,e.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#examples",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Examples")),(0,e.tZ)(a.Z,{items:[{demo:{id:"components-segmented-demo-basic"},previewerProps:{title:"Basic",filename:"components/segmented/demo/basic.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
||
|
|
import { Segmented } from 'antd';
|
||
|
|
export default () => <Segmented options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />;
|
||
|
|
`,description:"<p>The most basic usage.</p>"}},{demo:{id:"components-segmented-demo-block"},previewerProps:{title:"Block Segmented",filename:"components/segmented/demo/block.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
||
|
|
import { Segmented } from 'antd';
|
||
|
|
export default () => (
|
||
|
|
<Segmented block options={[123, 456, 'longtext-longtext-longtext-longtext']} />
|
||
|
|
);
|
||
|
|
`,description:"<p><code>block</code> property will make the <code>Segmented</code> fit to its parent width.</p>"}},{demo:{id:"components-segmented-demo-disabled"},previewerProps:{title:"Basic",filename:"components/segmented/demo/disabled.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
||
|
|
import { Segmented, Space } from 'antd';
|
||
|
|
const App = () => (
|
||
|
|
<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;
|
||
|
|
`,description:"<p>Disabled Segmented.</p>"}},{demo:{id:"components-segmented-demo-controlled"},previewerProps:{title:"Controlled mode",filename:"components/segmented/demo/controlled.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React, { useState } from 'react';
|
||
|
|
import { Segmented } from 'antd';
|
||
|
|
const Demo = () => {
|
||
|
|
const [value, setValue] = useState('Map');
|
||
|
|
return <Segmented options={['Map', 'Transit', 'Satellite']} value={value} onChange={setValue} />;
|
||
|
|
};
|
||
|
|
export default Demo;
|
||
|
|
`,description:"<p>Controlled Segmented.</p>"}},{demo:{id:"components-segmented-demo-custom"},previewerProps:{title:"Custom Render",filename:"components/segmented/demo/custom.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
||
|
|
import { Avatar, Segmented, Space } from 'antd';
|
||
|
|
import { UserOutlined } from '@ant-design/icons';
|
||
|
|
const App = () => (
|
||
|
|
<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;
|
||
|
|
`,description:"<p>Custom each Segmented Item by ReactNode.</p>"}},{demo:{id:"components-segmented-demo-dynamic"},previewerProps:{title:"Dynamic",filename:"components/segmented/demo/dynamic.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React, { useState } from 'react';
|
||
|
|
import { Segmented, Button, Space } from 'antd';
|
||
|
|
const Demo = () => {
|
||
|
|
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;
|
||
|
|
`,description:"<p>Load <code>options</code> dynamically.</p>"}},{demo:{id:"components-segmented-demo-size"},previewerProps:{title:"Three sizes of Segmented",filename:"components/segmented/demo/size.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
||
|
|
import { Segmented, Space } from 'antd';
|
||
|
|
const App = () => (
|
||
|
|
<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;
|
||
|
|
`,description:"<p>There are three sizes of an Segmented: <code>large</code> (40px), <code>default</code> (32px) and <code>small</code> (24px).</p>"}},{demo:{id:"components-segmented-demo-with-icon"},previewerProps:{title:"With Icon",filename:"components/segmented/demo/with-icon.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`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 />,
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
`,description:"<p>Set <code>icon</code> for Segmented Item.</p>"}},{demo:{id:"components-segmented-demo-icon-only"},previewerProps:{title:"With Icon only",filename:"components/segmented/demo/icon-only.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`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 />,
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
`,description:"<p>Set <code>icon</code> without <code>label</code> for Segmented Item.</p>"}},{demo:{id:"components-segmented-demo-controlled-two"},previewerProps:{debug:!0,title:"Controlled Synced mode",filename:"components/segmented/demo/controlled-two.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React, { useState } from 'react';
|
||
|
|
import { Segmented } from 'antd';
|
||
|
|
const Demo = () => {
|
||
|
|
const [foo, setFoo] = useState('AND');
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Segmented value={foo} options={['AND', 'OR', 'NOT']} onChange={setFoo} />
|
||
|
|
|
||
|
|
<Segmented value={foo} options={['AND', 'OR', 'NOT']} onChange={setFoo} />
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
export default Demo;
|
||
|
|
`,description:"<p>Tests two Segmented synchronized states in controlled mode.</p>"}},{demo:{id:"components-segmented-demo-size-consistent"},previewerProps:{debug:!0,title:"Consistent height",filename:"components/segmented/demo/size-consistent.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
||
|
|
import { Button, Input, Select, Segmented, Space } from 'antd';
|
||
|
|
const App = () => (
|
||
|
|
<Space direction="vertical">
|
||
|
|
<div>
|
||
|
|
<Segmented
|
||
|
|
style={{
|
||
|
|
marginRight: 6,
|
||
|
|
}}
|
||
|
|
size="large"
|
||
|
|
options={['Daily', 'Weekly', 'Monthly']}
|
||
|
|
/>
|
||
|
|
<Button type="primary" size="large">
|
||
|
|
Button
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<Segmented
|
||
|
|
style={{
|
||
|
|
marginRight: 6,
|
||
|
|
}}
|
||
|
|
options={['Daily', 'Weekly', 'Monthly']}
|
||
|
|
/>
|
||
|
|
<Input
|
||
|
|
placeholder="default size"
|
||
|
|
style={{
|
||
|
|
width: 150,
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<Segmented
|
||
|
|
style={{
|
||
|
|
marginRight: 6,
|
||
|
|
}}
|
||
|
|
size="small"
|
||
|
|
options={['Daily', 'Weekly', 'Monthly']}
|
||
|
|
/>
|
||
|
|
<Select
|
||
|
|
size="small"
|
||
|
|
defaultValue="lucy"
|
||
|
|
style={{
|
||
|
|
width: 150,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Select.Option value="lucy">Lucy</Select.Option>
|
||
|
|
</Select>
|
||
|
|
</div>
|
||
|
|
</Space>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>Keep consistent height with other components.</p>"}},{demo:{id:"components-segmented-demo-componenttoken"},previewerProps:{debug:!0,title:"Custom component token",filename:"components/segmented/demo/componentToken.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import { ConfigProvider, Segmented } from 'antd';
|
||
|
|
import React from 'react';
|
||
|
|
export default () => (
|
||
|
|
<ConfigProvider
|
||
|
|
theme={{
|
||
|
|
components: {
|
||
|
|
Segmented: {
|
||
|
|
itemColor: '#222',
|
||
|
|
itemHoverColor: '#333',
|
||
|
|
itemHoverBg: 'rgba(0, 0, 0, 0.06)',
|
||
|
|
itemSelectedBg: '#aaa',
|
||
|
|
itemActiveBg: '#ccc',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Segmented options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />
|
||
|
|
</ConfigProvider>
|
||
|
|
);
|
||
|
|
`,description:"<p>Custom component token.</p>"}}]}),(0,e.tZ)("div",{className:"markdown"},(0,e.tZ)("h2",{id:"api"},(0,e.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#api",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"API"),(0,e.tZ)("blockquote",null,(0,e.tZ)("p",null,n[5].value,(0,e.tZ)("code",null,n[6].value))),(0,e.tZ)(i.Z,{className:"component-api-table"},(0,e.tZ)("thead",null,(0,e.tZ)("tr",null,(0,e.tZ)("th",null,n[7].value),(0,e.tZ)("th",null,n[8].value),(0,e.tZ)("th",null,n[9].value),(0,e.tZ)("th",null,n[10].value),(0,e.tZ)("th",null,n[11].value))),(0,e.tZ)("tbody",null,(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[12].value),(0,e.tZ)("td",null,n[13].value),(0,e.tZ)("td",null,n[14].value),(0,e.tZ)("td",null,n[15].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[16].value),(0,e.tZ)("td",null,n[17].value),(0,e.tZ)("td",null,n[18].value),(0,e.tZ)("td",null),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[19].value),(0,e.tZ)("td",null,n[20].value),(0,e.tZ)("td",null,n[21].value),(0,e.tZ)("td",null,n[22].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[23].value),(0,e.tZ)("td",null,n[24].value),(0,e.tZ)("td",null,n[25].value),(0,e.tZ)("td",null),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[26].value),(0,e.tZ)("td",null,n[27].value),(0,e.tZ)("td",null,n[28].value),(0,e.tZ)("td",null,n[29].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[30].value),(0,e.tZ)("td",null,n[31].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[32].value),n[33].value,(0,e.tZ)("code",null,n[34].value),n[35].value,(0,e.tZ)("code",null,n[36].value)),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[37].value)),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[38].value),(0,e.tZ)("td",null,n[39].value),(0,e.tZ)("td",null,n[40].value),(0,e.tZ)("td",null),(0,e.tZ)("td",null)))),(0,e.tZ)("h2",{id:"design-token"},(0,e.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#design-token",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Design Token")),(0,e.tZ)(s.Z,{component:"Segmented"})))}o.default=l}}]);
|