{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/navigation/tabs","result":{"data":{"current":{"frontmatter":{"title":"Tabs 标签栏","order":60,"brief":"当内容需要分组并在不同模块页面中展示，可使用 Tabs 标签栏目对不同的组/页之间进行切换","icon":"doc-tabs"},"fields":{"type":"navigation"},"tableOfContents":{"items":[{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#基本用法","title":"基本用法"},{"url":"#带图标的","title":"带图标的"},{"url":"#更多选项收入-more-展示","title":"更多选项收入 More 展示"},{"url":"#垂直的标签栏","title":"垂直的标签栏"},{"url":"#滚动折叠","title":"滚动折叠"},{"url":"#禁用","title":"禁用"},{"url":"#标签栏内容扩展","title":"标签栏内容扩展"},{"url":"#标签栏二次封装","title":"标签栏二次封装"},{"url":"#动态更新","title":"动态更新"},{"url":"#关闭","title":"关闭"}]},{"url":"#api-参考","title":"API 参考","items":[{"url":"#tab","title":"Tab"},{"url":"#tabpane","title":"TabPane"}]},{"url":"#accessibility","title":"Accessibility","items":[{"url":"#aria","title":"ARIA"},{"url":"#键盘和焦点","title":"键盘和焦点"}]},{"url":"#设计变量","title":"设计变量"},{"url":"#文案规范","title":"文案规范"},{"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\": \"zh-CN\",\n \"order\": 60,\n \"category\": \"导航类\",\n \"title\": \"Tabs 标签栏\",\n \"icon\": \"doc-tabs\",\n \"brief\": \"当内容需要分组并在不同模块页面中展示，可使用 Tabs 标签栏目对不同的组/页之间进行切换\"\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 }, \"\\u4EE3\\u7801\\u6F14\\u793A\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u5982\\u4F55\\u5F15\\u5165\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"import\",\n \"import\": true\n }, \"import { Tabs, TabPane } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u57FA\\u672C\\u7528\\u6CD5\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u6807\\u7B7E\\u680F\\u652F\\u6301\\u4E09\\u79CD\\u6837\\u5F0F\\u7684\\u663E\\u793A\\uFF1A\\u7EBF\\u6761\\u5F0F\\uFF0C\\u6309\\u94AE\\u5F0F\\uFF0C\\u5361\\u7247\\u5F0F\\uFF0C\\u659C\\u7EBF\\u5F0F\\u3002\\u9ED8\\u8BA4\\u9009\\u4E2D\\u7B2C\\u4E00\\u9879\\u3002\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"\\u6807\\u7B7E\\u9875\\u652F\\u6301\\u4E24\\u79CD\\u4F20\\u5165\\u65B9\\u5F0F\\uFF0C\\u4E24\\u8005\\u6E32\\u67D3\\u6D41\\u7A0B\\u4E0A\\u6709\\u6240\\u533A\\u522B\\uFF1A\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"tabList\"), \" \\u4F20\\u5165\\u6807\\u7B7E\\u9875\\u5BF9\\u8C61\\u7684\\u6570\\u7EC4\\uFF0C\\u5F53\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"tabList\"), \" \\u65F6\\u6BCF\\u6B21\\u53EA\\u6E32\\u67D3\\u5F53\\u524D\\u4F20\\u5165\\u7684\\u8282\\u70B9\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u6216\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"\"), \" \\u9010\\u9879\\u663E\\u5F0F\\u4F20\\u5165\\uFF0C\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"\"), \" \\u65F6\\u9ED8\\u8BA4\\u4F1A\\u6E32\\u67D3\\u6240\\u6709\\u9762\\u677F\\uFF0C\\u53EF\\u4EE5\\u901A\\u8FC7\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"keepDOM={false}\"), \" \\u53EA\\u6E32\\u67D3\\u5F53\\u524D\\u9762\\u677F\\uFF0C\\u6B64\\u65F6\\u4E0D\\u4F1A\\u6709\\u52A8\\u753B\\u6548\\u679C\\u3002\")), mdx(Notice, {\n title: \"\\u6CE8\\u610F\\u4E8B\\u9879\",\n mdxType: \"Notice\"\n }, \"1. tabList \\u4E0E TabPane Children \\u540C\\u65F6\\u4F7F\\u7528\\u65F6\\uFF0C\\u4F1A\\u4F18\\u5148\\u6E32\\u67D3\\u901A\\u8FC7 tabList \\u4F20\\u5165\\u7684\\u6570\\u636E\\u3002\\u4E0D\\u5EFA\\u8BAE\\u540C\\u65F6\\u914D\\u7F6E \", mdx(\"br\", null), \"2. \\u4F7F\\u7528 TabPane Children \\u65F6\\uFF0C TabPane \\u5FC5\\u987B\\u4E3A Tabs \\u7684\\u76F4\\u63A5\\u5B50\\u5143\\u7D20\\uFF0C\\u5426\\u5219 Tabs \\u5C06\\u65E0\\u6CD5\\u6B63\\u786E\\u6536\\u96C6\\u5B50\\u7EC4\\u4EF6\\u5982 itemKey \\u7B49\\u76F8\\u5173\\u5C5E\\u6027\"), 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\\n() => (\\n
\\n \\n \\n

\\u6587\\u6863

\\n

\\n Semi Design \\u662F\\u7531\\u6296\\u97F3\\u524D\\u7AEF\\u56E2\\u961F\\u4E0E UED\\n \\u56E2\\u961F\\u5171\\u540C\\u8BBE\\u8BA1\\u5F00\\u53D1\\u5E76\\u7EF4\\u62A4\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\u3002\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\u5305\\u542B\\u8BBE\\u8BA1\\u8BED\\u8A00\\u4EE5\\u53CA\\u4E00\\u6574\\u5957\\u53EF\\u590D\\u7528\\u7684\\u524D\\u7AEF\\u7EC4\\u4EF6\\uFF0C\\u5E2E\\u52A9\\u8BBE\\u8BA1\\u5E08\\u4E0E\\u5F00\\u53D1\\u8005\\u66F4\\u5BB9\\u6613\\u5730\\u6253\\u9020\\u9AD8\\u8D28\\u91CF\\u7684\\u3001\\u7528\\u6237\\u4F53\\u9A8C\\u4E00\\u81F4\\u7684\\u3001\\u7B26\\u5408\\u8BBE\\u8BA1\\u89C4\\u8303\\u7684\\n Web \\u5E94\\u7528\\u3002\\n

\\n

\\n \\u533A\\u522B\\u4E8E\\u5176\\u4ED6\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\u800C\\u8A00\\uFF0CSemi Design \\u4EE5\\u7528\\u6237\\u4E2D\\u5FC3\\u3001\\u5185\\u5BB9\\u4F18\\u5148\\u3001\\u8BBE\\u8BA1\\u4EBA\\u6027\\u5316\\u4E3A\\u8BBE\\u8BA1\\u7406\\u5FF5\\uFF0C\\u5177\\u6709\\u4EE5\\u4E0B\\u4F18\\u52BF\\uFF1A\\n

\\n
    \\n
  • \\n

    Semi Design \\u4EE5\\u5185\\u5BB9\\u4F18\\u5148\\u8FDB\\u884C\\u8BBE\\u8BA1\\u3002

    \\n
    • \\n
  • \\n

    \\u66F4\\u5BB9\\u6613\\u5730\\u81EA\\u5B9A\\u4E49\\u4E3B\\u9898\\u3002

    \\n
    • \\n
  • \\n

    \\u9002\\u7528\\u56FD\\u9645\\u5316\\u573A\\u666F\\u3002

    \\n
    • \\n
  • \\n

    \\u6548\\u7387\\u573A\\u666F\\u52A0\\u5165\\u4EBA\\u6027\\u5316\\u5173\\u6000\\u3002

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

\\u5FEB\\u901F\\u8D77\\u6B65

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

\\u5E2E\\u52A9

\\n

\\n Q\\uFF1A\\u6709\\u65B0\\u7EC4\\u4EF6\\u9700\\u6C42\\u3001\\u6216\\u8005\\u73B0\\u6709\\u7EC4\\u4EF6feature\\u4E0D\\u80FD\\u6EE1\\u8DB3\\u4E1A\\u52A1\\u9700\\u6C42\\uFF1F\\n

\\n

\\n \\u53F3\\u4E0A\\u89D2\\u95EE\\u9898\\u53CD\\u9988\\uFF0C\\u63D0\\u4EA4issue\\uFF0Clabel\\u9009\\u62E9Feature Request / New Component Request \\u6211\\u4EEC\\u4F1A\\u9AD8\\u4F18\\u5904\\u7406\\u8FD9\\u4E9B\\u9700\\u6C42\\u3002\\n

\\n

\\n Q\\uFF1A\\u5BF9\\u7EC4\\u4EF6\\u7684\\u4F7F\\u7528\\u6709\\u7591\\u60D1\\uFF1F\\n

\\n

\\n \\u6B22\\u8FCE\\u8FDB\\u6211\\u4EEC\\u7684\\u5BA2\\u670Dlark\\u7FA4\\u8FDB\\u884C\\u54A8\\u8BE2\\u63D0\\u95EE\\u3002\\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\\n() => (\\n \\n \\n \\u6587\\u6863\\n \\n \\n \\u5FEB\\u901F\\u8D77\\u6B65\\n \\n \\n \\u5E2E\\u52A9\\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 = [
\\u6587\\u6863
,
\\u5FEB\\u901F\\u8D77\\u6B65
,
\\u5E2E\\u52A9
];\\n const tabList = [\\n { tab: '\\u6587\\u6863', itemKey: '1' },\\n { tab: '\\u5FEB\\u901F\\u8D77\\u6B65', itemKey: '2' },\\n { tab: '\\u5E2E\\u52A9', 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 = [
\\u6587\\u6863
,
\\u5FEB\\u901F\\u8D77\\u6B65
,
\\u5E2E\\u52A9
];\\n const tabList = [\\n { tab: '\\u6587\\u6863', itemKey: '1' },\\n { tab: '\\u5FEB\\u901F\\u8D77\\u6B65', itemKey: '2' },\\n { tab: '\\u5E2E\\u52A9', 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 }, \"\\u5E26\\u56FE\\u6807\\u7684\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u6709\\u56FE\\u6807\\u7684\\u6807\\u7B7E\\u680F\\u3002\"), 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\\n() => (\\n \\n \\n \\n \\u6587\\u6863\\n \\n }\\n itemKey=\\\"1\\\"\\n >\\n \\u6587\\u6863\\n \\n \\n \\n \\u5FEB\\u901F\\u8D77\\u6B65\\n \\n }\\n itemKey=\\\"2\\\"\\n >\\n \\u5FEB\\u901F\\u8D77\\u6B65\\n \\n \\n \\n \\u5E2E\\u52A9\\n \\n }\\n itemKey=\\\"3\\\"\\n >\\n \\u5E2E\\u52A9\\n \\n \\n);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u66F4\\u591A\\u9009\\u9879\\u6536\\u5165 More \\u5C55\\u793A\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u652F\\u6301\\u5C06\\u591A\\u4F59 Tab \\u5408\\u5E76\\u4E3A \\u201D\\u66F4\\u591A\\u201C \\u4E0B\\u62C9\\u83DC\\u5355\\uFF0C\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"more\"), \" \\u4F20\\u5165\\u6570\\u5B57\\u5373\\u53EF\\uFF0C\\u6570\\u5B57\\u8868\\u793A\\u6536\\u5165\\u4E0B\\u62C9\\u83DC\\u5355\\u7684 Tab \\u6570\\u91CF\\u3002\", 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 }, \"\\u4E5F\\u652F\\u6301\\u9AD8\\u7EA7\\u914D\\u7F6E\\uFF0C\\u5411 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"more\"), \" \\u4F20\\u5165\\u5BF9\\u8C61\\uFF0C\\u5185\\u53EF\\u4F20\\u5165\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"count\"), \": \\u8868\\u793A\\u6536\\u5165\\u4E0B\\u62C9\\u83DC\\u5355\\u7684 Tab \\u6570\\u91CF\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"render\"), \": \\u81EA\\u5B9A\\u4E49 Trigger \\u7684\\u6E32\\u67D3\\u51FD\\u6570\\uFF0C\\u8FD4\\u56DE\\u7684 ReactNode \\u4F1A\\u88AB\\u6E32\\u67D3\\u4E3A\\u4E0B\\u62C9\\u83DC\\u5355\\u7684 Trigger\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"dropdownProps\"), \": \\u4F20\\u5165 DropDown Props\\uFF0C\\u4F1A\\u88AB\\u900F\\u4F20\\u5230\\u4E0B\\u62C9\\u83DC\\u5355\\uFF0C\\u5982\\u679C\\u9700\\u8981\\u81EA\\u5B9A\\u4E49\\u4E0B\\u62C9\\u83DC\\u5355\\uFF0C\\u4F7F\\u7528 dropdownProps \\u4E2D\\u7684 render \\u65B9\\u6CD5\")), 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 }, \"\\u5782\\u76F4\\u7684\\u6807\\u7B7E\\u680F\"), mdx(\"p\", {\n parentName: \"section\"\n }, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"type\"), \" \\u4E3A \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"line\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"card\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"button\"), \" \\u652F\\u6301\\u6C34\\u5E73\\u548C\\u5782\\u76F4\\u4E24\\u79CD\\u6A21\\u5F0F\\uFF0C\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"tabPosition='left|top'\"), \"\\uFF0C \\u9ED8\\u8BA4\\u4E3A \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"top\"), \"\\u3002\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"type\"), \" \\u4E3A \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"slash\"), \" \\u4EC5\\u652F\\u6301\\u6C34\\u5E73\\u6A21\\u5F0F\\uFF0C\\u65E0\\u9700\\u8BBE\\u7F6E\\u3002\"), 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, RadioGroup, Radio } 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 \\u6587\\u6863\\n \\n }\\n itemKey=\\\"1\\\"\\n >\\n
\\n

\\u6587\\u6863

\\n

\\n Semi Design \\u662F\\u7531\\u6296\\u97F3\\u524D\\u7AEF\\u56E2\\u961F\\u4E0E UED\\n \\u56E2\\u961F\\u5171\\u540C\\u8BBE\\u8BA1\\u5F00\\u53D1\\u5E76\\u7EF4\\u62A4\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\u3002\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\u5305\\u542B\\u8BBE\\u8BA1\\u8BED\\u8A00\\u4EE5\\u53CA\\u4E00\\u6574\\u5957\\u53EF\\u590D\\u7528\\u7684\\u524D\\u7AEF\\u7EC4\\u4EF6\\uFF0C\\u5E2E\\u52A9\\u8BBE\\u8BA1\\u5E08\\u4E0E\\u5F00\\u53D1\\u8005\\u66F4\\u5BB9\\u6613\\u5730\\u6253\\u9020\\u9AD8\\u8D28\\u91CF\\u7684\\u3001\\u7528\\u6237\\u4F53\\u9A8C\\u4E00\\u81F4\\u7684\\u3001\\u7B26\\u5408\\u8BBE\\u8BA1\\u89C4\\u8303\\u7684\\n Web \\u5E94\\u7528\\u3002\\n

\\n

\\n \\u533A\\u522B\\u4E8E\\u5176\\u4ED6\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\u800C\\u8A00\\uFF0CSemi Design\\n \\u4EE5\\u7528\\u6237\\u4E2D\\u5FC3\\u3001\\u5185\\u5BB9\\u4F18\\u5148\\u3001\\u8BBE\\u8BA1\\u4EBA\\u6027\\u5316\\u4E3A\\u8BBE\\u8BA1\\u7406\\u5FF5\\uFF0C\\u5177\\u6709\\u4EE5\\u4E0B\\u4F18\\u52BF\\uFF1A\\n

\\n
\\n \\n \\n \\n \\u5FEB\\u901F\\u8D77\\u6B65\\n \\n }\\n itemKey=\\\"2\\\"\\n >\\n
\\n

\\u5FEB\\u901F\\u8D77\\u6B65

\\n \\n yarn add @douyinfe/semi-ui\\n \\n
\\n \\n \\n \\n \\u5E2E\\u52A9\\n \\n }\\n itemKey=\\\"3\\\"\\n >\\n
\\n

\\u5E2E\\u52A9

\\n

\\n Q\\uFF1A\\u6709\\u65B0\\u7EC4\\u4EF6\\u9700\\u6C42\\u3001\\u6216\\u8005\\u73B0\\u6709\\u7EC4\\u4EF6feature\\u4E0D\\u80FD\\u6EE1\\u8DB3\\u4E1A\\u52A1\\u9700\\u6C42\\uFF1F\\n

\\n

\\n \\u53F3\\u4E0A\\u89D2\\u95EE\\u9898\\u53CD\\u9988\\uFF0C\\u63D0\\u4EA4issue\\uFF0Clabel\\u9009\\u62E9Feature Request / New Component Request\\n \\u6211\\u4EEC\\u4F1A\\u9AD8\\u4F18\\u5904\\u7406\\u8FD9\\u4E9B\\u9700\\u6C42\\u3002\\n

\\n

\\n Q\\uFF1A\\u5BF9\\u7EC4\\u4EF6\\u7684\\u4F7F\\u7528\\u6709\\u7591\\u60D1\\uFF1F\\n

\\n

\\n \\u6B22\\u8FCE\\u8FDB\\u6211\\u4EEC\\u7684\\u5BA2\\u670Dlark\\u7FA4\\u8FDB\\u884C\\u54A8\\u8BE2\\u63D0\\u95EE\\u3002\\n

\\n
\\n \\n \\n \\n );\\n }\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u6EDA\\u52A8\\u6298\\u53E0\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u901A\\u8FC7\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"collapsible\"), \" \\u53EF\\u4EE5\\u652F\\u6301\\u6EDA\\u52A8\\u6298\\u53E0\\uFF0C\\u76EE\\u524D\\u53EA\\u652F\\u6301 horizontal \\u6A21\\u5F0F\\u3002\"), 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(i => (\\n \\n Content of card tab {i}\\n \\n ))}\\n \\n );\\n }\\n}\\n\")), mdx(\"p\", {\n parentName: \"section\"\n }, mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u81EA\\u5B9A\\u4E49\\u6EDA\\u52A8\\u7BAD\\u5934\\u6E32\\u67D3\")), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u901A\\u8FC7 renderArrow \\u4FEE\\u6539\\u6EDA\\u52A8\\u6298\\u53E0\\u6A21\\u5F0F\\u4E0B\\uFF0C\\u5DE6\\u53F3\\u5207\\u6362\\u7BAD\\u5934\\u7684\\u6E32\\u67D3\\uFF0C\\u5165\\u53C2\\u4E3A\\u6EA2\\u51FA\\u7684 items \\u548C \\u4F4D\\u7F6E, \\u70B9\\u51FB\\u5904\\u7406\\u51FD\\u6570\\uFF0C\\u4EE5\\u53CA defaultNode\\u3002\"), mdx(\"p\", {\n parentName: \"section\"\n }, mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u6CE8\"), \"\\uFF1ArenderArrow \\u7684\\u524D\\u4E09\\u4E2A\\u53C2\\u6570\\u81EA 2.61.0 \\u652F\\u6301\\uFF0CdefaultNode \\u81EA 2.66.0 \\u652F\\u6301\\u3002\"), 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, defaultNode) => {\\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 }, \"\\u4FEE\\u6539\\u5207\\u6362\\u7BAD\\u5934\\u7684\\u6E32\\u67D3\\u4F4D\\u7F6E\")), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"arrowPosition\"), \" \\u6765\\u4FEE\\u6539\\u6EA2\\u51FA\\u6307\\u793A\\u5668\\u7684\\u4F4D\\u7F6E\\uFF0C\\u53EF\\u9009 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"start\"), \" \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"both\"), \" \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"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 }, \"\\u7981\\u7528\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u7981\\u7528\\u6807\\u7B7E\\u680F\\u4E2D\\u7684\\u67D0\\u4E00\\u4E2A\\u6807\\u7B7E\\u9875\\u3002\"), 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 \\u6587\\u6863\\n \\n \\n \\u5FEB\\u901F\\u8D77\\u6B65\\n \\n \\n \\u5E2E\\u52A9\\n \\n \\n );\\n }\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u6807\\u7B7E\\u680F\\u5185\\u5BB9\\u6269\\u5C55\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u4F20\\u5165 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"tabBarExtraContent\"), \" \\u5C5E\\u6027\\u53EF\\u4EE5\\u5728\\u6807\\u7B7E\\u680F\\u53F3\\u4FA7\\u6DFB\\u52A0\\u9644\\u52A0\\u64CD\\u4F5C\\u3002\"), 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\\n() => (\\n {\\n alert('you have clicked me!');\\n }}\\n >\\n Extra Action\\n \\n }\\n >\\n \\n \\u6587\\u6863\\n \\n \\n \\u5FEB\\u901F\\u8D77\\u6B65\\n \\n \\n \\u5E2E\\u52A9\\n \\n \\n);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u6807\\u7B7E\\u680F\\u4E8C\\u6B21\\u5C01\\u88C5\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u4F20\\u5165 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"renderTabBar\"), \" \\u51FD\\u6570\\u53EF\\u5BF9\\u6807\\u7B7E\\u680F\\u8FDB\\u884C\\u4E8C\\u6B21\\u5C01\\u88C5\\u3002\"), 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\\n() => (\\n {\\n return (\\n
\\n \\u8FD9\\u662F\\u4E8C\\u6B21\\u5C01\\u88C5\\u7684Tab Bar\\uFF0C\\u5F53\\u524DActiveKey\\uFF1A{tabBarProps.activeKey}\\n \\n
\\n );\\n }}\\n >\\n \\n \\u6587\\u6863\\n \\n \\n \\u5FEB\\u901F\\u8D77\\u6B65\\n \\n \\n \\u5E2E\\u52A9\\n \\n \\n);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u52A8\\u6001\\u66F4\\u65B0\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u901A\\u8FC7\\u7ED1\\u5B9A\\u4E8B\\u4EF6\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u6807\\u7B7E\\u680F\\u52A8\\u6001\\u66F4\\u65B0\\u3002\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true hideInDSM\",\n \"live\": \"true\",\n \"hideInDSM\": 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 }, \"\\u5173\\u95ED\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u5173\\u95ED\\u6807\\u7B7E\\u680F\\u4E2D\\u7684\\u67D0\\u4E00\\u4E2A\\u6807\\u7B7E\\u9875\\u3002\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"\\u53EA\\u6709\\u5361\\u7247\\u6837\\u5F0F\\u7684\\u9875\\u7B7E\\u652F\\u6301\\u5173\\u95ED\\u9009\\u9879\\u3002\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"closable={true}\"), \" \\u6765\\u5F00\\u542F\\u3002\"), 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: '\\u6587\\u6863', itemKey: '1', text: '\\u6587\\u6863', closable: true },\\n { tab: '\\u5FEB\\u901F\\u8D77\\u6B65', itemKey: '2', text: '\\u5FEB\\u901F\\u8D77\\u6B65', closable: true },\\n { tab: '\\u5E2E\\u52A9', itemKey: '3', text: '\\u5E2E\\u52A9' },\\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 \\u53C2\\u8003\"), 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 }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u9ED8\\u8BA4\\u503C\"))), 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 }, \"\\u5F53\\u524D\\u6FC0\\u6D3B\\u7684 tab \\u9875\\u7684 itemKey \\u503C\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), 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 }, \"arrowPosition\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u6298\\u53E0\\u6A21\\u5F0F\\u4E0B\\uFF0C\\u5DE6\\u53F3\\u5207\\u6362\\u7BAD\\u5934\\u6E32\\u67D3\\u4F4D\\u7F6E \", 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 }, \"className\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u7C7B\\u540D\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), 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 }, \"collapsible\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u6298\\u53E0\\u7684 Tabs\\uFF0C\", 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 }, \"\\u7528\\u4E8E\\u5728\\u6298\\u53E0\\u6A21\\u5F0F\\u4E0B\\u900F\\u4F20\\u53C2\\u6570\\u5230\\u4E0B\\u62C9\\u83DC\\u5355\\u7684 Dropdown \\u7EC4\\u4EF6\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"{ start: DropdownProps, end: DropdownProps }\"), 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 }, \"visibleTabsStyle\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u6574\\u4F53\\u6EDA\\u52A8\\u533A\\u57DF 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 }, \"\\u65E0\")), 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 }, \"\\u5185\\u5BB9\\u533A\\u57DF\\u5916\\u5C42\\u6837\\u5F0F\\u5BF9\\u8C61\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"CSSProperties\"), 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 }, \"defaultActiveKey\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u521D\\u59CB\\u5316\\u9009\\u4E2D\\u7684 tab \\u9875\\u7684 key \\u503C\"), 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 }, \"\\u4F7F\\u7528 TabPane \\u5199\\u6CD5\\u65F6\\u662F\\u5426\\u6E32\\u67D3\\u9690\\u85CF\\u9762\\u677F\\u7684 DOM \\u7ED3\\u6784\"), 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 }, \"\\u61D2\\u6E32\\u67D3\\uFF0C\\u4EC5\\u5F53\\u9762\\u677F\\u6FC0\\u6D3B\\u8FC7\\u624D\\u88AB\\u6E32\\u67D3\\u5728 DOM \\u6811\\u4E2D\"), 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 }, \"\\u5C06\\u4E00\\u90E8\\u5206 Tab \\u6E32\\u67D3\\u5230\\u4E0B\\u62C9\\u83DC\\u5355\\u4E2D \", 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 }, \"\\u7528\\u4E8E\\u4E8C\\u6B21\\u5C01\\u88C5\\u6807\\u7B7E\\u680F\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(tabBarProps: object, defaultTabBar: React.ComponentType) => ReactNode\"), 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 }, \"renderArrow\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u6298\\u53E0\\u6EDA\\u52A8\\u6A21\\u5F0F\\u4E0B\\uFF0C\\u81EA\\u5B9A\\u4E49\\u5DE6\\u53F3\\u5207\\u6362\\u7BAD\\u5934\\u5982\\u4F55\\u6E32\\u67D3\\uFF0C\\u9ED8\\u8BA4\\u4E3A\\u7BAD\\u5934\\u6309\\u94AE hover \\u65F6\\u5C55\\u5F00\\u6EA2\\u51FA\\u9879\\u3002\\u524D\\u4E09\\u4E2A\\u53C2\\u6570\\u81EA \", mdx(\"strong\", {\n parentName: \"td\"\n }, \">=2.61.0\"), \" \\u652F\\u6301\\uFF0CdefaultNode \\u53C2\\u6570\\u81EA \", mdx(\"strong\", {\n parentName: \"td\"\n }, \">=2.66.0\"), \" \\u652F\\u6301\"), 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 }, \"\\u65E0\")), 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 }, \"\\u6307\\u793A\\u6D4F\\u89C8\\u5668\\u662F\\u5426\\u5E94\\u6EDA\\u52A8\\u6587\\u6863\\u4EE5\\u663E\\u793A\\u65B0\\u805A\\u7126\\u7684\\u5143\\u7D20\\uFF0C\\u4F5C\\u7528\\u4E8E\\u7EC4\\u4EF6\\u5185\\u7684 focus \\u65B9\\u6CD5\"), 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 }, \"\\u662F\\u5426\\u5C06\\u6536\\u8D77\\u7684 Tab \\u5C55\\u793A\\u5728\\u4E0B\\u62C9\\u83DC\\u5355\\u4E2D\\uFF08\\u4EC5\\u5F53 collapsible \\u4E3A true \\u65F6\\u751F\\u6548\\uFF09 \", 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 }, \"\\u5927\\u5C0F\\uFF0C\\u63D0\\u4F9B \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"large\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"medium\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"small\"), \" \\u4E09\\u79CD\\u7C7B\\u578B\\uFF0C\", mdx(\"strong\", {\n parentName: \"td\"\n }, \">=1.11.0\\uFF0C\\u76EE\\u524D\\u4EC5\\u652F\\u6301\\u7EBF\\u6027 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 }, \"\\u6837\\u5F0F\\u5BF9\\u8C61\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"CSSProperties\"), 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 }, \"tabBarExtraContent\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u7528\\u4E8E\\u6269\\u5C55\\u6807\\u7B7E\\u680F\\u7684\\u5185\\u5BB9\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"ReactNode\"), 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 }, \"tabList\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u6807\\u7B7E\\u9875\\u5BF9\\u8C61\\u7EC4\\u6210\\u7684\\u6570\\u7EC4\\uFF0C\\u8BE5\\u5BF9\\u8C61\\u652F\\u6301 itemKey\\uFF08\\u5BF9\\u5E94 activeKey\\uFF0Ctab\\uFF08\\u6807\\u7B7E\\u9875\\u6587\\u5B57\\uFF09\\u53CA icon\\uFF08\\u6807\\u7B7E\\u9875\\u56FE\\u6807\\uFF09\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"TabPane[]\"), 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 }, \"tabPaneMotion\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u662F\\u5426\\u4F7F\\u7528\\u52A8\\u753B\\u5207\\u6362 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 }, \"tab \\u7684\\u4F4D\\u7F6E\\uFF0C\\u652F\\u6301\", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"top\"), \"(\\u6C34\\u5E73), \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"left\"), \"(\\u5782\\u76F4)\"), 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 }, \"\\u6807\\u7B7E\\u680F\\u7684\\u6837\\u5F0F\\uFF0C\\u53EF\\u9009\", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"line\"), \"\\u3001 \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"card\"), \"\\u3001 \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"button\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"slash\")), 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 }, \"\\u5207\\u6362 tab \\u9875\\u65F6\\u7684\\u56DE\\u8C03\\u51FD\\u6570\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"function(activeKey: string)\"), 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 }, \"onTabClick\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u5355\\u51FB\\u4E8B\\u4EF6\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"function(key: string, e: Event)\"), 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 }, \"onTabClose\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u5173\\u95ED tab \\u9875\\u65F6\\u7684\\u56DE\\u8C03\\u51FD\\u6570 \", 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 }, \"\\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 }, \"\\u6298\\u53E0\\u6EDA\\u52A8\\u6A21\\u5F0F\\u4E0B\\uFF0C\\u6EA2\\u51FA\\u9879\\u5207\\u6362\\u53D8\\u5316\\u56DE\\u8C03 \", 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 }, \"\\u65E0\")))), 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 }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u9ED8\\u8BA4\\u503C\"))), 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 }, \"\\u7C7B\\u540D\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), 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 }, \"disabled\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u6807\\u7B7E\\u9875\\u680F\\u662F\\u5426\\u7981\\u7528\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), 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 }, \"icon\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u6807\\u7B7E\\u9875\\u680F icon\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"ReactNode\"), 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 }, \"itemKey\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u5BF9\\u5E94 \", 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 }, \"\\u65E0\")), 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 }, \"\\u6837\\u5F0F\\u5BF9\\u8C61\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"CSSProperties\"), 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 }, \"tab\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u6807\\u7B7E\\u9875\\u680F\\u663E\\u793A\\u6587\\u5B57\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"ReactNode\"), 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 }, \"closable\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u5141\\u8BB8\\u5173\\u95ED 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 }, \"\\u5173\\u4E8E role\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"TabBar \\u5BF9\\u5E94\\u7684 role \\u4E3A \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"tablist\")), mdx(\"li\", {\n parentName: \"ul\"\n }, \"TabBar \\u4E2D\\u7684 Tab \\u5BF9\\u5E94\\u7684 role \\u4E3A \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"tab\")), mdx(\"li\", {\n parentName: \"ul\"\n }, \"TabPane \\u5BF9\\u5E94\\u7684 role \\u4E3A \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"tabpanel\")))), mdx(\"li\", {\n parentName: \"ul\"\n }, \"aria-orientation: \\u8868\\u660E TabBar \\u7684\\u65B9\\u5411\\uFF0C\\u6709 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"vertical\"), \" \\u548C \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"horizontal\"), \" \\u4E24\\u79CD\\u3002\\u5F53\\u4F20\\u5165 tabPosition \\u4E3A left \\u65F6, aria-orientation \\u4F1A\\u88AB\\u8BBE\\u7F6E\\u4E3A \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"vertical\"), \"\\uFF0CtabPosition \\u4E3A top \\u65F6\\uFF0C\\u8BBE\\u7F6E\\u4E3A \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"horizontal\")), mdx(\"li\", {\n parentName: \"ul\"\n }, \"aria-disabled: \\u5F53 TabPane \\u8BBE\\u7F6E\\u4E3A disabled \\u65F6\\uFF0C\\u5BF9\\u5E94 Tab \\u7684 aria-disabled \\u4F1A\\u88AB\\u8BBE\\u7F6E\\u4E3A true\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"aria-selected: \\u8868\\u660E Tab \\u662F\\u5426\\u88AB\\u9009\\u4E2D\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"aria-controls: \\u6307\\u5411 Tab \\u6807\\u7B7E\\u6240\\u63A7\\u5236\\u7684 TabPane\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"aria-labelledby: \\u6307\\u5411\\u8BBE\\u7F6E TabPane \\u6807\\u7B7E\\u7684\\u5143\\u7D20\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u952E\\u76D8\\u548C\\u7126\\u70B9\"), 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 }, \"\\u9009\\u9879\\u5361\\u53EF\\u4EE5\\u88AB\\u83B7\\u53D6\\u5230\\u7126\\u70B9\\uFF0C\\u4F46\\u7981\\u7528\\u7684\\u9009\\u9879\\u5361\\u9664\\u5916\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u952E\\u76D8\\u7528\\u6237\\u53EF\\u4EE5\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Tab\"), \" \\u952E\\uFF0C\\u5C06\\u7126\\u70B9\\u79FB\\u52A8\\u5230\\u5DF2\\u88AB\\u9009\\u62E9\\u7684\\u9009\\u9879\\u5361\\u5143\\u7D20\\u7684\\u9009\\u9879\\u5361\\u9762\\u677F\\u4E0A\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u5F53\\u7126\\u70B9\\u4F4D\\u4E8E\\u6C34\\u5E73\\u9009\\u9879\\u5361\\u5217\\u8868\\u4E2D\\u7684\\u9009\\u9879\\u5361\\u5143\\u7D20\\u4E0A\\u65F6\\uFF0C\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"\\u5DE6\\u53F3\\u7BAD\\u5934\"), \" \\u6765\\u5207\\u6362\\u9009\\u9879\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u5F53\\u7126\\u70B9\\u4F4D\\u4E8E\\u5782\\u76F4\\u9009\\u9879\\u5361\\u5217\\u8868\\u4E2D\\u7684\\u9009\\u9879\\u5361\\u5143\\u7D20\\u4E0A\\u65F6\\uFF0C\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"\\u4E0A\\u4E0B\\u7BAD\\u5934\"), \" \\u6765\\u5207\\u6362\\u9009\\u9879\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u5F53\\u7126\\u70B9\\u4F4D\\u4E8E\\u9009\\u9879\\u5361\\u5217\\u8868\\u4E2D\\u7684\\u672A\\u88AB\\u6FC0\\u6D3B\\u7684\\u9009\\u9879\\u5361\\u5143\\u7D20\\u4E0A\\u65F6\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Space\"), \" \\u6216 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Enter\"), \" \\u952E\\u6765\\u6FC0\\u6D3B\\u8BE5\\u9009\\u9879\\u5361\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u5F53\\u952E\\u76D8\\u7528\\u6237\\u60F3\\u8981\\u76F4\\u63A5\\u5C06\\u7126\\u70B9\\u805A\\u7126\\u5230\\u9009\\u9879\\u5361\\u5217\\u8868\\u4E2D\\u7684\\u6700\\u540E\\u4E00\\u4E2A\\u9009\\u9879\\u5361\\u5143\\u7D20\\u65F6\\uFF1A\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Mac \\u7528\\u6237\\uFF1A\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"fn\"), \" + \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"\\u53F3\\u7BAD\\u5934\")), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Windows \\u7528\\u6237\\uFF1A\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"End\")))), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u5F53\\u952E\\u76D8\\u7528\\u6237\\u60F3\\u8981\\u76F4\\u63A5\\u5C06\\u7126\\u70B9\\u805A\\u7126\\u5230\\u9009\\u9879\\u5361\\u5217\\u8868\\u4E2D\\u7684\\u7B2C\\u4E00\\u4E2A\\u9009\\u9879\\u5361\\u5143\\u7D20\\u65F6\\uFF1A\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Mac \\u7528\\u6237\\uFF1A\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"fn\"), \" + \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"\\u5DE6\\u7BAD\\u5934\")), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Windows \\u7528\\u6237\\uFF1A\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Home\")))), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u5F53\\u9009\\u9879\\u5361\\u5141\\u8BB8\\u88AB\\u5220\\u9664\\u65F6\\uFF1A\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u7528\\u6237\\u53EF\\u4EE5\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Delete\"), \" \\u952E\\u5220\\u9664\\u9009\\u9879\\u5361\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u5220\\u9664\\u540E\\uFF0C\\u7126\\u70B9\\u8F6C\\u79FB\\u5230\\u88AB\\u5220\\u9664\\u9009\\u9879\\u5361\\u5143\\u7D20\\u7684\\u540E\\u4E00\\u4E2A\\u5143\\u7D20\\u4E0A\\uFF1B\\u82E5\\u88AB\\u5220\\u9664\\u5143\\u7D20\\u65E0\\u540E\\u4E00\\u4E2A\\u5143\\u7D20\\u5219\\u8F6C\\u79FB\\u5230\\u524D\\u4E00\\u4E2A\\u5143\\u7D20\\u4E0A\"))))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"\\u8BBE\\u8BA1\\u53D8\\u91CF\"), mdx(DesignToken, {\n mdxType: \"DesignToken\"\n })), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"\\u6587\\u6848\\u89C4\\u8303\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u6807\\u7B7E\\u6587\\u6848\\u9700\\u8981\\u51C6\\u786E\\u6E05\\u6670\\u5730\\u89E3\\u91CA\\u6807\\u7B7E\\u5185\\u5BB9\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u7528\\u7B80\\u77ED\\u7684\\uFF0C\\u6613\\u533A\\u5206\\u7684\\u6807\\u7B7E\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u5C3D\\u91CF\\u4FDD\\u6301\\u5728\\u4E00\\u4E2A\\u8BCD\\u4EE5\\u5185\"))), 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 }, \"\\u4E3A\\u4EC0\\u4E48\\u5728 Tabs \\u4E2D\\u4F7F\\u7528 Typography \\u7684\\u7701\\u7565 ellipsis \\u5931\\u6548\\uFF1F\")), mdx(\"p\", {\n parentName: \"li\"\n }, \"\\u56E0\\u4E3A Tabs \\u6E32\\u67D3 TabPane \\u65F6\\uFF0C\\u9ED8\\u8BA4\\u662F\\u5168\\u90E8\\u6E32\\u67D3 display: none\\u3002\\u6B64\\u65F6\\u8FD9\\u4E9B\\u7EC4\\u4EF6\\u65E0\\u6CD5\\u83B7\\u53D6\\u5230\\u6B63\\u786E\\u7684\\u5BBD\\u5EA6\\u6216\\u9AD8\\u5EA6\\u503C\\u3002\\u5EFA\\u8BAE\\u5F00\\u542F lazyRender\\uFF0C\\u6216\\u8005\\u5173\\u95ED keepDOM\\u3002\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u4E3A\\u4EC0\\u4E48\\u5728 Tabs \\u4E2D\\u4F7F\\u7528 Collapse/Collapsible/Resizable Table \\u7B49\\u7EC4\\u4EF6\\u7684\\u9AD8\\u5EA6\\u6216\\u5BBD\\u5EA6\\u503C\\u4E0D\\u5BF9\\uFF1F\")), mdx(\"p\", {\n parentName: \"li\"\n }, \"\\u539F\\u56E0\\u540C\\u4E0A\\uFF0C\\u53E6\\u5916\\u5982\\u679C collapse \\u4E0D\\u9700\\u8981\\u52A8\\u753B\\uFF0C\\u4E5F\\u53EF\\u4EE5\\u901A\\u8FC7\\u8BBE\\u7F6E motion={false} \\u6765\\u5173\\u95ED\\u52A8\\u753B\\u6548\\u679C\\u3002\\u6B64\\u65F6\\u65E0\\u9700\\u83B7\\u53D6\\u7EC4\\u4EF6\\u7684\\u9AD8\\u5EA6\\u3002\")))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/navigation/tabs","next":{"fields":{"slug":"en-US/navigation/tree"},"id":"0f65838e-a403-558e-bc69-673f1acc565a","frontmatter":{"title":"Tree","localeCode":"en-US","icon":"doc-tree","showNew":null}},"previous":{"fields":{"slug":"en-US/navigation/tabs"},"id":"03fda42d-7c01-57b2-83e8-fe8c72287c10","frontmatter":{"title":"Tabs","localeCode":"en-US","icon":"doc-tabs","showNew":null}}}},"staticQueryHashes":["1348983216108720","1477422646108720","3245198693108720","417590761108720","63159454108720"]}