{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/show/collapse","result":{"data":{"current":{"frontmatter":{"title":"Collapse","order":67,"brief":"Display content areas can be expanded or folded.","icon":"doc-accordion"},"fields":{"type":"show"},"tableOfContents":{"items":[{"url":"#demos","title":"Demos","items":[{"url":"#how-to-import","title":"How to import"},{"url":"#basic-usage","title":"Basic Usage"},{"url":"#accordion","title":"Accordion"},{"url":"#disable-panel","title":"Disable Panel"},{"url":"#hide-the-panel-icon","title":"Hide The Panel Icon"},{"url":"#custom-icon","title":"Custom Icon"},{"url":"#custom-extra-content-on-the-right-upper-corner","title":"Custom Extra Content on the Right-upper Corner"}]},{"url":"#api-reference","title":"API reference","items":[{"url":"#collapse","title":"Collapse"},{"url":"#collapsepanel","title":"Collapse.Panel"}]},{"url":"#accessibility","title":"Accessibility","items":[{"url":"#aria","title":"ARIA"}]},{"url":"#content-guidelines","title":"Content Guidelines"},{"url":"#design-tokens","title":"Design Tokens"},{"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\": 67,\n  \"category\": \"Show\",\n  \"title\": \"Collapse\",\n  \"subTitle\": \"Collapse\",\n  \"icon\": \"doc-accordion\",\n  \"brief\": \"Display content areas can be expanded or folded.\"\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  }, \"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    \"metastring\": \"import\",\n    \"import\": true\n  }, \"import { Collapse } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Basic Usage\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can expand multiple panels at the same time, and use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"defaultActiveKey\"), \" to set the panel to expand by default.\"), 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  }, \"Accordion\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"accordion\"), \" to restrict one panel only to be expanded at one time.\"), 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  }, \"Disable Panel\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"disabled\"), \" to disabled panel.\"), 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  }, \"Hide The Panel Icon\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"showArrow\"), \" to hide the panel 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 { 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  }, \"Custom Icon\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"expandIcon\"), \" to set the expanding icon and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"collapseIcon\"), \" for folded 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 { 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  }, \"Custom Extra Content on the Right-upper Corner\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"extra\"), \" to set extra content on the right-upper corner.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Only works when \", mdx(\"inlineCode\", {\n    parentName: \"strong\"\n  }, \"header\"), \" is string. If \", mdx(\"inlineCode\", {\n    parentName: \"strong\"\n  }, \"header\"), \" is a ReactNode, it will take the entire header part including extra so that you could render whatever you need.\")), 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 reference\"), 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  }, \"Properties\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Instructions\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"type\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Default\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"version\"))), 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  }, \"Accordion mode\"), 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  }, \"Controlled property, key of the currently expanded panel\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string \", \"|\", \" 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  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className of Collapse\"), 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  }, \"Click Header to expand and collapse, otherwise only respond to click arrow\"), 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  }, \"Custom collapsing icons\"), 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  }, \"Key of the expanded panel when initialized\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string \", \"|\", \" 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  }, \"expandIcon\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Custom expanding icon\"), 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  }, \"keepDOM\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Whether to keep the hidden panel in DOM tree, destroyed by default\"), 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  }, \"motion\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Toggle whether to have animation\"), 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  }, \"expandIconPosition\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Expand icon position\"), 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  }, \"lazyRender\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Used with keepDOM, when true, the component will not be rendered when mounting\"), 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  }, \"Inline CSS style\"), 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  }, \"Callback function when switching panel\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function(activeKey: string \", \"|\", \" string[], e: event)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), 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  }, \"Properties\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Instructions\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"type\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Default\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"version\"))), 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  }, \"className of Panel\"), 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  }, \"disabled\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"If true, the panel is disabled\"), 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  }, \"Custom rendering of the auxiliary content in the upper right-hand corner of each panel(only work when header is string)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), 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  }, \"header\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Panel head content\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), 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  }, \"itemKey\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Required and must be unique, used to match \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"activeKey\"), \", \", 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  }, \"-\"), 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  }, \"Animation end callback\"), 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  }, \"When reCalcKey changes, the height of children will be reset. Used for optimize dynamic content rendering.\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string \", \"|\", \" number\"), 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  }, \"showArrow\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"whether to show arrows icon\"), 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  }, \"inline CSS style\"), 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(\"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  }, \"The button on the right side of the panel header is set to \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-hidden=true\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"The interactive part of the panel header is set to the \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-owns\"), \" value corresponding to the panel content\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"The content of the panel is set with \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-hidden\"), \", and its value is automatically switched between true and false with the display of the panel content\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"The panel \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-disabled\"), \" is synchronized with the \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"disabled\"), \" property, indicating that the panel is disabled\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Content Guidelines\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The essence of the folding panel is that the card container adds the function of folding and unfolding, so the copywriting specification of the folding panel needs to be the same as the \", 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  }, \"Card copywriting specification\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Design Tokens\"), 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  }, \"Why is the data in Form cleared when using Collapse?\"), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"When Collapse is collapsed, the related DOM is destroyed and so are the fields data stored in Form. You could set \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"keepDOM=true\"), \" to keep the DOM from being destroyed.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"h5\", {\n    parentName: \"li\"\n  }, \"Collapse.Header as a whole is used as a click hot zone for folding and expanding. If a custom element (such as Input) is placed in the Header, it will cause Collapse to collapse/expand when clicked. How to avoid it?\"), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"You can prevent the event from bubbling to Collapse.Header in the onClick event callback of the custom element. If the custom element does not provide an event object, wrap a layer of div to prevent bubbling in the div onClick.\"))), 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":"en-US/show/collapse","next":{"fields":{"slug":"zh-CN/show/collapse"},"id":"a336ac9e-6dd6-52bd-998f-400724a2676c","frontmatter":{"title":"Collapse 折叠面板","localeCode":"zh-CN","icon":"doc-accordion","showNew":null}},"previous":{"fields":{"slug":"zh-CN/show/carousel"},"id":"049a2681-1c44-533f-9970-d57c5e606c43","frontmatter":{"title":"Carousel 轮播图","localeCode":"zh-CN","icon":"doc-carousel","showNew":null}}}},"staticQueryHashes":["1348983216108720","1477422646108720","3245198693108720","417590761108720","63159454108720"]}