{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/show/collapsible","result":{"data":{"current":{"frontmatter":{"title":"Collapsible 折叠","order":68,"brief":"行为组件，是一个用于展开或折叠内容的容器。","icon":"doc-collapsible"},"fields":{"type":"show"},"tableOfContents":{"items":[{"url":"#使用场景","title":"使用场景"},{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#基本用法","title":"基本用法"},{"url":"#自定义动画时间","title":"自定义动画时间"},{"url":"#嵌套使用","title":"嵌套使用"},{"url":"#自定义折叠高度","title":"自定义折叠高度"}]},{"url":"#api-参考","title":"API 参考"},{"url":"#accessibility","title":"Accessibility","items":[{"url":"#aria","title":"ARIA"}]},{"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\": 68,\n  \"category\": \"展示类\",\n  \"title\": \"Collapsible 折叠\",\n  \"icon\": \"doc-collapsible\",\n  \"brief\": \"行为组件，是一个用于展开或折叠内容的容器。\"\n};\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  }, \"\\u4F7F\\u7528\\u573A\\u666F\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Collapsible\"), \" \\u662F\\u4E00\\u4E2A\\u884C\\u4E3A\\u7EC4\\u4EF6\\uFF0C\\u9ED8\\u8BA4\\u5F00\\u542F\\u52A8\\u753B\\u6548\\u679C\\u3002\\u5B83\\u88AB\\u7528\\u4E8E Semi \\u7684\\u5404\\u79CD\\u7EC4\\u4EF6\\u4E2D\\uFF0C\\u5982\\uFF1A\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Navigation\"), \"\\uFF0C \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Collapse\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Tree\"), \"\\uFF0C \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"TreeSelect\"), \"\\uFF0C\\u4EE5\\u53CA \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Typography\"), \" \\u4E2D\\u3002\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5F53\\u4E0A\\u8FF0\\u7EC4\\u4EF6\\u4E0D\\u80FD\\u6EE1\\u8DB3\\u9700\\u6C42\\u6216\\u8005\\u9700\\u8981\\u81EA\\u5B9A\\u4E49\\u4E00\\u4E9B\\u6298\\u53E0\\u884C\\u4E3A\\u65F6\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Collapsible\"), \" \\u6765\\u5305\\u88F9\\u9700\\u8981\\u5C55\\u5F00\\u6216\\u8005\\u6298\\u53E0\\u7684\\u5185\\u5BB9\\u3002\"))), 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 { Collapsible } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u57FA\\u672C\\u7528\\u6CD5\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"isOpen\"), \" \\u6765\\u63A7\\u5236\\u5185\\u5BB9\\u7684\\u5C55\\u5F00\\u6216\\u8005\\u6298\\u53E0\\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, { useState } from 'react';\\nimport { Collapsible, Button } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const [isOpen, setOpen] = useState();\\n    const toggle = () => {\\n        setOpen(!isOpen);\\n    };\\n    const collapsed = (\\n        <ul>\\n            <li>\\n                <p>Semi Design \\u4EE5\\u5185\\u5BB9\\u4F18\\u5148\\u8FDB\\u884C\\u8BBE\\u8BA1\\u3002</p>\\n            </li>\\n            <li>\\n                <p>\\u66F4\\u5BB9\\u6613\\u5730\\u81EA\\u5B9A\\u4E49\\u4E3B\\u9898\\u3002</p>\\n            </li>\\n            <li>\\n                <p>\\u9002\\u7528\\u56FD\\u9645\\u5316\\u573A\\u666F\\u3002</p>\\n            </li>\\n            <li>\\n                <p>\\u6548\\u7387\\u573A\\u666F\\u52A0\\u5165\\u4EBA\\u6027\\u5316\\u5173\\u6000\\u3002</p>\\n            </li>\\n        </ul>\\n    );\\n    return (\\n        <div>\\n            <Button onClick={toggle}>Toggle</Button>\\n            <Collapsible isOpen={isOpen}>{collapsed}</Collapsible>\\n        </div>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u52A8\\u753B\\u65F6\\u95F4\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"duration\"), \" \\u8BBE\\u7F6E\\u52A8\\u753B\\u5C55\\u5F00\\u6216\\u8005\\u6298\\u53E0\\u7684\\u65F6\\u95F4\\uFF0C\\u4E5F\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"motion\"), \" \\u6765\\u5173\\u95ED\\u52A8\\u753B\\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, { useState } from 'react';\\nimport { Collapsible, InputNumber, Button } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const [isOpen, setOpen] = useState(false);\\n    const [duration, setDuration] = useState(250);\\n    const toggle = () => {\\n        setOpen(!isOpen);\\n    };\\n    const collapsed = (\\n        <ul>\\n            <li>\\n                <p>Semi Design \\u4EE5\\u5185\\u5BB9\\u4F18\\u5148\\u8FDB\\u884C\\u8BBE\\u8BA1\\u3002</p>\\n            </li>\\n            <li>\\n                <p>\\u66F4\\u5BB9\\u6613\\u5730\\u81EA\\u5B9A\\u4E49\\u4E3B\\u9898\\u3002</p>\\n            </li>\\n            <li>\\n                <p>\\u9002\\u7528\\u56FD\\u9645\\u5316\\u573A\\u666F\\u3002</p>\\n            </li>\\n            <li>\\n                <p>\\u6548\\u7387\\u573A\\u666F\\u52A0\\u5165\\u4EBA\\u6027\\u5316\\u5173\\u6000\\u3002</p>\\n            </li>\\n        </ul>\\n    );\\n    return (\\n        <div>\\n            <label>\\u8BBE\\u7F6E\\u52A8\\u753B\\u65F6\\u95F4\\uFF1A</label>\\n            <InputNumber min={0} defaultValue={250} style={{ width: 120 }} onChange={(val) => setDuration(val)} step={10} />\\n            <br />\\n            <Button onClick={toggle}>Toggle</Button>\\n            <Collapsible isOpen={isOpen} duration={duration}>\\n                {collapsed}\\n            </Collapsible>\\n        </div>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5D4C\\u5957\\u4F7F\\u7528\"), 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 { Collapsible, Button } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const [isOpen, setOpen] = useState(false);\\n    const [isChildOpen, setChildOpen] = useState(false);\\n\\n    const collapsed = (\\n        <ul>\\n            <li>\\n                <p>Semi Design \\u4EE5\\u5185\\u5BB9\\u4F18\\u5148\\u8FDB\\u884C\\u8BBE\\u8BA1\\u3002</p>\\n            </li>\\n            <li>\\n                <p>\\u66F4\\u5BB9\\u6613\\u5730\\u81EA\\u5B9A\\u4E49\\u4E3B\\u9898\\u3002</p>\\n            </li>\\n            <li>\\n                <p>\\u9002\\u7528\\u56FD\\u9645\\u5316\\u573A\\u666F\\u3002</p>\\n            </li>\\n            <li>\\n                <p>\\u6548\\u7387\\u573A\\u666F\\u52A0\\u5165\\u4EBA\\u6027\\u5316\\u5173\\u6000\\u3002</p>\\n            </li>\\n        </ul>\\n    );\\n    return (\\n        <div>\\n            <Button onClick={() => setOpen(!isOpen)}>Toggle</Button>\\n            <br />\\n            <Collapsible isOpen={isOpen}>\\n                <div>\\n                    <span>Semi Design\\u7684\\u8BBE\\u8BA1\\u539F\\u5219\\u5305\\u62EC\\uFF1A</span>\\n                    <Button onClick={() => setChildOpen(!isChildOpen)}>Toggle List</Button>\\n                </div>\\n                <Collapsible isOpen={isChildOpen}>{collapsed}</Collapsible>\\n            </Collapsible>\\n        </div>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u6298\\u53E0\\u9AD8\\u5EA6\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u4F7F\\u7528 collapseHeight \\u81EA\\u5B9A\\u4E49\\u6536\\u8D77\\u7684\\u9AD8\\u5EA6\"), 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, { useState } from 'react';\\nimport { Collapsible, Button } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const [isOpen, setOpen] = useState(false);\\n    const maskStyle = isOpen\\n        ? {}\\n        : {\\n            WebkitMaskImage:\\n                    'linear-gradient(to bottom, black 0%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0.2) 80%, transparent 100%)',\\n        };\\n    const collapsed = (\\n        <ul>\\n            <li>\\n                <p>Semi Design \\u4EE5\\u5185\\u5BB9\\u4F18\\u5148\\u8FDB\\u884C\\u8BBE\\u8BA1\\u3002</p>\\n            </li>\\n            <li>\\n                <p>\\u66F4\\u5BB9\\u6613\\u5730\\u81EA\\u5B9A\\u4E49\\u4E3B\\u9898\\u3002</p>\\n            </li>\\n            <li>\\n                <p>\\u9002\\u7528\\u56FD\\u9645\\u5316\\u573A\\u666F\\u3002</p>\\n            </li>\\n            <li>\\n                <p>\\u6548\\u7387\\u573A\\u666F\\u52A0\\u5165\\u4EBA\\u6027\\u5316\\u5173\\u6000\\u3002</p>\\n            </li>\\n        </ul>\\n    );\\n    const toggle = () => {\\n        setOpen(!isOpen);\\n    };\\n    const linkStyle = {\\n        position: 'absolute',\\n        left: 0,\\n        right: 0,\\n        textAlign: 'center',\\n        bottom: -10,\\n        fontWeight: 700,\\n        cursor: 'pointer',\\n    };\\n    return (\\n        <>\\n            <Button onClick={toggle}>Toggle</Button>\\n            <div style={{ position: 'relative' }}>\\n                <Collapsible isOpen={isOpen} collapseHeight={60} style={{ ...maskStyle }}>\\n                    {collapsed}\\n                </Collapsible>\\n                {isOpen ? null : (\\n                    <a onClick={toggle} style={{ ...linkStyle }}>\\n                        + Show More\\n                    </a>\\n                )}\\n            </div>\\n        </>\\n    );\\n};\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API \\u53C2\\u8003\"), 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  }, \"\\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  }, \"0.34.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"collapseHeight\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6298\\u53E0\\u9AD8\\u5EA6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1.0.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"collapseHeightAdaptive\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F53\\u5185\\u5BB9\\u9AD8\\u5EA6\\u5C0F\\u4E8E collapseHeight \\u65F6\\uFF0C\\u662F\\u5426\\u81EA\\u9002\\u5E94\\u5185\\u5BB9\\u9AD8\\u5EA6\\u3002\\u4E3A true \\u65F6\\uFF0C\\u6536\\u8D77\\u72B6\\u6001\\u9AD8\\u5EA6\\u4E3A Math.min(\\u5185\\u5BB9\\u9AD8\\u5EA6, collapseHeight)\"), 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  }, \"2.77.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"duration\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u52A8\\u753B\\u6267\\u884C\\u7684\\u65F6\\u95F4\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"250\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"fade\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u5F00\\u542F\\u6DE1\\u5165\\u6DE1\\u51FA\"), 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  }, \"2.21.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"isOpen\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u5C55\\u5F00\\u5185\\u5BB9\\u533A\\u57DF\"), 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  }, \"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  }, \"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  }, \"0.25.0\")), 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.0\")), 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  }, \"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  }, \"-\")), 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  }, \"number \", \"|\", \" string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1.5.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  }, \"\\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  }, \"0.34.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"id\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"id\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"html id string type\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"2.3.0\"))))), 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  }, \"Collapsible \\u5177\\u6709 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"id\"), \" props\\uFF0C\\u4F20\\u5165\\u7684\\u503C\\u4F1A\\u88AB\\u8BBE\\u7F6E\\u4E3A wrapper \\u5143\\u7D20\\u7684id, \\u53EF\\u4EE5\\u914D\\u5408\\u5176\\u4ED6\\u7EC4\\u4EF6\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-controls\"), \" \\u6307\\u660E\\u63A7\\u5236\\u5173\\u7CFB, \\u89C1\\u4E0B\\u65B9\\u4F7F\\u7528\\u793A\\u4F8B\\u3002\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import Collapsible from './index';\\n\\n\\n()=>{\\n    const collapseId = 'myCollapsible';\\n    const [visible, setVisible]=useState(false);\\n    return <>\\n        <Button onClick={()=>setVisible(!visible)} aria-controls={`${collapseId}`}>{visible?'hide':'show'}</Button>    \\n        <Collapsible isOpen={visible} id={collapseId}>\\n            <div>hide content</div>\\n        </Collapsible>\\n    </>;\\n};\\n\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"FAQ\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4E3A\\u4EC0\\u4E48\\u4F7F\\u7528 Collapsible \\u6CA1\\u6709\\u6B63\\u5E38\\u5C55\\u5F00?\", mdx(\"br\", {\n    parentName: \"li\"\n  }), \"\\u68C0\\u67E5 Collapsible \\u7236\\u7EA7\\u662F\\u5426\\u8BBE\\u7F6E display:none\\uFF0C\\u6B64\\u65F6\\u56E0\\u4E3A\\u65E0\\u6CD5\\u62FF\\u5230\\u8282\\u70B9\\u9AD8\\u5EA6\\uFF0C\\u4F1A\\u51FA\\u73B0\\u65E0\\u6CD5\\u5C55\\u5F00\\u7684\\u95EE\\u9898\\u3002\\u5982\\u679C\\u6CA1\\u6709\\u8BBE\\u7F6E\\uFF0C\\u53EF\\u4EE5\\u8054\\u7CFB Semi \\u5BA2\\u670D\\u770B\\u662F\\u5426\\u5B58\\u5728\\u5176\\u4ED6\\u95EE\\u9898\\u3002\"))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/show/collapsible","next":{"fields":{"slug":"en-US/show/descriptions"},"id":"3e6984c0-5495-5e92-88b5-273e78b46633","frontmatter":{"title":"Description","localeCode":"en-US","icon":"doc-descriptions","showNew":null}},"previous":{"fields":{"slug":"en-US/show/collapsible"},"id":"1b6371e3-3cbb-540e-b91b-8d41b8f676be","frontmatter":{"title":"Collapsible","localeCode":"en-US","icon":"doc-collapsible","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}