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.
942 lines
54 KiB
942 lines
54 KiB
1 year ago
|
"use strict";(self.webpackChunkantd=self.webpackChunkantd||[]).push([[5413],{7041:function(p,o,t){t.r(o);var m=t(502143),b=t(968521),_=t(720719),g=t(28840),v=t(759907),a=t(828089),f=t(825673),h=t(902068),y=t(574399),Z=t(863942),T=t(316073),k=t(24628),x=t(719260),P=t(956140),c=t(127179),l=t(905388),w=t(40428),C=t(606965),A=t(268696),B=t(587302),r=t(424128),E=t(249706),S=t(795127),D=t(116846),I=t(212039),K=t(73024),R=t(553913),i=t(606641),s=t(667294),n=t(370917);function d(){var u=(0,i.eL)(),e=u.texts;return(0,n.tZ)(i.dY,null,(0,n.tZ)(s.Fragment,null,(0,n.tZ)("div",{className:"markdown"},(0,n.tZ)("p",null,e[0].value),(0,n.tZ)("h3",{id:"when-to-use"},(0,n.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#when-to-use",sourceType:"a"},(0,n.tZ)("span",{className:"icon icon-link"})),"When To Use"),(0,n.tZ)("p",null,e[1].value),(0,n.tZ)("ul",null,(0,n.tZ)("li",null,e[2].value),(0,n.tZ)("li",null,e[3].value),(0,n.tZ)("li",null,(0,n.tZ)(r.Z,{to:"/components/radio/#components-radio-demo-radiobutton",sourceType:"Link"},e[4].value),e[5].value)),(0,n.tZ)("h2",{id:"examples"},(0,n.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#examples",sourceType:"a"},(0,n.tZ)("span",{className:"icon icon-link"})),"Examples")),(0,n.tZ)(l.Z,{items:[{demo:{id:"components-tabs-demo-basic"},previewerProps:{title:"Basic",filename:"components/tabs/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 { Tabs } from 'antd';
|
||
|
|
const onChange = (key) => {
|
||
|
|
console.log(key);
|
||
|
|
};
|
||
|
|
const items = [
|
||
|
|
{
|
||
|
|
key: '1',
|
||
|
|
label: \`Tab 1\`,
|
||
|
|
children: \`Content of Tab Pane 1\`,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: '2',
|
||
|
|
label: \`Tab 2\`,
|
||
|
|
children: \`Content of Tab Pane 2\`,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: '3',
|
||
|
|
label: \`Tab 3\`,
|
||
|
|
children: \`Content of Tab Pane 3\`,
|
||
|
|
},
|
||
|
|
];
|
||
|
|
const App = () => <Tabs defaultActiveKey="1" items={items} onChange={onChange} />;
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>Default activate first tab.</p>"}},{demo:{id:"components-tabs-demo-disabled"},previewerProps:{title:"Disabled",filename:"components/tabs/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 { Tabs } from 'antd';
|
||
|
|
const App = () => (
|
||
|
|
<Tabs
|
||
|
|
defaultActiveKey="1"
|
||
|
|
items={[
|
||
|
|
{
|
||
|
|
label: 'Tab 1',
|
||
|
|
key: '1',
|
||
|
|
children: 'Tab 1',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'Tab 2',
|
||
|
|
key: '2',
|
||
|
|
children: 'Tab 2',
|
||
|
|
disabled: true,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'Tab 3',
|
||
|
|
key: '3',
|
||
|
|
children: 'Tab 3',
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>Disabled a tab.</p>"}},{demo:{id:"components-tabs-demo-centered"},previewerProps:{title:"Centered",filename:"components/tabs/demo/centered.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 { Tabs } from 'antd';
|
||
|
|
const App = () => (
|
||
|
|
<Tabs
|
||
|
|
defaultActiveKey="1"
|
||
|
|
centered
|
||
|
|
items={new Array(3).fill(null).map((_, i) => {
|
||
|
|
const id = String(i + 1);
|
||
|
|
return {
|
||
|
|
label: \`Tab \${id}\`,
|
||
|
|
key: id,
|
||
|
|
children: \`Content of Tab Pane \${id}\`,
|
||
|
|
};
|
||
|
|
})}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>Centered tabs.</p>"}},{demo:{id:"components-tabs-demo-icon"},previewerProps:{title:"Icon",filename:"components/tabs/demo/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 { AndroidOutlined, AppleOutlined } from '@ant-design/icons';
|
||
|
|
import { Tabs } from 'antd';
|
||
|
|
const App = () => (
|
||
|
|
<Tabs
|
||
|
|
defaultActiveKey="2"
|
||
|
|
items={[AppleOutlined, AndroidOutlined].map((Icon, i) => {
|
||
|
|
const id = String(i + 1);
|
||
|
|
return {
|
||
|
|
label: (
|
||
|
|
<span>
|
||
|
|
<Icon />
|
||
|
|
Tab {id}
|
||
|
|
</span>
|
||
|
|
),
|
||
|
|
key: id,
|
||
|
|
children: \`Tab \${id}\`,
|
||
|
|
};
|
||
|
|
})}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>The Tab with Icon.</p>"}},{demo:{id:"components-tabs-demo-slide"},previewerProps:{title:"Slide",filename:"components/tabs/demo/slide.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 { Radio, Tabs } from 'antd';
|
||
|
|
const App = () => {
|
||
|
|
const [mode, setMode] = useState('top');
|
||
|
|
const handleModeChange = (e) => {
|
||
|
|
setMode(e.target.value);
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<Radio.Group
|
||
|
|
onChange={handleModeChange}
|
||
|
|
value={mode}
|
||
|
|
style={{
|
||
|
|
marginBottom: 8,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Radio.Button value="top">Horizontal</Radio.Button>
|
||
|
|
<Radio.Button value="left">Vertical</Radio.Button>
|
||
|
|
</Radio.Group>
|
||
|
|
<Tabs
|
||
|
|
defaultActiveKey="1"
|
||
|
|
tabPosition={mode}
|
||
|
|
style={{
|
||
|
|
height: 220,
|
||
|
|
}}
|
||
|
|
items={new Array(30).fill(null).map((_, i) => {
|
||
|
|
const id = String(i);
|
||
|
|
return {
|
||
|
|
label: \`Tab-\${id}\`,
|
||
|
|
key: id,
|
||
|
|
disabled: i === 28,
|
||
|
|
children: \`Content of tab \${id}\`,
|
||
|
|
};
|
||
|
|
})}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>In order to fit in more tabs, they can slide left and right (or up and down).</p>"}},{demo:{id:"components-tabs-demo-extra"},previewerProps:{title:"Extra content",filename:"components/tabs/demo/extra.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, { useMemo, useState } from 'react';
|
||
|
|
import { Button, Checkbox, Divider, Tabs } from 'antd';
|
||
|
|
const CheckboxGroup = Checkbox.Group;
|
||
|
|
const operations = <Button>Extra Action</Button>;
|
||
|
|
const OperationsSlot = {
|
||
|
|
left: <Button className="tabs-extra-demo-button">Left Extra Action</Button>,
|
||
|
|
right: <Button>Right Extra Action</Button>,
|
||
|
|
};
|
||
|
|
const options = ['left', 'right'];
|
||
|
|
const items = new Array(3).fill(null).map((_, i) => {
|
||
|
|
const id = String(i + 1);
|
||
|
|
return {
|
||
|
|
label: \`Tab \${id}\`,
|
||
|
|
key: id,
|
||
|
|
children: \`Content of tab \${id}\`,
|
||
|
|
};
|
||
|
|
});
|
||
|
|
const App = () => {
|
||
|
|
const [position, setPosition] = useState(['left', 'right']);
|
||
|
|
const slot = useMemo(() => {
|
||
|
|
if (position.length === 0) return null;
|
||
|
|
return position.reduce(
|
||
|
|
(acc, direction) => ({
|
||
|
|
...acc,
|
||
|
|
[direction]: OperationsSlot[direction],
|
||
|
|
}),
|
||
|
|
{},
|
||
|
|
);
|
||
|
|
}, [position]);
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Tabs tabBarExtraContent={operations} items={items} />
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
<div>You can also specify its direction or both side</div>
|
||
|
|
<Divider />
|
||
|
|
<CheckboxGroup
|
||
|
|
options={options}
|
||
|
|
value={position}
|
||
|
|
onChange={(value) => {
|
||
|
|
setPosition(value);
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
<Tabs tabBarExtraContent={slot} items={items} />
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>You can add extra actions to the right or left or even both side of Tabs.</p>",style:`.tabs-extra-demo-button {
|
||
|
|
margin-right: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ant-row-rtl .tabs-extra-demo-button {
|
||
|
|
margin-right: 0;
|
||
|
|
margin-left: 16px;
|
||
|
|
}`}},{demo:{id:"components-tabs-demo-size"},previewerProps:{title:"Size",filename:"components/tabs/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, { useState } from 'react';
|
||
|
|
import { Radio, Tabs } from 'antd';
|
||
|
|
const App = () => {
|
||
|
|
const [size, setSize] = useState('small');
|
||
|
|
const onChange = (e) => {
|
||
|
|
setSize(e.target.value);
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<Radio.Group
|
||
|
|
value={size}
|
||
|
|
onChange={onChange}
|
||
|
|
style={{
|
||
|
|
marginBottom: 16,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Radio.Button value="small">Small</Radio.Button>
|
||
|
|
<Radio.Button value="middle">Middle</Radio.Button>
|
||
|
|
<Radio.Button value="large">Large</Radio.Button>
|
||
|
|
</Radio.Group>
|
||
|
|
<Tabs
|
||
|
|
defaultActiveKey="1"
|
||
|
|
size={size}
|
||
|
|
style={{
|
||
|
|
marginBottom: 32,
|
||
|
|
}}
|
||
|
|
items={new Array(3).fill(null).map((_, i) => {
|
||
|
|
const id = String(i + 1);
|
||
|
|
return {
|
||
|
|
label: \`Tab \${id}\`,
|
||
|
|
key: id,
|
||
|
|
children: \`Content of tab \${id}\`,
|
||
|
|
};
|
||
|
|
})}
|
||
|
|
/>
|
||
|
|
<Tabs
|
||
|
|
defaultActiveKey="1"
|
||
|
|
type="card"
|
||
|
|
size={size}
|
||
|
|
items={new Array(3).fill(null).map((_, i) => {
|
||
|
|
const id = String(i + 1);
|
||
|
|
return {
|
||
|
|
label: \`Card Tab \${id}\`,
|
||
|
|
key: id,
|
||
|
|
children: \`Content of card tab \${id}\`,
|
||
|
|
};
|
||
|
|
})}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>Large size tabs are usually used in page header, and small size could be used in Modal.</p>"}},{demo:{id:"components-tabs-demo-position"},previewerProps:{title:"Position",filename:"components/tabs/demo/position.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 { Radio, Space, Tabs } from 'antd';
|
||
|
|
import React, { useState } from 'react';
|
||
|
|
const App = () => {
|
||
|
|
const [tabPosition, setTabPosition] = useState('left');
|
||
|
|
const changeTabPosition = (e) => {
|
||
|
|
setTabPosition(e.target.value);
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Space
|
||
|
|
style={{
|
||
|
|
marginBottom: 24,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
Tab position:
|
||
|
|
<Radio.Group value={tabPosition} onChange={changeTabPosition}>
|
||
|
|
<Radio.Button value="top">top</Radio.Button>
|
||
|
|
<Radio.Button value="bottom">bottom</Radio.Button>
|
||
|
|
<Radio.Button value="left">left</Radio.Button>
|
||
|
|
<Radio.Button value="right">right</Radio.Button>
|
||
|
|
</Radio.Group>
|
||
|
|
</Space>
|
||
|
|
<Tabs
|
||
|
|
tabPosition={tabPosition}
|
||
|
|
items={new Array(3).fill(null).map((_, i) => {
|
||
|
|
const id = String(i + 1);
|
||
|
|
return {
|
||
|
|
label: \`Tab \${id}\`,
|
||
|
|
key: id,
|
||
|
|
children: \`Content of Tab \${id}\`,
|
||
|
|
};
|
||
|
|
})}
|
||
|
|
/>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>Tab's position: left, right, top or bottom. Will auto switch to <code>top</code> in mobile.</p>"}},{demo:{id:"components-tabs-demo-card"},previewerProps:{title:"Card type tab",filename:"components/tabs/demo/card.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 { Tabs } from 'antd';
|
||
|
|
const onChange = (key) => {
|
||
|
|
console.log(key);
|
||
|
|
};
|
||
|
|
const App = () => (
|
||
|
|
<Tabs
|
||
|
|
onChange={onChange}
|
||
|
|
type="card"
|
||
|
|
items={new Array(3).fill(null).map((_, i) => {
|
||
|
|
const id = String(i + 1);
|
||
|
|
return {
|
||
|
|
label: \`Tab \${id}\`,
|
||
|
|
key: id,
|
||
|
|
children: \`Content of Tab Pane \${id}\`,
|
||
|
|
};
|
||
|
|
})}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>Another type of Tabs, which doesn't support vertical mode.</p>"}},{demo:{id:"components-tabs-demo-editable-card"},previewerProps:{title:"Add & close tab",filename:"components/tabs/demo/editable-card.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, { useRef, useState } from 'react';
|
||
|
|
import { Tabs } from 'antd';
|
||
|
|
const initialItems = [
|
||
|
|
{
|
||
|
|
label: 'Tab 1',
|
||
|
|
children: 'Content of Tab 1',
|
||
|
|
key: '1',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'Tab 2',
|
||
|
|
children: 'Content of Tab 2',
|
||
|
|
key: '2',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'Tab 3',
|
||
|
|
children: 'Content of Tab 3',
|
||
|
|
key: '3',
|
||
|
|
closable: false,
|
||
|
|
},
|
||
|
|
];
|
||
|
|
const App = () => {
|
||
|
|
const [activeKey, setActiveKey] = useState(initialItems[0].key);
|
||
|
|
const [items, setItems] = useState(initialItems);
|
||
|
|
const newTabIndex = useRef(0);
|
||
|
|
const onChange = (newActiveKey) => {
|
||
|
|
setActiveKey(newActiveKey);
|
||
|
|
};
|
||
|
|
const add = () => {
|
||
|
|
const newActiveKey = \`newTab\${newTabIndex.current++}\`;
|
||
|
|
const newPanes = [...items];
|
||
|
|
newPanes.push({
|
||
|
|
label: 'New Tab',
|
||
|
|
children: 'Content of new Tab',
|
||
|
|
key: newActiveKey,
|
||
|
|
});
|
||
|
|
setItems(newPanes);
|
||
|
|
setActiveKey(newActiveKey);
|
||
|
|
};
|
||
|
|
const remove = (targetKey) => {
|
||
|
|
let newActiveKey = activeKey;
|
||
|
|
let lastIndex = -1;
|
||
|
|
items.forEach((item, i) => {
|
||
|
|
if (item.key === targetKey) {
|
||
|
|
lastIndex = i - 1;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
const newPanes = items.filter((item) => item.key !== targetKey);
|
||
|
|
if (newPanes.length && newActiveKey === targetKey) {
|
||
|
|
if (lastIndex >= 0) {
|
||
|
|
newActiveKey = newPanes[lastIndex].key;
|
||
|
|
} else {
|
||
|
|
newActiveKey = newPanes[0].key;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
setItems(newPanes);
|
||
|
|
setActiveKey(newActiveKey);
|
||
|
|
};
|
||
|
|
const onEdit = (targetKey, action) => {
|
||
|
|
if (action === 'add') {
|
||
|
|
add();
|
||
|
|
} else {
|
||
|
|
remove(targetKey);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<Tabs
|
||
|
|
type="editable-card"
|
||
|
|
onChange={onChange}
|
||
|
|
activeKey={activeKey}
|
||
|
|
onEdit={onEdit}
|
||
|
|
items={items}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>Only card type Tabs support adding & closable. +Use <code>closable={false}</code> to disable close.</p>"}},{demo:{id:"components-tabs-demo-card-top"},previewerProps:{compact:!0,background:"grey",debug:!0,title:"Container of card type Tab",filename:"components/tabs/demo/card-top.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 { Tabs, theme } from 'antd';
|
||
|
|
import { css } from '@emotion/css';
|
||
|
|
const useStyle = () => {
|
||
|
|
const { token } = theme.useToken();
|
||
|
|
const antdTabsCls = '.ant-tabs';
|
||
|
|
return css\`
|
||
|
|
\${antdTabsCls}\${antdTabsCls}-card {
|
||
|
|
\${antdTabsCls}-content {
|
||
|
|
padding: \${token.padding}px;
|
||
|
|
background: \${token.colorBgContainer};
|
||
|
|
}
|
||
|
|
|
||
|
|
\${antdTabsCls}-nav {
|
||
|
|
margin: 0;
|
||
|
|
|
||
|
|
\${antdTabsCls}-nav-wrap > \${antdTabsCls}-nav-list > \${antdTabsCls}-tab {
|
||
|
|
background: transparent;
|
||
|
|
border-color: transparent;
|
||
|
|
|
||
|
|
&-active {
|
||
|
|
border-color: \${token.colorBorderBg};
|
||
|
|
background: \${token.colorBgContainer};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&::before {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
\`;
|
||
|
|
};
|
||
|
|
const items = new Array(3).fill(null).map((_, i) => {
|
||
|
|
const id = String(i + 1);
|
||
|
|
return {
|
||
|
|
label: \`Tab Title \${id}\`,
|
||
|
|
key: id,
|
||
|
|
children: (
|
||
|
|
<>
|
||
|
|
<p>Content of Tab Pane {id}</p>
|
||
|
|
<p>Content of Tab Pane {id}</p>
|
||
|
|
<p>Content of Tab Pane {id}</p>
|
||
|
|
</>
|
||
|
|
),
|
||
|
|
};
|
||
|
|
});
|
||
|
|
const App = () => {
|
||
|
|
const style = useStyle();
|
||
|
|
return (
|
||
|
|
<div className={style}>
|
||
|
|
<Tabs type="card" items={items} />
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>Should be used at the top of container, needs to override styles.</p>"}},{demo:{id:"components-tabs-demo-custom-add-trigger"},previewerProps:{title:"Customized trigger of new tab",filename:"components/tabs/demo/custom-add-trigger.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, { useRef, useState } from 'react';
|
||
|
|
import { Button, Tabs } from 'antd';
|
||
|
|
const defaultPanes = new Array(2).fill(null).map((_, index) => {
|
||
|
|
const id = String(index + 1);
|
||
|
|
return {
|
||
|
|
label: \`Tab \${id}\`,
|
||
|
|
children: \`Content of Tab Pane \${index + 1}\`,
|
||
|
|
key: id,
|
||
|
|
};
|
||
|
|
});
|
||
|
|
const App = () => {
|
||
|
|
const [activeKey, setActiveKey] = useState(defaultPanes[0].key);
|
||
|
|
const [items, setItems] = useState(defaultPanes);
|
||
|
|
const newTabIndex = useRef(0);
|
||
|
|
const onChange = (key) => {
|
||
|
|
setActiveKey(key);
|
||
|
|
};
|
||
|
|
const add = () => {
|
||
|
|
const newActiveKey = \`newTab\${newTabIndex.current++}\`;
|
||
|
|
setItems([
|
||
|
|
...items,
|
||
|
|
{
|
||
|
|
label: 'New Tab',
|
||
|
|
children: 'New Tab Pane',
|
||
|
|
key: newActiveKey,
|
||
|
|
},
|
||
|
|
]);
|
||
|
|
setActiveKey(newActiveKey);
|
||
|
|
};
|
||
|
|
const remove = (targetKey) => {
|
||
|
|
const targetIndex = items.findIndex((pane) => pane.key === targetKey);
|
||
|
|
const newPanes = items.filter((pane) => pane.key !== targetKey);
|
||
|
|
if (newPanes.length && targetKey === activeKey) {
|
||
|
|
const { key } = newPanes[targetIndex === newPanes.length ? targetIndex - 1 : targetIndex];
|
||
|
|
setActiveKey(key);
|
||
|
|
}
|
||
|
|
setItems(newPanes);
|
||
|
|
};
|
||
|
|
const onEdit = (targetKey, action) => {
|
||
|
|
if (action === 'add') {
|
||
|
|
add();
|
||
|
|
} else {
|
||
|
|
remove(targetKey);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
marginBottom: 16,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Button onClick={add}>ADD</Button>
|
||
|
|
</div>
|
||
|
|
<Tabs
|
||
|
|
hideAdd
|
||
|
|
onChange={onChange}
|
||
|
|
activeKey={activeKey}
|
||
|
|
type="editable-card"
|
||
|
|
onEdit={onEdit}
|
||
|
|
items={items}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>Hide default plus icon, and bind event for customized trigger.</p>"}},{demo:{id:"components-tabs-demo-custom-tab-bar"},previewerProps:{title:"Customized bar of tab",filename:"components/tabs/demo/custom-tab-bar.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 { Tabs, theme } from 'antd';
|
||
|
|
import StickyBox from 'react-sticky-box';
|
||
|
|
const items = new Array(3).fill(null).map((_, i) => {
|
||
|
|
const id = String(i + 1);
|
||
|
|
return {
|
||
|
|
label: \`Tab \${id}\`,
|
||
|
|
key: id,
|
||
|
|
children: \`Content of Tab Pane \${id}\`,
|
||
|
|
style:
|
||
|
|
i === 0
|
||
|
|
? {
|
||
|
|
height: 200,
|
||
|
|
}
|
||
|
|
: undefined,
|
||
|
|
};
|
||
|
|
});
|
||
|
|
const App = () => {
|
||
|
|
const {
|
||
|
|
token: { colorBgContainer },
|
||
|
|
} = theme.useToken();
|
||
|
|
const renderTabBar = (props, DefaultTabBar) => (
|
||
|
|
<StickyBox
|
||
|
|
offsetTop={0}
|
||
|
|
offsetBottom={20}
|
||
|
|
style={{
|
||
|
|
zIndex: 1,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<DefaultTabBar
|
||
|
|
{...props}
|
||
|
|
style={{
|
||
|
|
background: colorBgContainer,
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</StickyBox>
|
||
|
|
);
|
||
|
|
return <Tabs defaultActiveKey="1" renderTabBar={renderTabBar} items={items} />;
|
||
|
|
};
|
||
|
|
export default App;
|
||
|
|
`,description:'<p>Use <a href="https://www.npmjs.com/package/react-stickynode">react-sticky-box</a> and <code>renderTabBar</code>.</p>'}},{demo:{id:"components-tabs-demo-custom-tab-bar-node"},previewerProps:{title:"Draggable Tabs",filename:"components/tabs/demo/custom-tab-bar-node.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 { DndContext, PointerSensor, useSensor } from '@dnd-kit/core';
|
||
|
|
import {
|
||
|
|
arrayMove,
|
||
|
|
horizontalListSortingStrategy,
|
||
|
|
SortableContext,
|
||
|
|
useSortable,
|
||
|
|
} from '@dnd-kit/sortable';
|
||
|
|
import { CSS } from '@dnd-kit/utilities';
|
||
|
|
import { css } from '@emotion/css';
|
||
|
|
import { Tabs } from 'antd';
|
||
|
|
import React, { useEffect, useState } from 'react';
|
||
|
|
const DraggableTabNode = ({ className, onActiveBarTransform, ...props }) => {
|
||
|
|
const { attributes, listeners, setNodeRef, transform, transition, isSorting } = useSortable({
|
||
|
|
id: props['data-node-key'],
|
||
|
|
});
|
||
|
|
const style = {
|
||
|
|
...props.style,
|
||
|
|
transform: CSS.Transform.toString(transform),
|
||
|
|
transition,
|
||
|
|
cursor: 'move',
|
||
|
|
};
|
||
|
|
useEffect(() => {
|
||
|
|
if (!isSorting) {
|
||
|
|
onActiveBarTransform('');
|
||
|
|
} else if (className?.includes('ant-tabs-tab-active')) {
|
||
|
|
onActiveBarTransform(css\`
|
||
|
|
.ant-tabs-ink-bar {
|
||
|
|
transform: \${CSS.Transform.toString(transform)};
|
||
|
|
transition: \${transition} !important;
|
||
|
|
}
|
||
|
|
\`);
|
||
|
|
}
|
||
|
|
}, [className, isSorting, transform]);
|
||
|
|
return React.cloneElement(props.children, {
|
||
|
|
ref: setNodeRef,
|
||
|
|
style,
|
||
|
|
...attributes,
|
||
|
|
...listeners,
|
||
|
|
});
|
||
|
|
};
|
||
|
|
const App = () => {
|
||
|
|
const [items, setItems] = useState([
|
||
|
|
{
|
||
|
|
key: '1',
|
||
|
|
label: \`Tab 1\`,
|
||
|
|
children: 'Content of Tab Pane 1',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: '2',
|
||
|
|
label: \`Tab 2\`,
|
||
|
|
children: 'Content of Tab Pane 2',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: '3',
|
||
|
|
label: \`Tab 3\`,
|
||
|
|
children: 'Content of Tab Pane 3',
|
||
|
|
},
|
||
|
|
]);
|
||
|
|
const [className, setClassName] = useState('');
|
||
|
|
const sensor = useSensor(PointerSensor, {
|
||
|
|
activationConstraint: {
|
||
|
|
distance: 10,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
const onDragEnd = ({ active, over }) => {
|
||
|
|
if (active.id !== over?.id) {
|
||
|
|
setItems((prev) => {
|
||
|
|
const activeIndex = prev.findIndex((i) => i.key === active.id);
|
||
|
|
const overIndex = prev.findIndex((i) => i.key === over?.id);
|
||
|
|
return arrayMove(prev, activeIndex, overIndex);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<Tabs
|
||
|
|
className={className}
|
||
|
|
items={items}
|
||
|
|
renderTabBar={(tabBarProps, DefaultTabBar) => (
|
||
|
|
<DndContext sensors={[sensor]} onDragEnd={onDragEnd}>
|
||
|
|
<SortableContext items={items.map((i) => i.key)} strategy={horizontalListSortingStrategy}>
|
||
|
|
<DefaultTabBar {...tabBarProps}>
|
||
|
|
{(node) => (
|
||
|
|
<DraggableTabNode
|
||
|
|
{...node.props}
|
||
|
|
key={node.key}
|
||
|
|
onActiveBarTransform={setClassName}
|
||
|
|
>
|
||
|
|
{node}
|
||
|
|
</DraggableTabNode>
|
||
|
|
)}
|
||
|
|
</DefaultTabBar>
|
||
|
|
</SortableContext>
|
||
|
|
</DndContext>
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
export default App;
|
||
|
|
`,description:'<p>Use <a href="https://github.com/clauderic/dnd-kit">dnd-kit</a> to make tabs draggable.</p>'}},{demo:{id:"components-tabs-demo-animated"},previewerProps:{debug:!0,title:"Animated",filename:"components/tabs/demo/animated.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 { Tabs, Switch, Space } from 'antd';
|
||
|
|
const App = () => {
|
||
|
|
const [inkBar, setInkBar] = React.useState(true);
|
||
|
|
const [tabPane, setTabPane] = React.useState(true);
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Space>
|
||
|
|
<Switch
|
||
|
|
checkedChildren="inkBar"
|
||
|
|
unCheckedChildren="inkBar"
|
||
|
|
checked={inkBar}
|
||
|
|
onChange={() => setInkBar(!inkBar)}
|
||
|
|
/>
|
||
|
|
<Switch
|
||
|
|
checkedChildren="tabPane"
|
||
|
|
unCheckedChildren="tabPane"
|
||
|
|
checked={tabPane}
|
||
|
|
onChange={() => setTabPane(!tabPane)}
|
||
|
|
/>
|
||
|
|
</Space>
|
||
|
|
|
||
|
|
<Tabs
|
||
|
|
animated={{
|
||
|
|
inkBar,
|
||
|
|
tabPane,
|
||
|
|
}}
|
||
|
|
items={[
|
||
|
|
{
|
||
|
|
label: \`Bamboo\`,
|
||
|
|
key: '1',
|
||
|
|
children: \`Hello Bamboo!\`,
|
||
|
|
style: {
|
||
|
|
height: 200,
|
||
|
|
boxShadow: '0 0 3px rgba(255, 0, 0, 0.5)',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: \`Little\`,
|
||
|
|
key: '2',
|
||
|
|
children: \`Hi Little!\`,
|
||
|
|
style: {
|
||
|
|
height: 300,
|
||
|
|
boxShadow: '0 0 3px rgba(0, 255, 0, 0.5)',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: \`Light\`,
|
||
|
|
key: '3',
|
||
|
|
children: \`Welcome Light!\`,
|
||
|
|
style: {
|
||
|
|
height: 100,
|
||
|
|
boxShadow: '0 0 3px rgba(0, 0, 255, 0.5)',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>Animated of Tab Pane.</p>"}},{demo:{id:"components-tabs-demo-nest"},previewerProps:{debug:!0,title:"Nest",filename:"components/tabs/demo/nest.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 { Select, Tabs } from 'antd';
|
||
|
|
const { Option } = Select;
|
||
|
|
const positionList = ['left', 'right', 'top', 'bottom'];
|
||
|
|
const App = () => {
|
||
|
|
const [parentPos, setParentPos] = useState(undefined);
|
||
|
|
const [childPos, setChildPos] = useState(undefined);
|
||
|
|
const [parentType, setParentType] = useState(undefined);
|
||
|
|
const [childType, setChildType] = useState(undefined);
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<Select
|
||
|
|
style={{
|
||
|
|
width: 200,
|
||
|
|
}}
|
||
|
|
onChange={(val) => {
|
||
|
|
setParentPos(val);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{positionList.map((pos) => (
|
||
|
|
<Option key={pos} value={pos}>
|
||
|
|
Parent - {pos}
|
||
|
|
</Option>
|
||
|
|
))}
|
||
|
|
</Select>
|
||
|
|
|
||
|
|
<Select
|
||
|
|
style={{
|
||
|
|
width: 200,
|
||
|
|
}}
|
||
|
|
onChange={(val) => {
|
||
|
|
setChildPos(val);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{positionList.map((pos) => (
|
||
|
|
<Option key={pos} value={pos}>
|
||
|
|
Child - {pos}
|
||
|
|
</Option>
|
||
|
|
))}
|
||
|
|
</Select>
|
||
|
|
|
||
|
|
<Select
|
||
|
|
style={{
|
||
|
|
width: 200,
|
||
|
|
}}
|
||
|
|
onChange={(val) => {
|
||
|
|
setParentType(val);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Option value="line">Parent - line</Option>
|
||
|
|
<Option value="card">Parent - card</Option>
|
||
|
|
<Option value="editable-card">Parent - card edit</Option>
|
||
|
|
</Select>
|
||
|
|
|
||
|
|
<Select
|
||
|
|
style={{
|
||
|
|
width: 200,
|
||
|
|
}}
|
||
|
|
onChange={(val) => {
|
||
|
|
setChildType(val);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Option value="line">Child - line</Option>
|
||
|
|
<Option value="card">Child - card</Option>
|
||
|
|
<Option value="editable-card">Parent - card edit</Option>
|
||
|
|
</Select>
|
||
|
|
|
||
|
|
<Tabs
|
||
|
|
defaultActiveKey="1"
|
||
|
|
tabPosition={parentPos}
|
||
|
|
type={parentType}
|
||
|
|
items={[
|
||
|
|
{
|
||
|
|
label: 'Tab 1',
|
||
|
|
key: '1',
|
||
|
|
children: (
|
||
|
|
<Tabs
|
||
|
|
defaultActiveKey="1"
|
||
|
|
tabPosition={childPos}
|
||
|
|
type={childType}
|
||
|
|
style={{
|
||
|
|
height: 300,
|
||
|
|
}}
|
||
|
|
items={new Array(20).fill(null).map((_, index) => {
|
||
|
|
const key = String(index);
|
||
|
|
return {
|
||
|
|
label: \`Tab \${key}\`,
|
||
|
|
key,
|
||
|
|
children: \`TTTT \${key}\`,
|
||
|
|
};
|
||
|
|
})}
|
||
|
|
/>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'Tab 2',
|
||
|
|
key: '2',
|
||
|
|
children: 'Content of Tab Pane 2',
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>Default activate first tab.</p>"}},{demo:{id:"components-tabs-demo-component-token"},previewerProps:{debug:!0,title:"component Token",filename:"components/tabs/demo/component-token.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 { Button, ConfigProvider, Tabs } from 'antd';
|
||
|
|
import React from 'react';
|
||
|
|
const App = () => (
|
||
|
|
<ConfigProvider
|
||
|
|
theme={{
|
||
|
|
components: {
|
||
|
|
Tabs: {
|
||
|
|
cardBg: '#f6ffed',
|
||
|
|
cardHeight: 60,
|
||
|
|
cardPadding: \`20px\`,
|
||
|
|
cardPaddingSM: \`20px\`,
|
||
|
|
cardPaddingLG: \`20px\`,
|
||
|
|
titleFontSize: 20,
|
||
|
|
titleFontSizeLG: 20,
|
||
|
|
titleFontSizeSM: 20,
|
||
|
|
inkBarColor: '#52C41A',
|
||
|
|
horizontalMargin: \`0 0 12px 0\`,
|
||
|
|
horizontalItemGutter: 12,
|
||
|
|
// Fixed Value
|
||
|
|
horizontalItemPadding: \`20px\`,
|
||
|
|
horizontalItemPaddingSM: \`20px\`,
|
||
|
|
horizontalItemPaddingLG: \`20px\`,
|
||
|
|
verticalItemPadding: \`8px\`,
|
||
|
|
verticalItemMargin: \`4px 0 0 0\`,
|
||
|
|
itemSelectedColor: '#389e0d',
|
||
|
|
itemHoverColor: '#d9f7be',
|
||
|
|
itemActiveColor: '#b7eb8f',
|
||
|
|
cardGutter: 12,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div>
|
||
|
|
<Tabs
|
||
|
|
defaultActiveKey="1"
|
||
|
|
tabBarExtraContent={<Button>Extra Action</Button>}
|
||
|
|
style={{
|
||
|
|
marginBottom: 32,
|
||
|
|
}}
|
||
|
|
items={new Array(3).fill(null).map((_, i) => {
|
||
|
|
const id = String(i + 1);
|
||
|
|
return {
|
||
|
|
label: \`Tab \${id}\`,
|
||
|
|
key: id,
|
||
|
|
children: \`Content of tab \${id}\`,
|
||
|
|
};
|
||
|
|
})}
|
||
|
|
/>
|
||
|
|
<Tabs
|
||
|
|
tabPosition="left"
|
||
|
|
defaultActiveKey="1"
|
||
|
|
tabBarExtraContent={<Button>Extra Action</Button>}
|
||
|
|
style={{
|
||
|
|
marginBottom: 32,
|
||
|
|
}}
|
||
|
|
items={new Array(3).fill(null).map((_, i) => {
|
||
|
|
const id = String(i + 1);
|
||
|
|
return {
|
||
|
|
label: \`Tab \${id}\`,
|
||
|
|
key: id,
|
||
|
|
children: \`Content of tab \${id}\`,
|
||
|
|
};
|
||
|
|
})}
|
||
|
|
/>
|
||
|
|
<Tabs
|
||
|
|
size="small"
|
||
|
|
defaultActiveKey="1"
|
||
|
|
tabBarExtraContent={<Button>Extra Action</Button>}
|
||
|
|
style={{
|
||
|
|
marginBottom: 32,
|
||
|
|
}}
|
||
|
|
items={new Array(3).fill(null).map((_, i) => {
|
||
|
|
const id = String(i + 1);
|
||
|
|
return {
|
||
|
|
label: \`Tab \${id}\`,
|
||
|
|
key: id,
|
||
|
|
children: \`Content of tab \${id}\`,
|
||
|
|
};
|
||
|
|
})}
|
||
|
|
/>
|
||
|
|
<Tabs
|
||
|
|
size="large"
|
||
|
|
defaultActiveKey="1"
|
||
|
|
tabBarExtraContent={<Button>Extra Action</Button>}
|
||
|
|
style={{
|
||
|
|
marginBottom: 32,
|
||
|
|
}}
|
||
|
|
items={new Array(3).fill(null).map((_, i) => {
|
||
|
|
const id = String(i + 1);
|
||
|
|
return {
|
||
|
|
label: \`Tab \${id}\`,
|
||
|
|
key: id,
|
||
|
|
children: \`Content of tab \${id}\`,
|
||
|
|
};
|
||
|
|
})}
|
||
|
|
/>
|
||
|
|
<Tabs
|
||
|
|
defaultActiveKey="1"
|
||
|
|
centered
|
||
|
|
type="card"
|
||
|
|
items={new Array(3).fill(null).map((_, i) => {
|
||
|
|
const id = String(i + 1);
|
||
|
|
return {
|
||
|
|
disabled: i === 2,
|
||
|
|
label: \`Tab \${id}\`,
|
||
|
|
key: id,
|
||
|
|
children: \`Content of Tab Pane \${id}\`,
|
||
|
|
};
|
||
|
|
})}
|
||
|
|
/>
|
||
|
|
<Tabs
|
||
|
|
size="small"
|
||
|
|
defaultActiveKey="1"
|
||
|
|
centered
|
||
|
|
type="card"
|
||
|
|
items={new Array(3).fill(null).map((_, i) => {
|
||
|
|
const id = String(i + 1);
|
||
|
|
return {
|
||
|
|
disabled: i === 2,
|
||
|
|
label: \`Tab \${id}\`,
|
||
|
|
key: id,
|
||
|
|
children: \`Content of Tab Pane \${id}\`,
|
||
|
|
};
|
||
|
|
})}
|
||
|
|
/>
|
||
|
|
<Tabs
|
||
|
|
size="large"
|
||
|
|
defaultActiveKey="1"
|
||
|
|
centered
|
||
|
|
type="card"
|
||
|
|
items={new Array(3).fill(null).map((_, i) => {
|
||
|
|
const id = String(i + 1);
|
||
|
|
return {
|
||
|
|
disabled: i === 2,
|
||
|
|
label: \`Tab \${id}\`,
|
||
|
|
key: id,
|
||
|
|
children: \`Content of Tab Pane \${id}\`,
|
||
|
|
};
|
||
|
|
})}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</ConfigProvider>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>Component Token Debug.</p>"}}]}),(0,n.tZ)("div",{className:"markdown"},(0,n.tZ)("h2",{id:"api"},(0,n.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#api",sourceType:"a"},(0,n.tZ)("span",{className:"icon icon-link"})),"API"),(0,n.tZ)("h3",{id:"tabs"},(0,n.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#tabs",sourceType:"a"},(0,n.tZ)("span",{className:"icon icon-link"})),"Tabs"),(0,n.tZ)(a.Z,{className:"component-api-table"},(0,n.tZ)("thead",null,(0,n.tZ)("tr",null,(0,n.tZ)("th",null,e[6].value),(0,n.tZ)("th",null,e[7].value),(0,n.tZ)("th",null,e[8].value),(0,n.tZ)("th",null,e[9].value),(0,n.tZ)("th",null,e[10].value))),(0,n.tZ)("tbody",null,(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[11].value),(0,n.tZ)("td",null,e[12].value),(0,n.tZ)("td",null,e[13].value),(0,n.tZ)("td",null,e[14].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[15].value),(0,n.tZ)("td",null,e[16].value),(0,n.tZ)("td",null,e[17].value),(0,n.tZ)("td",null,e[18].value),(0,n.tZ)("td",null,e[19].value)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[20].value),(0,n.tZ)("td",null,e[21].value,(0,n.tZ)("code",null,e[22].value)),(0,n.tZ)("td",null,e[23].value),(0,n.tZ)("td",null,e[24].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[25].value),(0,n.tZ)("td",null,e[26].value),(0,n.tZ)("td",null,e[27].value),(0,n.tZ)("td",null,e[28].value),(0,n.tZ)("td",null,e[29].value)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[30].value),(0,n.tZ)("td",null,e[31].value,(0,n.tZ)("code",null,e[32].value),e[33].value),(0,n.tZ)("td",null,e[34].value),(0,n.tZ)("td",null,e[35].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[36].value),(0,n.tZ)("td",null,e[37].value,(0,n.tZ)("code",null,e[38].value)),(0,n.tZ)("td",null,e[39].value),(0,n.tZ)("td",null,e[40].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[41].value),(0,n.tZ)("td",null,e[42].value),(0,n.tZ)("td",null,(0,n.tZ)(r.Z,{to:"#tabitemtype",sourceType:"Link"},e[43].value)),(0,n.tZ)("td",null,e[44].value),(0,n.tZ)("td",null,e[45].value)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[46].value),(0,n.tZ)("td",null,e[47].value),(0,n.tZ)("td",null,e[48].value),(0,n.tZ)("td",null,e[49].value),(0,n.tZ)("td",null,e[50].value)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[51].value),(0,n.tZ)("td",null,(0,n.tZ)("code",null,e[52].value),e[53].value),(0,n.tZ)("td",null,e[54].value),(0,n.tZ)("td",null,e[55].value),(0,n.tZ)("td",null,e[56].value)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[57].value),(0,n.tZ)("td",null,e[58].value),(0,n.tZ)("td",null,e[59].value),(0,n.tZ)("td",null,e[60].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[61].value),(0,n.tZ)("td",null,e[62].value),(0,n.tZ)("td",null,(0,n.tZ)("code",null,e[63].value),e[64].value,(0,n.tZ)("code",null,e[65].value),e[66].value,(0,n.tZ)("code",null,e[67].value)),(0,n.tZ)("td",null,(0,n.tZ)("code",null,e[68].value)),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[69].value),(0,n.tZ)("td",null,e[70].value),(0,n.tZ)("td",null,e[71].value),(0,n.tZ)("td",null,e[72].value),(0,n.tZ)("td",null,e[73].value)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[74].value),(0,n.tZ)("td",null,e[75].value),(0,n.tZ)("td",null,e[76].value),(0,n.tZ)("td",null,e[77].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[78].value),(0,n.tZ)("td",null,e[79].value),(0,n.tZ)("td",null,e[80].value),(0,n.tZ)("td",null,e[81].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[82].value),(0,n.tZ)("td",null,e[83].value),(0,n.tZ)("td",null,(0,n.tZ)("code",null,e[84].value),e[85].value,(0,n.tZ)("code",null,e[86].value),e[87].value,(0,n.tZ)("code",null,e[88].value),e[89].value,(0,n.tZ)("code",null,e[90].value)),(0,n.tZ)("td",null,(0,n.tZ)("code",null,e[91].value)),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[92].value),(0,n.tZ)("td",null,e[93].value),(0,n.tZ)("td",null,e[94].value),(0,n.tZ)("td",null,e[95].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[96].value),(0,n.tZ)("td",null,e[97].value),(0,n.tZ)("td",null,(0,n.tZ)("code",null,e[98].value),e[99].val
|