{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/show/collapse","result":{"data":{"current":{"frontmatter":{"title":"Collapse 折叠面板","order":67,"brief":"可以展开或折叠展示内容区域。","icon":"doc-accordion"},"fields":{"type":"show"},"tableOfContents":{"items":[{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#基本用法","title":"基本用法"},{"url":"#手风琴效果","title":"手风琴效果"},{"url":"#禁用面板","title":"禁用面板"},{"url":"#隐藏面板展开收起图标","title":"隐藏面板展开/收起图标"},{"url":"#自定义展开图标","title":"自定义展开图标"},{"url":"#自定义右上角辅助区域内容","title":"自定义右上角辅助区域内容"}]},{"url":"#api-参考","title":"API 参考","items":[{"url":"#collapse","title":"Collapse"},{"url":"#collapsepanel","title":"Collapse.Panel"}]},{"url":"#accessibility","title":"Accessibility","items":[{"url":"#aria","title":"ARIA"}]},{"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\": 67,\n  \"category\": \"展示类\",\n  \"title\": \"Collapse 折叠面板\",\n  \"icon\": \"doc-accordion\",\n  \"brief\": \"可以展开或折叠展示内容区域。\"\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 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 { Collapse } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u57FA\\u672C\\u7528\\u6CD5\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u540C\\u65F6\\u5C55\\u5F00\\u591A\\u4E2A\\u9762\\u677F\\uFF0C\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"defaultActiveKey\"), \" \\u8BBE\\u7F6E\\u9ED8\\u8BA4\\u5C55\\u5F00\\u7684\\u9762\\u677F\\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 { Collapse } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Collapse>\\n        <Collapse.Panel header=\\\"This is panel header 1\\\" itemKey=\\\"1\\\">\\n            <p>Hi, bytedance dance dance. This is the docsite of Semi UI. </p>\\n        </Collapse.Panel>\\n        <Collapse.Panel header=\\\"This is panel header 2\\\" itemKey=\\\"2\\\">\\n            <p>Hi, bytedance dance dance. This is the docsite of Semi UI. </p>\\n        </Collapse.Panel>\\n        <Collapse.Panel header=\\\"This is panel header 3\\\" itemKey=\\\"3\\\">\\n            <p>Hi, bytedance dance dance. This is the docsite of Semi UI. </p>\\n        </Collapse.Panel>\\n    </Collapse>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u624B\\u98CE\\u7434\\u6548\\u679C\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u901A\\u8FC7\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"accordion\"), \" \\u4F7F\\u6BCF\\u6B21\\u53EA\\u5141\\u8BB8\\u5C55\\u5F00\\u4E00\\u4E2A\\u9762\\u677F\\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 { Collapse } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Collapse accordion>\\n        <Collapse.Panel header=\\\"This is panel header 1\\\" itemKey=\\\"1\\\">\\n            <p>Hi, bytedance dance dance. This is the docsite of Semi UI. </p>\\n        </Collapse.Panel>\\n        <Collapse.Panel header=\\\"This is panel header 2\\\" itemKey=\\\"2\\\">\\n            <p>Hi, bytedance dance dance. This is the docsite of Semi UI. </p>\\n        </Collapse.Panel>\\n        <Collapse.Panel header=\\\"This is panel header 3\\\" itemKey=\\\"3\\\">\\n            <p>Hi, bytedance dance dance. This is the docsite of Semi UI. </p>\\n        </Collapse.Panel>\\n    </Collapse>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u7981\\u7528\\u9762\\u677F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u901A\\u8FC7\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"disabled\"), \" \\u7981\\u7528\\u9762\\u677F\\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 { Collapse } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Collapse accordion>\\n        <Collapse.Panel header=\\\"This is panel header 1\\\" itemKey=\\\"1\\\" disabled>\\n            <p>Hi, bytedance dance dance. This is the docsite of Semi UI. </p>\\n        </Collapse.Panel>\\n        <Collapse.Panel header=\\\"This is panel header 2\\\" itemKey=\\\"2\\\">\\n            <p>Hi, bytedance dance dance. This is the docsite of Semi UI. </p>\\n        </Collapse.Panel>\\n        <Collapse.Panel header=\\\"This is panel header 3\\\" itemKey=\\\"3\\\">\\n            <p>Hi, bytedance dance dance. This is the docsite of Semi UI. </p>\\n        </Collapse.Panel>\\n    </Collapse>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u9690\\u85CF\\u9762\\u677F\\u5C55\\u5F00/\\u6536\\u8D77\\u56FE\\u6807\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u901A\\u8FC7\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"showArrow\"), \" \\u9690\\u85CF\\u9762\\u677F\\u5C55\\u5F00/\\u6536\\u8D77\\u56FE\\u6807\\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 { Collapse } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Collapse accordion>\\n        <Collapse.Panel header=\\\"This is panel header 1\\\" itemKey=\\\"1\\\" showArrow={false}>\\n            <p>Hi, bytedance dance dance. This is the docsite of Semi UI. </p>\\n        </Collapse.Panel>\\n        <Collapse.Panel header=\\\"This is panel header 2\\\" itemKey=\\\"2\\\">\\n            <p>Hi, bytedance dance dance. This is the docsite of Semi UI. </p>\\n        </Collapse.Panel>\\n        <Collapse.Panel header=\\\"This is panel header 3\\\" itemKey=\\\"3\\\">\\n            <p>Hi, bytedance dance dance. This is the docsite of Semi UI. </p>\\n        </Collapse.Panel>\\n    </Collapse>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u5C55\\u5F00\\u56FE\\u6807\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"expandIcon\"), \" \\u8BBE\\u7F6E\\u5C55\\u5F00\\u56FE\\u6807\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"collapseIcon\"), \" \\u8BBE\\u7F6E\\u6298\\u53E0\\u56FE\\u6807\\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 { Collapse } from '@douyinfe/semi-ui';\\nimport { IconPlus, IconMinus } from '@douyinfe/semi-icons';\\n\\n() => (\\n    <Collapse expandIcon={<IconPlus />} collapseIcon={<IconMinus />}>\\n        <Collapse.Panel header=\\\"This is panel header 1\\\" itemKey=\\\"1\\\">\\n            <p>Hi, bytedance dance dance. This is the docsite of Semi UI. </p>\\n        </Collapse.Panel>\\n        <Collapse.Panel header=\\\"This is panel header 2\\\" itemKey=\\\"2\\\">\\n            <p>Hi, bytedance dance dance. This is the docsite of Semi UI. </p>\\n        </Collapse.Panel>\\n        <Collapse.Panel header=\\\"This is panel header 3\\\" itemKey=\\\"3\\\">\\n            <p>Hi, bytedance dance dance. This is the docsite of Semi UI. </p>\\n        </Collapse.Panel>\\n    </Collapse>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u53F3\\u4E0A\\u89D2\\u8F85\\u52A9\\u533A\\u57DF\\u5185\\u5BB9\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"extra\"), \" \\u8BBE\\u7F6E\\u53F3\\u4E0A\\u89D2\\u8F85\\u52A9\\u533A\\u57DF\\u5185\\u5BB9\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u4EC5\\u5728 header \\u4E3A string \\u65F6\\u751F\\u6548\\uFF0C \\u5982\\u679C header \\u4E3A ReactNode \\u4F1A\\u5305\\u542B extra \\u6240\\u5728\\u7684\\u533A\\u57DF\\uFF0C\\u53EF\\u4EE5\\u81EA\\u884C\\u6E32\\u67D3\")), 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 { Collapse, Tag } from '@douyinfe/semi-ui';\\nimport { IconCopy } from '@douyinfe/semi-icons';\\n\\n() => (\\n    <Collapse>\\n        <Collapse.Panel header=\\\"This is panel header 1\\\" itemKey=\\\"1\\\" extra=\\\"1234\\\">\\n            <p>Hi, bytedance dance dance. This is the docsite of Semi UI. </p>\\n        </Collapse.Panel>\\n        <Collapse.Panel header=\\\"This is panel header 2\\\" itemKey=\\\"2\\\" extra={<IconCopy />}>\\n            <p>Hi, bytedance dance dance. This is the docsite of Semi UI. </p>\\n        </Collapse.Panel>\\n        <Collapse.Panel\\n            header=\\\"This is panel header 3\\\"\\n            itemKey=\\\"3\\\"\\n            extra={\\n                <Tag color=\\\"violet\\\" style={{ margin: 0 }}>\\n                    {' '}\\n                    Recommended{' '}\\n                </Tag>\\n            }\\n        >\\n            <p>Hi, bytedance dance dance. This is the docsite of Semi UI. </p>\\n        </Collapse.Panel>\\n    </Collapse>\\n);\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API \\u53C2\\u8003\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Collapse\"), 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(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7248\\u672C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"accordion\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u624B\\u98CE\\u7434\\u6A21\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"false\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\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  }, \"\\u53D7\\u63A7\\u5C5E\\u6027, \\u5F53\\u524D\\u5C55\\u5F00\\u7684\\u9762\\u677F\\u7684 key\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string \", \"|\", \" string[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65E0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\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  }, \"\\u6837\\u5F0F\\u7C7B\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"''\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"clickHeaderToExpand\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u70B9\\u51FB Header \\u5C55\\u5F00\\u6536\\u8D77\\uFF0C\\u5426\\u5219\\u53EA\\u54CD\\u5E94\\u70B9\\u51FB\\u7BAD\\u5934\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"2.32.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"collapseIcon\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u6298\\u53E0\\u56FE\\u6807\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"<IconChevronDown />\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), 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\\u9762\\u677F\\u7684 key\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string \", \"|\", \" string[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65E0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"expandIcon\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u5C55\\u5F00\\u56FE\\u6807\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"<IconChevronUp />\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"expandIconPosition\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C55\\u5F00\\u56FE\\u6807\\u4F4D\\u7F6E\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"left\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"right\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"right\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), 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  }, \"\\u662F\\u5426\\u4FDD\\u7559\\u9690\\u85CF\\u7684\\u9762\\u677F DOM \\u6811\\uFF0C\\u9ED8\\u8BA4\\u9500\\u6BC1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"bool\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"false\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"motion\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u5F00\\u542F\\u52A8\\u753B\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"true\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), 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  }, \"\\u914D\\u5408 keepDOM \\u4F7F\\u7528\\uFF0C\\u4E3A true \\u65F6\\u6302\\u8F7D\\u65F6\\u4E0D\\u4F1A\\u6E32\\u67D3\\u7EC4\\u4EF6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"false\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"2.54.1\")), 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  }, \"\\u5185\\u8054 CSS \\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"{}\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), 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\\u9762\\u677F\\u7684\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function(activeKey: string \", \"|\", \" string[], e: event)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65E0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Collapse.Panel\"), 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(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7248\\u672C\"))), 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  }, \"\\u6837\\u5F0F\\u7C7B\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65E0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), 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  }, \"\\u9762\\u677F\\u662F\\u5426\\u88AB\\u7981\\u7528\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"v2.17.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"extra\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3\\u6BCF\\u4E2A\\u9762\\u677F\\u53F3\\u4E0A\\u89D2\\u7684\\u8F85\\u52A9\\u5185\\u5BB9\\uFF08\\u4EC5\\u5F53 header \\u4E3A string \\u65F6\\u751F\\u6548\\uFF09\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65E0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"header\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9762\\u677F\\u5934\\u5185\\u5BB9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65E0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), 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  }, \"\\u5FC5\\u586B\\u4E14\\u552F\\u4E00\\uFF0C\\u9009\\u4E2D\\u72B6\\u6001\\u5339\\u914D \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"activeKey\"), \"\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"defaultActiveKey\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65E0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onMotionEnd\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u52A8\\u753B\\u7ED3\\u675F\\u7684\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"2.47.0-beta.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"reCalcKey\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F53 reCalcKey \\u6539\\u53D8\\u65F6\\uFF0C\\u5C06\\u91CD\\u65B0\\u8BA1\\u7B97\\u5B50\\u8282\\u70B9\\u7684\\u9AD8\\u5EA6\\uFF0C\\u7528\\u4E8E\\u4F18\\u5316\\u52A8\\u6001\\u6E32\\u67D3\\u65F6\\u7684\\u8BA1\\u7B97\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string \", \"|\", \" number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65E0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"showArrow\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u5C55\\u793A\\u7BAD\\u5934\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"v2.17.0\")), 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  }, \"\\u5185\\u8054 CSS \\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65E0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }))))), 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  }, \"\\u9762\\u677F header \\u53F3\\u4FA7\\u6309\\u94AE \\u8BBE\\u7F6E\\u4E86 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-hidden=true\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u9762\\u677F header \\u53EF\\u4EA4\\u4E92\\u90E8\\u5206 \\u8BBE\\u7F6E\\u4E86 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-owns\"), \" \\u503C\\u4E3A\\u5BF9\\u5E94\\u9762\\u677F\\u5185\\u5BB9\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u9762\\u677F\\u5185\\u5BB9 \\u8BBE\\u7F6E\\u4E86 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-hidden\"), \" \\u968F\\u9762\\u677F\\u5185\\u5BB9\\u5C55\\u73B0\\u9690\\u85CF\\u5176\\u503C\\u5728 true \\u548C false \\u4E4B\\u95F4\\u81EA\\u52A8\\u5207\\u6362\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u9762\\u677F \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-disabled\"), \" \\u4E0E \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"disabled\"), \" \\u5C5E\\u6027\\u540C\\u6B65\\uFF0C\\u8868\\u793A\\u9762\\u677F\\u7981\\u7528\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u6587\\u6848\\u89C4\\u8303\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u6298\\u53E0\\u9762\\u677F\\u672C\\u8D28\\u662F\\u5361\\u7247\\u5BB9\\u5668\\u589E\\u52A0\\u4E86\\u6536\\u8D77\\u548C\\u5C55\\u5F00\\u7684\\u529F\\u80FD\\uFF0C\\u6240\\u4EE5\\u6298\\u53E0\\u9762\\u677F\\u7684\\u6587\\u6848\\u89C4\\u8303\\u9700\\u8981\\u548C \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/show/card#%E6%96%87%E6%A1%88%E8%A7%84%E8%8C%83\"\n  }, \"\\u5361\\u7247\\u6587\\u6848\\u89C4\\u8303\"), \" \\u4FDD\\u6301\\u4E00\\u81F4\")), 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  }, \"FAQ\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"h5\", {\n    parentName: \"li\"\n  }, \"Collapse \\u5185\\u5D4C\\u8868\\u5355\\u6536\\u8D77\\u540E\\u8868\\u5355\\u6570\\u636E\\u4F1A\\u6E05\\u7A7A ?\"), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Collapse \\u6536\\u8D77\\u4E4B\\u540E\\uFF0C\\u9ED8\\u8BA4\\u4F1A\\u9500\\u6BC1\\u76F8\\u5E94\\u7684 DOM \\u3002\\u6240\\u4EE5\\u76F8\\u5E94\\u7684 field \\u88AB\\u5378\\u8F7D\\u4E86\\uFF0C\\u6570\\u636E\\u4E5F\\u88AB\\u6E05\\u7A7A\\u3002\\u53EF\\u4EE5\\u901A\\u8FC7\\u7ED9 collapse \\u589E\\u52A0 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"keepDOM=true\"), \"\\uFF0C\\u4FDD\\u7559\\u5BF9\\u5E94\\u7684 DOM \\u8282\\u70B9\\u3002\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"h5\", {\n    parentName: \"li\"\n  }, \"Collapse \\u4E2D Typography \\u622A\\u65AD\\u903B\\u8F91\\u5931\\u6548 ?\"), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u5982\\u679C\\u5F00\\u542F\\u4E86 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"keepDOM\"), \" \\u4F1A\\u5BFC\\u81F4\\u9762\\u677F\\u6837\\u5F0F \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"display: none\"), \"\\uFF0C\\u6B64\\u65F6\\u4F1A\\u5F71\\u54CD\\u622A\\u65AD\\u957F\\u5EA6\\u7684\\u8BA1\\u7B97\\u3002\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"h5\", {\n    parentName: \"li\"\n  }, \"Collapse.Header \\u6574\\u4F53\\u4F5C\\u4E3A\\u6298\\u53E0\\u3001\\u5C55\\u5F00\\u7684\\u70B9\\u51FB\\u70ED\\u533A\\uFF0C \\u5982\\u679C\\u5728 Header \\u4E2D\\u653E\\u7F6E\\u4E86\\u81EA\\u5B9A\\u4E49\\u5143\\u7D20\\uFF08\\u4F8B\\u5982 Input\\uFF09\\uFF0C\\u70B9\\u51FB\\u65F6\\u5019\\u4F1A\\u5BFC\\u81F4 Collapse \\u6536\\u8D77/\\u5C55\\u5F00\\u3002\\u5982\\u4F55\\u907F\\u514D\\uFF1F\"), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u53EF\\u4EE5\\u5728\\u81EA\\u5B9A\\u4E49\\u5143\\u7D20\\u7684 onClick \\u4E8B\\u4EF6\\u56DE\\u8C03\\u4E2D\\uFF0C\\u963B\\u6B62\\u4E8B\\u4EF6\\u5192\\u6CE1\\u81F3 Collapse.Header \\u5373\\u53EF\\u3002\\u82E5\\u81EA\\u5B9A\\u4E49\\u5143\\u7D20\\u672A\\u63D0\\u4F9B event \\u5BF9\\u8C61\\uFF0C\\u518D\\u5305\\u88F9\\u4E00\\u5C42 div\\uFF0C\\u4E8E div onClick \\u4E2D\\u963B\\u6B62\\u5192\\u6CE1\\u4EA6\\u53EF\\u3002\"))), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import React from 'react';\\nimport { Collapse, Input } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Collapse>\\n        <Collapse.Panel\\n            header={\\n                <div style={{ display: 'inline-flex' }} onClick={e => e.stopPropagation()}>\\n                    <span>Panel header</span>\\n                    <Input />\\n                </div>\\n            }\\n            itemKey=\\\"1\\\"\\n        >\\n            <p>Hi, bytedance dance dance. This is the docsite of Semi UI. </p>\\n        </Collapse.Panel>\\n    </Collapse>\\n);\\n\"))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/show/collapse","next":{"fields":{"slug":"en-US/show/collapsible"},"id":"1b6371e3-3cbb-540e-b91b-8d41b8f676be","frontmatter":{"title":"Collapsible","localeCode":"en-US","icon":"doc-collapsible","showNew":null}},"previous":{"fields":{"slug":"en-US/show/collapse"},"id":"f346a3c7-57c3-5eed-b80e-3ae777483406","frontmatter":{"title":"Collapse","localeCode":"en-US","icon":"doc-accordion","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}