{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/navigation/tabs","result":{"data":{"current":{"frontmatter":{"title":"Tabs","order":60,"brief":"When the content needs to be grouped and displayed in different modules or pages, you could use Tabs to switch between different groups or pages","icon":"doc-tabs"},"fields":{"type":"navigation"},"tableOfContents":{"items":[{"url":"#demos","title":"Demos","items":[{"url":"#how-to-import","title":"How to import"},{"url":"#basic-usage","title":"Basic Usage"},{"url":"#with-icon","title":"With Icon"},{"url":"#more-with-dropdown","title":"More with Dropdown"},{"url":"#vertical-mode","title":"Vertical mode"},{"url":"#scrollable-tabs","title":"Scrollable Tabs"},{"url":"#disable","title":"Disable"},{"url":"#extra-content","title":"Extra Content"},{"url":"#custom-render","title":"Custom Render"},{"url":"#dynamic-update","title":"Dynamic Update"},{"url":"#closeable","title":"Closeable"}]},{"url":"#api-reference","title":"API Reference","items":[{"url":"#tab","title":"Tab"},{"url":"#tabpane","title":"TabPane"}]},{"url":"#accessibility","title":"Accessibility","items":[{"url":"#aria","title":"ARIA"},{"url":"#keyboard-and-focus","title":"Keyboard and Focus"}]},{"url":"#content-guidelines","title":"Content Guidelines"},{"url":"#design-token","title":"Design Token"},{"url":"#faq","title":"FAQ"}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n \"localeCode\": \"en-US\",\n \"order\": 60,\n \"category\": \"Navigation\",\n \"title\": \"Tabs\",\n \"subTitle\": \"Tabs\",\n \"icon\": \"doc-tabs\",\n \"brief\": \"When the content needs to be grouped and displayed in different modules or pages, you could use Tabs to switch between different groups or pages\"\n};\nvar makeShortcode = function makeShortcode(name) {\n return function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n };\n};\nvar Notice = makeShortcode(\"Notice\");\nvar DesignToken = makeShortcode(\"DesignToken\");\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Demos\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"How to import\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \"import { Tabs, TabPane } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Basic Usage\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Tbs supports three types of styles: \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"line\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"button\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"card\"), \", and \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"slash\"), \". By default, the first tab is selected.\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Tabs supports two declare ways, and the rendering process of the two is different:\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Pass the array of objects through \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"tabList\"), \", when using \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"tabList\"), \", only render the currently passed node each time\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Or use \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"\"), \" to explicitly pass in item by item. When using \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"\"), \", all panels will be rendered by default. You can set \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"keepDOM={false}\"), \" to only render the current panel, and there will be no animation effect at this time .\")), mdx(Notice, {\n title: \"Notice\",\n mdxType: \"Notice\"\n }, \"1. When tabList and TabPane Children are used at the same time, the data passed in through tabList will be rendered first. It is not recommended to configure both \", mdx(\"br\", null), \"2. When using TabPane Children, TabPane must be a direct child element of Tabs, otherwise Tabs will not be able to correctly collect related attributes such as itemKey and other subcomponents\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { Tabs, TabPane } from '@douyinfe/semi-ui';\\n\\nclass App extends React.Component {\\n render() {\\n return (\\n
\\n \\n \\n

Document

\\n

\\n Semi Design is a design system developed and maintained by IES Front-end Team and UED Team\\n

\\n

\\n Semi Design create a consistent, good-looking, easy-to-use, and efficient user experience\\n with a user-centric, content-first, and human-friendly design system.\\n

\\n
    \\n
  • \\n

    Content-first

    \\n
    • \\n
  • \\n

    Customized theming

    \\n
    • \\n
  • \\n

    Internationalized

    \\n
    • \\n
  • \\n

    Humanism

    \\n
    • \\n
\\n \\n \\n

Quick Start

\\n

\\n If it is a new project, it is recommended that you use Eden to initialize the project and\\n initialize the project type to select the React direction.\\n

\\n \\n yarn add @douyinfe/semi-ui\\n \\n \\n \\n

Help

\\n

\\n Q: Who should I look for if there are new component requirements, or existing component does\\n not meet my needs?\\n

\\n

\\n {`Give feedbacks in the upper right corner, submit an Issue, describe your needs as well as\\n the business scenario. We'll handle these issues with priorities.`}\\n

\\n

\\n Q: Have questions when using components?\\n

\\n

\\n Welcome to ask anything in our Lark customer service group.\\n

\\n \\n \\n
\\n );\\n }\\n}\\n\")), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { Tabs, TabPane } from '@douyinfe/semi-ui';\\n\\nclass App extends React.Component {\\n render() {\\n return (\\n \\n \\n Document\\n \\n \\n Quick Start\\n \\n \\n Help\\n \\n \\n );\\n }\\n}\\n\")), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { Tabs } from '@douyinfe/semi-ui';\\n\\nclass TabDemo extends React.Component {\\n constructor() {\\n super();\\n this.state = { key: '1' };\\n this.onTabClick = this.onTabClick.bind(this);\\n }\\n\\n onTabClick(key, type) {\\n this.setState({ [type]: key });\\n }\\n\\n render() {\\n // eslint-disable-next-line react/jsx-key\\n const contentList = [
Document
,
Quick Start
,
Help
];\\n const tabList = [\\n { tab: 'Document', itemKey: '1' },\\n { tab: 'Quick Start', itemKey: '2' },\\n { tab: 'Help', itemKey: '3' },\\n ];\\n return (\\n {\\n this.onTabClick(key, 'key');\\n }}\\n >\\n {contentList[this.state.key - 1]}\\n \\n );\\n }\\n}\\n\")), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { Tabs } from '@douyinfe/semi-ui';\\n\\nclass TabDemo extends React.Component {\\n constructor() {\\n super();\\n this.state = { key: '1' };\\n this.onTabClick = this.onTabClick.bind(this);\\n }\\n\\n onTabClick(key, type) {\\n this.setState({ [type]: key });\\n }\\n\\n render() {\\n // eslint-disable-next-line react/jsx-key\\n const contentList = [
Document
,
Quick Start
,
Help
];\\n const tabList = [\\n { tab: 'Document', itemKey: '1' },\\n { tab: 'Quick Start', itemKey: '2' },\\n { tab: 'Help', itemKey: '3' },\\n ];\\n return (\\n {\\n this.onTabClick(key, 'key');\\n }}\\n >\\n {contentList[this.state.key - 1]}\\n \\n );\\n }\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"With Icon\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { Tabs, TabPane } from '@douyinfe/semi-ui';\\nimport { IconFile, IconGlobe, IconHelpCircle } from '@douyinfe/semi-icons';\\n\\nclass App extends React.Component {\\n render() {\\n return (\\n \\n \\n \\n Document\\n \\n }\\n itemKey=\\\"1\\\"\\n >\\n Document\\n \\n \\n \\n Quick Start\\n \\n }\\n itemKey=\\\"2\\\"\\n >\\n Quick Start\\n \\n \\n \\n Help\\n \\n }\\n itemKey=\\\"3\\\"\\n >\\n Help\\n \\n \\n );\\n }\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"More with Dropdown\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Supports merging redundant tabs into a \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"more\"), \" drop-down menu. Just pass in a number for \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"more\"), \". The number represents the number of tabs included in the drop-down menu. \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\uFF08>=v2.59.0\\uFF09\")), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=column\",\n \"live\": \"true\",\n \"dir\": \"column\"\n }, \"import React from 'react';\\nimport { Tabs, TabPane } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n return (\\n \\n {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => (\\n \\n Content of card tab {i}\\n \\n ))}\\n \\n );\\n}\\n\")), mdx(\"p\", {\n parentName: \"section\"\n }, \"Advanced configuration is also supported, passing the object to \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"more\"), \", and it can be passed in\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"count\"), \": Represents the number of Tabs in the income drop-down menu\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"render\"), \": Customize the rendering function of Trigger. The returned ReactNode will be rendered as the Trigger of the drop-down menu.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"dropdownProps\"), \": Incoming DropDown Props will be transparently transmitted to the drop-down menu. If you need to customize the drop-down menu, use the render method in dropdownProps\")), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=column\",\n \"live\": \"true\",\n \"dir\": \"column\"\n }, \"import React from 'react';\\nimport { Tabs, TabPane, Button } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n return (\\n {\\n return ;\\n },\\n dropdownProps: { trigger: 'click', position: 'bottomRight' },\\n }}\\n style={{ width: '60%', margin: '20px' }}\\n type=\\\"card\\\"\\n >\\n {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => (\\n \\n Content of card tab {i}\\n \\n ))}\\n \\n );\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Vertical mode\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"When \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"type\"), \" is \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"line\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"card\"), \", or \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"button\"), \", horizontal and vertical modes are supported, \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"tabPosition='left|top'\"), \"\\uFF0Cdefault is top. When \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"type\"), \" is \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"slash\"), \", only horizontal mode is supported.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { Tabs, TabPane, Radio, RadioGroup } from '@douyinfe/semi-ui';\\nimport { IconFile, IconGlobe, IconHelpCircle } from '@douyinfe/semi-icons';\\n\\nclass App extends React.Component {\\n constructor() {\\n super();\\n this.state = {\\n type: 'line',\\n };\\n }\\n\\n onSelect(e) {\\n this.setState({\\n type: e.target.value,\\n });\\n }\\n\\n render() {\\n return (\\n <>\\n this.onSelect(e)}\\n value={this.state.type}\\n type=\\\"button\\\"\\n style={{\\n display: 'flex',\\n width: 200,\\n justifyContent: 'center',\\n }}\\n >\\n Line\\n Card\\n Button\\n \\n
\\n
\\n \\n \\n \\n Document\\n \\n }\\n itemKey=\\\"1\\\"\\n >\\n
Document
\\n \\n \\n \\n Quick Start\\n \\n }\\n itemKey=\\\"2\\\"\\n >\\n
Quick Start
\\n \\n \\n \\n Help\\n \\n }\\n itemKey=\\\"3\\\"\\n >\\n
Help
\\n \\n \\n \\n );\\n }\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Scrollable Tabs\"), mdx(\"p\", {\n parentName: \"section\"\n }, mdx(\"strong\", {\n parentName: \"p\"\n }, \"v>= 1.1.0\"), mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"You could use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"collapsible\"), \" for a scrollable tabs with dropdown menu. Horizontal mode only.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=column\",\n \"live\": \"true\",\n \"dir\": \"column\"\n }, \"import React from 'react';\\nimport { Tabs, TabPane } from '@douyinfe/semi-ui';\\n\\nclass App extends React.Component {\\n render() {\\n return (\\n \\n {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((item, index) => (\\n \\n Content of card tab {index}\\n \\n ))}\\n \\n );\\n }\\n}\\n\")), mdx(\"p\", {\n parentName: \"section\"\n }, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Modify the scrolling rendering Arrow\")), mdx(\"p\", {\n parentName: \"section\"\n }, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"renderArrow\"), \" modifies the Arrow, with the input parameters being the overflowed items, position, click function, and defaultNode.\"), mdx(\"p\", {\n parentName: \"section\"\n }, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Attention\"), \": The first three parameters of renderArrow are supported since 2.61.0\\uFF0Cwhile defaultNode parameter is supported since 2.66.0.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\"\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\"\n }, \"import React from 'react';\\nimport { Tabs, TabPane, Dropdown } from '@douyinfe/semi-ui';\\n\\n() => {\\n const [activeKey, setActiveKey] = useState('Tab-0');\\n const renderArrow = (items, pos, handleArrowClick) => {\\n const style = {\\n width: 32,\\n height: 32,\\n margin: '0 12px',\\n display: 'flex',\\n justifyContent: 'center',\\n alignItems: 'center',\\n borderRadius: '100%',\\n background: 'rgba(var(--semi-grey-1), 1)',\\n color: 'var(--semi-color-text)',\\n cursor: 'pointer',\\n };\\n return (\\n \\n {items.map(item => {\\n return (\\n setActiveKey(item.itemKey)}>{item.itemKey}\\n );\\n })}\\n \\n }\\n >\\n {pos === 'start' ? (\\n
\\n \\u2190\\n
\\n ) : (\\n
\\n \\u2192\\n
\\n )}\\n \\n );\\n };\\n\\n return (\\n setActiveKey(k)}\\n >\\n {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => (\\n \\n Content of card tab {i}\\n \\n ))}\\n \\n );\\n};\\n\")), mdx(\"p\", {\n parentName: \"section\"\n }, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Modify Arrow rendering position\")), mdx(\"p\", {\n parentName: \"section\"\n }, \"Use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"arrowPosition\"), \" to modify the overflow indicator position, optional start both end\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=column\",\n \"live\": \"true\",\n \"dir\": \"column\"\n }, \"import React from 'react';\\nimport { Tabs, TabPane } from '@douyinfe/semi-ui';\\n\\nclass App extends React.Component {\\n render() {\\n return (\\n <>\\n \\n {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => (\\n \\n Content of card tab {i}\\n \\n ))}\\n \\n \\n {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => (\\n \\n Content of card tab {i}\\n \\n ))}\\n \\n \\n {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => (\\n \\n Content of card tab {i}\\n \\n ))}\\n \\n \\n );\\n }\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Disable\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Disable one tab.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { Tabs, TabPane } from '@douyinfe/semi-ui';\\n\\nclass App extends React.Component {\\n render() {\\n return (\\n \\n \\n Document\\n \\n \\n Quick Start\\n \\n \\n Help\\n \\n \\n );\\n }\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Extra Content\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"tabBarExtraContent\"), \" to add extra content on the right side of tabBar.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { Tabs, TabPane, Button } from '@douyinfe/semi-ui';\\n\\nclass App extends React.Component {\\n render() {\\n return (\\n {\\n alert('you have clicked me!');\\n }}\\n >\\n Extra Action\\n \\n }\\n >\\n \\n Document\\n \\n \\n Quick Start\\n \\n \\n Help\\n \\n \\n );\\n }\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Custom Render\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"renderTabBar\"), \" to customize tabBar render behavior.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { Tabs, TabPane } from '@douyinfe/semi-ui';\\n\\nclass App extends React.Component {\\n render() {\\n return (\\n {\\n return (\\n
\\n This is a custom rendered tabBar. Current activeKey is: {tabBarProps.activeKey}\\n \\n
\\n );\\n }}\\n >\\n \\n Document\\n \\n \\n Quick Start\\n \\n \\n Help\\n \\n \\n );\\n }\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Dynamic Update\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"You can add events to update tabBar dynamically.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { Tabs, TabPane, ButtonGroup, Button } from '@douyinfe/semi-ui';\\n\\nclass App extends React.Component {\\n constructor(props) {\\n super(props);\\n this.newTabIndex = 0;\\n const panes = [\\n { title: 'Tab 1', content: 'Content of Tab Pane 1', itemKey: '1' },\\n { title: 'Tab 2', content: 'Content of Tab Pane 2', itemKey: '2' },\\n ];\\n this.state = {\\n panes,\\n activeKey: panes[0].itemKey,\\n };\\n }\\n\\n add() {\\n const { panes } = this.state;\\n const index = this.newTabIndex++;\\n panes.push({ title: `New Tab ${index}`, content: 'New Tab Pane', itemKey: `newTab${index}` });\\n this.setState({ panes, activeKey: `newTab${index}` });\\n }\\n\\n remove() {\\n const { panes } = this.state;\\n if (panes.length > 1) {\\n panes.pop();\\n this.setState({ panes, activeKey: panes[panes.length - 1].itemKey });\\n }\\n }\\n\\n handleChange(activeKey) {\\n this.setState({ activeKey });\\n }\\n\\n render() {\\n const { panes, activeKey } = this.state;\\n return (\\n \\n \\n \\n \\n }\\n >\\n {panes.map(pane => (\\n \\n {pane.content}\\n \\n ))}\\n \\n );\\n }\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Closeable\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Close a tab in the tab bar. Only card style tabs support the close option. Use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"closable={true}\"), \" to turn it on.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { Tabs, TabPane } from '@douyinfe/semi-ui';\\n\\nclass App extends React.Component {\\n constructor(props) {\\n super(props);\\n this.state = {\\n tabList: [\\n { tab: 'Doc', itemKey: '1', text: 'Doc', closable: true },\\n { tab: 'Quick Start', itemKey: '2', text: 'Quick Start', closable: true },\\n { tab: 'Help', itemKey: '3', text: 'Help' },\\n ],\\n };\\n }\\n close(key) {\\n const newTabList = [...this.state.tabList];\\n const closeIndex = newTabList.findIndex(t => t.itemKey === key);\\n newTabList.splice(closeIndex, 1);\\n this.setState({ tabList: newTabList });\\n }\\n render() {\\n return (\\n \\n {this.state.tabList.map(t => (\\n \\n {t.text}\\n \\n ))}\\n \\n );\\n }\\n}\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"API Reference\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Tab\"), mdx(\"table\", {\n parentName: \"section\"\n }, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Property\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Description\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Type\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Default Value\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"activeKey\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"The itemKey value of the currently active tab page\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"None\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"className\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"class name\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"None\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"collapsible\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"collapsed Tabs, \", mdx(\"strong\", {\n parentName: \"td\"\n }, \">=1.1.0\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"false\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"dropdownProps\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"In collapsible mode, It is used to transparently transmit parameters to the Dropdown component of the drop-down menu, support since 2.66.0\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"DropDownProps\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"{ start: DropdownProps, end: DropdownProps }\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"visibleTabsStyle\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Overall scrolling area style \", mdx(\"strong\", {\n parentName: \"td\"\n }, \">=2.61.0\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"style: CSSProperties\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"None\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"contentStyle\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"The outer style object of the content area\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"CSSProperties\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"None\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"defaultActiveKey\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Initialize the key value of the selected tab page\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"'1'\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"keepDOM\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Whether to render the DOM structure of the hidden panel when using TabPane writing, \", mdx(\"strong\", {\n parentName: \"td\"\n }, \">=1.0.0\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"true\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"lazyRender\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Lazy rendering, only when the panel is activated will it be rendered in the DOM tree, \", mdx(\"strong\", {\n parentName: \"td\"\n }, \">=1.0.0\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"false\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"more\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Render a portion of the Tab into a drop-down menu \", mdx(\"strong\", {\n parentName: \"td\"\n }, \" >= 2.59.0\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number \", \"|\", \" {count:number,render:()=>ReactNode,dropdownProps:DropDownProps}\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"renderTabBar\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Used for secondary packaging tab bar\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(tabBarProps: object, defaultTabBar: React.ComponentType) => ReactNode\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"None\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"renderArrow\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Customize how overflow items indicator are rendered externally. By default, the overflow items are expanded when the arrow button is hovered. The first three parameters of renderArrow are supported since \", mdx(\"strong\", {\n parentName: \"td\"\n }, \">=2.61.0\"), \", defaultNode is supported since \", mdx(\"strong\", {\n parentName: \"td\"\n }, \">=2.66.0\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(items: OverflowItem[],pos:\\\"start\\\"\", \"|\", \"\\\"end\\\", handleArrowClick:()=>void, defaultNode: ReactNode)=> ReactNode\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"None\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"preventScroll\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Indicates whether the browser should scroll the document to display the newly focused element, acting on the focus method inside the component, excluding the component passed in by the user\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"showRestInDropdown\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Whether to display the collapsed Tab in the drop-down menu (only effective when collapsible is true) \", mdx(\"strong\", {\n parentName: \"td\"\n }, \">= 2.61.0\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"true\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"size\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Size, providing three types of \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"large\"), \", \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"medium\"), \", and \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"small\"), \", \", mdx(\"strong\", {\n parentName: \"td\"\n }, \">=1.11.0, currently only supports linear Tabs\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"large\"))), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"style\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"style object\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"CSSProperties\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"None\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"tabBarExtraContent\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Used to extend the content of the tab bar\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"ReactNode\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"None\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"tabList\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"An array of tab page objects that supports itemKey (corresponding to activeKey, tab (tab page text) and icon (tab page icon)\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"TabPane[]\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"None\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"tabPaneMotion\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Whether to use animation to switch tabs\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"true\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"tabPosition\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"The position of the tab, support \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"top\"), \" (horizontal), \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"left\"), \" (vertical), \", mdx(\"strong\", {\n parentName: \"td\"\n }, \">=1.0.0\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"top\"))), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"type\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"The style of the label bar, optional \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"line\"), \", \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"card\"), \", \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"button\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"line\"))), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onChange\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Callback function when switching tab pages\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"function(activeKey: string)\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"None\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onTabClick\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Click event\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"function(key: string, e: Event)\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"None\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onTabClose\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"executed when tab closed by user, \", mdx(\"strong\", {\n parentName: \"td\"\n }, \">=2.1.0\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"function(tabKey: string)\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"None\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"arrowPosition\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Arrow rendering position \", mdx(\"strong\", {\n parentName: \"td\"\n }, \">=2.61.0\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\\"start\\\" \\\"end\\\" \\\"both\\\"\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u65E0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onVisibleTabsChange\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Overflow item switching change callback \", mdx(\"strong\", {\n parentName: \"td\"\n }, \">=2.61.0\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(visibleState:Record\\\\\", \")=>void\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"None\")))), mdx(\"h3\", {\n parentName: \"section\"\n }, \"TabPane\"), mdx(\"table\", {\n parentName: \"section\"\n }, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Property\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Description\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Type\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Default Value\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"className\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"class name\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"None\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"disabled\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Whether the tab bar is disabled\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"None\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"icon\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Tab bar icon\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"ReactNode\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"None\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"itemKey\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"corresponding to \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"activeKey\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"None\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"style\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"style object\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"CSSProperties\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"None\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"tab\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Tab page bar display text\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"ReactNode\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"None\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"closable\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"whether user can close the tab \", mdx(\"strong\", {\n parentName: \"td\"\n }, \">=2.1.0\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"false\"))))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Accessibility\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"ARIA\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"About role\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"TabBar has a role of \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"tablist\")), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Tab in TabBar has a role of \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"tab\")), mdx(\"li\", {\n parentName: \"ul\"\n }, \"TabPane has a role of \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"tabpanel\")))), mdx(\"li\", {\n parentName: \"ul\"\n }, \"aria-orientation: Indicates TabBar's orientation, can be \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"vertical\"), \" or \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"horizontal\"), \". When tabPosition is \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"left\"), \",aria-orientation will be \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"vertical\"), \", when tabPosition is \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"top\"), \", aria-orientation will be \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"horizontal\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"aria-disabled: When TabPane is disabled, the related Tab's aria-disabled will be set to true.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"aria-selected: Indicates whether the Tab is selected.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"aria-controls: Indicates the TabPane controlled by the Tab\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"aria-labelledby: Indicates the element labels the TabPane\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Keyboard and Focus\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"WAI-ARIA: \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/\"\n }, \"https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/\")), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Tabs can be given focus, except for disabled tabs\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Keyboard users can use the \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Tab\"), \" key to move the focus to the tab panel of the selected tab element\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Use \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"left and right arrows\"), \" to toggle options when focus is on a tab element in a horizontal tab list\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Use \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"up and down arrows\"), \" to toggle options when focus is on a tab element in a vertical tab list\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"When the focus is on an inactive tab element in the tab list, the \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Space\"), \" or \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Enter\"), \" keys can be used to activate the tab\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"When keyboard users want to focus directly on the last tab element in the tab list:\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Mac users: \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"fn\"), \" + \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"right arrow\")), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Windows users: \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"End\")))), mdx(\"li\", {\n parentName: \"ul\"\n }, \"When keyboard users want to focus directly on the first tab element in the tab list:\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Mac users: \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"fn\"), \" + \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"left arrow\")), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Windows users: \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Home\")))), mdx(\"li\", {\n parentName: \"ul\"\n }, \"When a tab is allowed to be deleted:\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Users can use \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Delete\"), \" keys to delete tab\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"After deletion, the focus is transferred to the next element of the deleted tab element; if the deleted element has no subsequent element, it is transferred to the previous element\"))))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Content Guidelines\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Label copy needs to explain the label content accurately and clearly\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Use short, easily distinguishable labels\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"try to stay within one word\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Design Token\"), mdx(DesignToken, {\n mdxType: \"DesignToken\"\n })), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"FAQ\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Why typography with ellipses in Tabs doesn't work?\")), mdx(\"p\", {\n parentName: \"li\"\n }, \"Because when Tabs renders TabPane, the default is to render display: none. At this point these components cannot get the correct width or height values. It is recommended to enable lazyRender in or disable keepDOM.\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Why are the height or width values \\u200B\\u200Bwrong when using components such as Collapse/Collapsible/Resizable Table in Tabs?\")), mdx(\"p\", {\n parentName: \"li\"\n }, \"The reason is the same as above. In addition, if the collapse does not need animation, you can also turn off the animation effect by setting motion={false}. There is no need to get the height of the component at this point\\u3002\")))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"en-US/navigation/tabs","next":{"fields":{"slug":"zh-CN/navigation/tabs"},"id":"66acf75b-1d66-5594-8f06-5c6796a51bba","frontmatter":{"title":"Tabs 标签栏","localeCode":"zh-CN","icon":"doc-tabs","showNew":null}},"previous":{"fields":{"slug":"zh-CN/navigation/steps"},"id":"dc06f82c-9951-5346-8605-b86f38cd68ea","frontmatter":{"title":"Steps 步骤","localeCode":"zh-CN","icon":"doc-steps","showNew":null}}}},"staticQueryHashes":["1348983216898582","1477422646898582","3245198693898582","417590761898582","63159454898582"]}