@fle-ui/next 1.0.0-alpha.12 → 1.0.0-alpha.13

package/docs-dist/components__layout__layout.md.js

@@ -1 +1,1220 @@
-(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([[37],{"+TR4":function(e,t,a){"use strict";a.r(t);var n=a("q1tI"),l=a.n(n),r=a("dEAq"),c=a("Zxc8"),o=a("H1Ra"),u=a("JjdP"),i=l.a.memo(u["default"]["layout-basic"].component),d=l.a.memo(u["default"]["layout-top"].component),m=l.a.memo(u["default"]["layout-topside2"].component),s=l.a.memo(u["default"]["layout-topside"].component),E=l.a.memo(u["default"]["layout-side"].component),p=l.a.memo(u["default"]["layout-customtrigger"].component),f=l.a.memo(u["default"]["layout-responsive"].component),h=l.a.memo(u["default"]["layout-fixed"].component),b=l.a.memo(u["default"]["layout-fixedsider"].component);t["default"]=e=>(l.a.useEffect((()=>{var t;null!==e&&void 0!==e&&null!==(t=e.location)&&void 0!==t&&t.hash&&r["AnchorLink"].scrollToAnchor(decodeURIComponent(e.location.hash.slice(1)))}),[]),l.a.createElement(l.a.Fragment,null,l.a.createElement(l.a.Fragment,null,l.a.createElement("div",{className:"markdown"},l.a.createElement("h1",{id:"layout-\u5e03\u5c40"},l.a.createElement(r["AnchorLink"],{to:"#layout-\u5e03\u5c40","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"Layout \u5e03\u5c40"),l.a.createElement("p",null,"\u534f\u52a9\u8fdb\u884c\u9875\u9762\u7ea7\u6574\u4f53\u5e03\u5c40\u3002"),l.a.createElement("h2",{id:"\u8bbe\u8ba1\u89c4\u5219"},l.a.createElement(r["AnchorLink"],{to:"#\u8bbe\u8ba1\u89c4\u5219","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u8bbe\u8ba1\u89c4\u5219"),l.a.createElement("h3",{id:"\u5c3a\u5bf8"},l.a.createElement(r["AnchorLink"],{to:"#\u5c3a\u5bf8","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u5c3a\u5bf8"),l.a.createElement("p",null,"\u4e00\u7ea7\u5bfc\u822a\u9879\u504f\u5de6\u9760\u8fd1 logo \u653e\u7f6e\uff0c\u8f85\u52a9\u83dc\u5355\u504f\u53f3\u653e\u7f6e\u3002"),l.a.createElement("ul",null,l.a.createElement("li",null,"\u9876\u90e8\u5bfc\u822a\uff08\u5927\u90e8\u5206\u7cfb\u7edf\uff09\uff1a\u4e00\u7ea7\u5bfc\u822a\u9ad8\u5ea6 ",l.a.createElement("code",null,"64px"),"\uff0c\u4e8c\u7ea7\u5bfc\u822a ",l.a.createElement("code",null,"48px"),"\u3002"),l.a.createElement("li",null,"\u9876\u90e8\u5bfc\u822a\uff08\u5c55\u793a\u7c7b\u9875\u9762\uff09\uff1a\u4e00\u7ea7\u5bfc\u822a\u9ad8\u5ea6 ",l.a.createElement("code",null,"80px"),"\uff0c\u4e8c\u7ea7\u5bfc\u822a ",l.a.createElement("code",null,"56px"),"\u3002"),l.a.createElement("li",null,"\u9876\u90e8\u5bfc\u822a\u9ad8\u5ea6\u7684\u8303\u56f4\u8ba1\u7b97\u516c\u5f0f\u4e3a\uff1a",l.a.createElement("code",null,"48+8n"),"\u3002"),l.a.createElement("li",null,"\u4fa7\u8fb9\u5bfc\u822a\u5bbd\u5ea6\u7684\u8303\u56f4\u8ba1\u7b97\u516c\u5f0f\uff1a",l.a.createElement("code",null,"200+8n"),"\u3002")),l.a.createElement("h3",{id:"\u4ea4\u4e92"},l.a.createElement(r["AnchorLink"],{to:"#\u4ea4\u4e92","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u4ea4\u4e92"),l.a.createElement("ul",null,l.a.createElement("li",null,"\u4e00\u7ea7\u5bfc\u822a\u548c\u672b\u7ea7\u7684\u5bfc\u822a\u9700\u8981\u5728\u53ef\u89c6\u5316\u7684\u5c42\u9762\u88ab\u5f3a\u8c03\u51fa\u6765\uff1b"),l.a.createElement("li",null,"\u5f53\u524d\u9879\u5e94\u8be5\u5728\u5448\u73b0\u4e0a\u4f18\u5148\u7ea7\u6700\u9ad8\uff1b"),l.a.createElement("li",null,"\u5f53\u5bfc\u822a\u6536\u8d77\u7684\u65f6\u5019\uff0c\u5f53\u524d\u9879\u7684\u6837\u5f0f\u81ea\u52a8\u8d4b\u4e88\u7ed9\u5b83\u7684\u4e0a\u4e00\u4e2a\u5c42\u7ea7\uff1b"),l.a.createElement("li",null,"\u5de6\u4fa7\u5bfc\u822a\u680f\u7684\u6536\u653e\u4ea4\u4e92\u540c\u65f6\u652f\u6301\u624b\u98ce\u7434\u548c\u5168\u5c55\u5f00\u7684\u6837\u5f0f\uff0c\u6839\u636e\u4e1a\u52a1\u7684\u8981\u6c42\u8fdb\u884c\u9002\u5f53\u7684\u9009\u62e9\u3002")),l.a.createElement("h3",{id:"\u89c6\u89c9"},l.a.createElement(r["AnchorLink"],{to:"#\u89c6\u89c9","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u89c6\u89c9"),l.a.createElement("p",null,"\u5bfc\u822a\u6837\u5f0f\u4e0a\u9700\u8981\u6839\u636e\u4fe1\u606f\u5c42\u7ea7\u5408\u7406\u7684\u9009\u62e9\u6837\u5f0f\uff1a"),l.a.createElement("ul",null,l.a.createElement("li",null,l.a.createElement("p",null,l.a.createElement("strong",null,"\u5927\u8272\u5757\u5f3a\u8c03")),l.a.createElement("p",null,"\u5efa\u8bae\u7528\u4e8e\u5e95\u8272\u4e3a\u6df1\u8272\u7cfb\u65f6\uff0c\u5f53\u524d\u9875\u9762\u7236\u7ea7\u7684\u5bfc\u822a\u9879\u3002")),l.a.createElement("li",null,l.a.createElement("p",null,l.a.createElement("strong",null,"\u9ad8\u4eae\u706b\u67f4\u68cd")),l.a.createElement("p",null,"\u5f53\u5bfc\u822a\u680f\u5e95\u8272\u4e3a\u6d45\u8272\u7cfb\u65f6\u4f7f\u7528\uff0c\u53ef\u7528\u4e8e\u5f53\u524d\u9875\u9762\u5bf9\u5e94\u5bfc\u822a\u9879\uff0c\u5efa\u8bae\u5c3d\u91cf\u5728\u5bfc\u822a\u8def\u5f84\u7684\u6700\u7ec8\u9879\u4f7f\u7528\u3002")),l.a.createElement("li",null,l.a.createElement("p",null,l.a.createElement("strong",null,"\u5b57\u4f53\u9ad8\u4eae\u53d8\u8272")),l.a.createElement("p",null,"\u4ece\u53ef\u89c6\u5316\u5c42\u9762\uff0c\u5b57\u4f53\u9ad8\u4eae\u7684\u89c6\u89c9\u5f3a\u5316\u529b\u5ea6\u4f4e\u4e8e\u5927\u8272\u5757\uff0c\u901a\u5e38\u5728\u5f53\u524d\u9879\u7684\u4e0a\u4e00\u7ea7\u4f7f\u7528\u3002")),l.a.createElement("li",null,l.a.createElement("p",null,l.a.createElement("strong",null,"\u5b57\u4f53\u653e\u5927")),l.a.createElement("p",null,l.a.createElement("code",null,"12px"),"\u3001",l.a.createElement("code",null,"14px")," \u662f\u5bfc\u822a\u7684\u6807\u51c6\u5b57\u53f7\uff0c14 \u53f7\u5b57\u4f53\u7528\u5728\u4e00\u3001\u4e8c\u7ea7\u5bfc\u822a\u4e2d\u3002\u5b57\u53f7\u53ef\u4ee5\u8003\u8651\u5bfc\u822a\u9879\u7684\u7b49\u7ea7\u505a\u76f8\u5e94\u9009\u62e9\u3002"))),l.a.createElement("h2",{id:"\u7ec4\u4ef6\u6982\u8ff0"},l.a.createElement(r["AnchorLink"],{to:"#\u7ec4\u4ef6\u6982\u8ff0","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u7ec4\u4ef6\u6982\u8ff0"),l.a.createElement("ul",null,l.a.createElement("li",null,l.a.createElement("code",null,"Layout"),"\uff1a\u5e03\u5c40\u5bb9\u5668\uff0c\u5176\u4e0b\u53ef\u5d4c\u5957 ",l.a.createElement("code",null,"Header")," ",l.a.createElement("code",null,"Sider")," ",l.a.createElement("code",null,"Content")," ",l.a.createElement("code",null,"Footer")," \u6216 ",l.a.createElement("code",null,"Layout")," \u672c\u8eab\uff0c\u53ef\u4ee5\u653e\u5728\u4efb\u4f55\u7236\u5bb9\u5668\u4e2d\u3002"),l.a.createElement("li",null,l.a.createElement("code",null,"Header"),"\uff1a\u9876\u90e8\u5e03\u5c40\uff0c\u81ea\u5e26\u9ed8\u8ba4\u6837\u5f0f\uff0c\u5176\u4e0b\u53ef\u5d4c\u5957\u4efb\u4f55\u5143\u7d20\uff0c\u53ea\u80fd\u653e\u5728 ",l.a.createElement("code",null,"Layout")," \u4e2d\u3002"),l.a.createElement("li",null,l.a.createElement("code",null,"Sider"),"\uff1a\u4fa7\u8fb9\u680f\uff0c\u81ea\u5e26\u9ed8\u8ba4\u6837\u5f0f\u53ca\u57fa\u672c\u529f\u80fd\uff0c\u5176\u4e0b\u53ef\u5d4c\u5957\u4efb\u4f55\u5143\u7d20\uff0c\u53ea\u80fd\u653e\u5728 ",l.a.createElement("code",null,"Layout")," \u4e2d\u3002"),l.a.createElement("li",null,l.a.createElement("code",null,"Content"),"\uff1a\u5185\u5bb9\u90e8\u5206\uff0c\u81ea\u5e26\u9ed8\u8ba4\u6837\u5f0f\uff0c\u5176\u4e0b\u53ef\u5d4c\u5957\u4efb\u4f55\u5143\u7d20\uff0c\u53ea\u80fd\u653e\u5728 ",l.a.createElement("code",null,"Layout")," \u4e2d\u3002"),l.a.createElement("li",null,l.a.createElement("code",null,"Footer"),"\uff1a\u5e95\u90e8\u5e03\u5c40\uff0c\u81ea\u5e26\u9ed8\u8ba4\u6837\u5f0f\uff0c\u5176\u4e0b\u53ef\u5d4c\u5957\u4efb\u4f55\u5143\u7d20\uff0c\u53ea\u80fd\u653e\u5728 ",l.a.createElement("code",null,"Layout")," \u4e2d\u3002")),l.a.createElement("blockquote",null,l.a.createElement("p",null,"\u6ce8\u610f\uff1a\u91c7\u7528 flex \u5e03\u5c40\u5b9e\u73b0\uff0c\u8bf7\u6ce8\u610f",l.a.createElement(r["Link"],{to:"http://caniuse.com/#search=flex"},"\u6d4f\u89c8\u5668\u517c\u5bb9\u6027"),"\u95ee\u9898\u3002")),l.a.createElement("h3",{id:"\u57fa\u672c\u7ed3\u6784"},l.a.createElement(r["AnchorLink"],{to:"#\u57fa\u672c\u7ed3\u6784","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u57fa\u672c\u7ed3\u6784")),l.a.createElement(c["default"],u["default"]["layout-basic"].previewerProps,l.a.createElement(i,null)),l.a.createElement("div",{className:"markdown"},l.a.createElement("h3",{id:"\u4e0a\u4e2d\u4e0b\u5e03\u5c40"},l.a.createElement(r["AnchorLink"],{to:"#\u4e0a\u4e2d\u4e0b\u5e03\u5c40","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u4e0a\u4e2d\u4e0b\u5e03\u5c40")),l.a.createElement(c["default"],u["default"]["layout-top"].previewerProps,l.a.createElement(d,null)),l.a.createElement("div",{className:"markdown"},l.a.createElement("h3",{id:"\u9876\u90e8-\u4fa7\u8fb9\u5e03\u5c40-\u901a\u680f"},l.a.createElement(r["AnchorLink"],{to:"#\u9876\u90e8-\u4fa7\u8fb9\u5e03\u5c40-\u901a\u680f","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u9876\u90e8-\u4fa7\u8fb9\u5e03\u5c40-\u901a\u680f")),l.a.createElement(c["default"],u["default"]["layout-topside2"].previewerProps,l.a.createElement(m,null)),l.a.createElement("div",{className:"markdown"},l.a.createElement("h3",{id:"\u9876\u90e8-\u4fa7\u8fb9\u5e03\u5c40"},l.a.createElement(r["AnchorLink"],{to:"#\u9876\u90e8-\u4fa7\u8fb9\u5e03\u5c40","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u9876\u90e8-\u4fa7\u8fb9\u5e03\u5c40")),l.a.createElement(c["default"],u["default"]["layout-topside"].previewerProps,l.a.createElement(s,null)),l.a.createElement("div",{className:"markdown"},l.a.createElement("h3",{id:"\u4fa7\u8fb9\u5e03\u5c40"},l.a.createElement(r["AnchorLink"],{to:"#\u4fa7\u8fb9\u5e03\u5c40","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u4fa7\u8fb9\u5e03\u5c40")),l.a.createElement(c["default"],u["default"]["layout-side"].previewerProps,l.a.createElement(E,null)),l.a.createElement("div",{className:"markdown"},l.a.createElement("h3",{id:"\u81ea\u5b9a\u4e49\u89e6\u53d1\u5668"},l.a.createElement(r["AnchorLink"],{to:"#\u81ea\u5b9a\u4e49\u89e6\u53d1\u5668","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u81ea\u5b9a\u4e49\u89e6\u53d1\u5668")),l.a.createElement(c["default"],u["default"]["layout-customtrigger"].previewerProps,l.a.createElement(p,null)),l.a.createElement("div",{className:"markdown"},l.a.createElement("h3",{id:"\u54cd\u5e94\u5f0f\u5e03\u5c40"},l.a.createElement(r["AnchorLink"],{to:"#\u54cd\u5e94\u5f0f\u5e03\u5c40","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u54cd\u5e94\u5f0f\u5e03\u5c40")),l.a.createElement(c["default"],u["default"]["layout-responsive"].previewerProps,l.a.createElement(f,null)),l.a.createElement("div",{className:"markdown"},l.a.createElement("h3",{id:"\u56fa\u5b9a\u5934\u90e8"},l.a.createElement(r["AnchorLink"],{to:"#\u56fa\u5b9a\u5934\u90e8","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u56fa\u5b9a\u5934\u90e8")),l.a.createElement(c["default"],u["default"]["layout-fixed"].previewerProps,l.a.createElement(h,null)),l.a.createElement("div",{className:"markdown"},l.a.createElement("h3",{id:"\u56fa\u5b9a\u4fa7\u8fb9\u680f"},l.a.createElement(r["AnchorLink"],{to:"#\u56fa\u5b9a\u4fa7\u8fb9\u680f","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u56fa\u5b9a\u4fa7\u8fb9\u680f")),l.a.createElement(c["default"],u["default"]["layout-fixedsider"].previewerProps,l.a.createElement(b,null)),l.a.createElement("div",{className:"markdown"},l.a.createElement("h2",{id:"api"},l.a.createElement(r["AnchorLink"],{to:"#api","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"API"),l.a.createElement(o["a"],{code:"<Layout>\n  <Header>header</Header>\n  <Layout>\n    <Sider>left sidebar</Sider>\n    <Content>main content</Content>\n    <Sider>right sidebar</Sider>\n  </Layout>\n  <Footer>footer</Footer>\n</Layout>",lang:"bash"}),l.a.createElement("h3",{id:"layout"},l.a.createElement(r["AnchorLink"],{to:"#layout","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"Layout"),l.a.createElement("p",null,"\u5e03\u5c40\u5bb9\u5668\u3002"),l.a.createElement("table",null,l.a.createElement("thead",null,l.a.createElement("tr",null,l.a.createElement("th",null,"\u53c2\u6570"),l.a.createElement("th",null,"\u8bf4\u660e"),l.a.createElement("th",null,"\u7c7b\u578b"),l.a.createElement("th",null,"\u9ed8\u8ba4\u503c"))),l.a.createElement("tbody",null,l.a.createElement("tr",null,l.a.createElement("td",null,"className"),l.a.createElement("td",null,"\u5bb9\u5668 className"),l.a.createElement("td",null,"string"),l.a.createElement("td",null,"-")),l.a.createElement("tr",null,l.a.createElement("td",null,"hasSider"),l.a.createElement("td",null,"\u8868\u793a\u5b50\u5143\u7d20\u91cc\u6709 Sider\uff0c\u4e00\u822c\u4e0d\u7528\u6307\u5b9a\u3002\u53ef\u7528\u4e8e\u670d\u52a1\u7aef\u6e32\u67d3\u65f6\u907f\u514d\u6837\u5f0f\u95ea\u52a8"),l.a.createElement("td",null,"boolean"),l.a.createElement("td",null,"-")),l.a.createElement("tr",null,l.a.createElement("td",null,"style"),l.a.createElement("td",null,"\u6307\u5b9a\u6837\u5f0f"),l.a.createElement("td",null,"CSSProperties"),l.a.createElement("td",null,"-")))),l.a.createElement("blockquote",null,l.a.createElement("p",null,l.a.createElement("code",null,"Layout.Header")," ",l.a.createElement("code",null,"Layout.Footer")," ",l.a.createElement("code",null,"Layout.Content")," API \u4e0e ",l.a.createElement("code",null,"Layout")," \u76f8\u540c")),l.a.createElement("h3",{id:"layoutsider"},l.a.createElement(r["AnchorLink"],{to:"#layoutsider","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"Layout.Sider"),l.a.createElement("p",null,"\u4fa7\u8fb9\u680f\u3002"),l.a.createElement("table",null,l.a.createElement("thead",null,l.a.createElement("tr",null,l.a.createElement("th",null,"\u53c2\u6570"),l.a.createElement("th",null,"\u8bf4\u660e"),l.a.createElement("th",null,"\u7c7b\u578b"),l.a.createElement("th",null,"\u9ed8\u8ba4\u503c"))),l.a.createElement("tbody",null,l.a.createElement("tr",null,l.a.createElement("td",null,"breakpoint"),l.a.createElement("td",null,"\u89e6\u53d1\u54cd\u5e94\u5f0f\u5e03\u5c40\u7684",l.a.createElement(r["AnchorLink"],{to:"/components/grid/#Col"},"\u65ad\u70b9")),l.a.createElement("td",null,l.a.createElement("code",null,"xs")," | ",l.a.createElement("code",null,"sm")," | ",l.a.createElement("code",null,"md")," | ",l.a.createElement("code",null,"lg")," | ",l.a.createElement("code",null,"xl")," | ",l.a.createElement("code",null,"xxl")),l.a.createElement("td",null,"-")),l.a.createElement("tr",null,l.a.createElement("td",null,"className"),l.a.createElement("td",null,"\u5bb9\u5668 className"),l.a.createElement("td",null,"string"),l.a.createElement("td",null,"-")),l.a.createElement("tr",null,l.a.createElement("td",null,"collapsed"),l.a.createElement("td",null,"\u5f53\u524d\u6536\u8d77\u72b6\u6001"),l.a.createElement("td",null,"boolean"),l.a.createElement("td",null,"-")),l.a.createElement("tr",null,l.a.createElement("td",null,"collapsedWidth"),l.a.createElement("td",null,"\u6536\u7f29\u5bbd\u5ea6\uff0c\u8bbe\u7f6e\u4e3a 0 \u4f1a\u51fa\u73b0\u7279\u6b8a trigger"),l.a.createElement("td",null,"number"),l.a.createElement("td",null,"80")),l.a.createElement("tr",null,l.a.createElement("td",null,"collapsible"),l.a.createElement("td",null,"\u662f\u5426\u53ef\u6536\u8d77"),l.a.createElement("td",null,"boolean"),l.a.createElement("td",null,"false")),l.a.createElement("tr",null,l.a.createElement("td",null,"defaultCollapsed"),l.a.createElement("td",null,"\u662f\u5426\u9ed8\u8ba4\u6536\u8d77"),l.a.createElement("td",null,"boolean"),l.a.createElement("td",null,"false")),l.a.createElement("tr",null,l.a.createElement("td",null,"reverseArrow"),l.a.createElement("td",null,"\u7ffb\u8f6c\u6298\u53e0\u63d0\u793a\u7bad\u5934\u7684\u65b9\u5411\uff0c\u5f53 Sider \u5728\u53f3\u8fb9\u65f6\u53ef\u4ee5\u4f7f\u7528"),l.a.createElement("td",null,"boolean"),l.a.createElement("td",null,"false")),l.a.createElement("tr",null,l.a.createElement("td",null,"style"),l.a.createElement("td",null,"\u6307\u5b9a\u6837\u5f0f"),l.a.createElement("td",null,"CSSProperties"),l.a.createElement("td",null,"-")),l.a.createElement("tr",null,l.a.createElement("td",null,"theme"),l.a.createElement("td",null,"\u4e3b\u9898\u989c\u8272"),l.a.createElement("td",null,l.a.createElement("code",null,"light")," | ",l.a.createElement("code",null,"dark")),l.a.createElement("td",null,l.a.createElement("code",null,"dark"))),l.a.createElement("tr",null,l.a.createElement("td",null,"trigger"),l.a.createElement("td",null,"\u81ea\u5b9a\u4e49 trigger\uff0c\u8bbe\u7f6e\u4e3a null \u65f6\u9690\u85cf trigger"),l.a.createElement("td",null,"ReactNode"),l.a.createElement("td",null,"-")),l.a.createElement("tr",null,l.a.createElement("td",null,"width"),l.a.createElement("td",null,"\u5bbd\u5ea6"),l.a.createElement("td",null,"number | string"),l.a.createElement("td",null,"200")),l.a.createElement("tr",null,l.a.createElement("td",null,"zeroWidthTriggerStyle"),l.a.createElement("td",null,"\u6307\u5b9a\u5f53 ",l.a.createElement("code",null,"collapsedWidth")," \u4e3a 0 \u65f6\u51fa\u73b0\u7684\u7279\u6b8a trigger \u7684\u6837\u5f0f"),l.a.createElement("td",null,"object"),l.a.createElement("td",null,"-")),l.a.createElement("tr",null,l.a.createElement("td",null,"onBreakpoint"),l.a.createElement("td",null,"\u89e6\u53d1\u54cd\u5e94\u5f0f\u5e03\u5c40",l.a.createElement(r["AnchorLink"],{to:"/components/grid/#API"},"\u65ad\u70b9"),"\u65f6\u7684\u56de\u8c03"),l.a.createElement("td",null,"(broken) => ","{","}"),l.a.createElement("td",null,"-")),l.a.createElement("tr",null,l.a.createElement("td",null,"onCollapse"),l.a.createElement("td",null,"\u5c55\u5f00-\u6536\u8d77\u65f6\u7684\u56de\u8c03\u51fd\u6570\uff0c\u6709\u70b9\u51fb trigger \u4ee5\u53ca\u54cd\u5e94\u5f0f\u53cd\u9988\u4e24\u79cd\u65b9\u5f0f\u53ef\u4ee5\u89e6\u53d1"),l.a.createElement("td",null,"(collapsed, type) => ","{","}"),l.a.createElement("td",null,"-")))),l.a.createElement("h4",{id:"breakpoint-width"},l.a.createElement(r["AnchorLink"],{to:"#breakpoint-width","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"breakpoint width"),l.a.createElement(o["a"],{code:"{\n  xs: '480px',\n  sm: '576px',\n  md: '768px',\n  lg: '992px',\n  xl: '1200px',\n  xxl: '1600px',\n}",lang:"ts"}),l.a.createElement("style",{dangerouslySetInnerHTML:{__html:'\n  [data-theme="dark"] .site-layout-background {\n    background: #141414;\n  }\n  [data-theme="dark"] .site-layout-header-background {\n    background: #1f1f1f;\n  }\n\n  [data-theme="dark"] .site-layout-content {\n    background: #141414;\n  }\n\n   [data-theme="dark"] .site-layout .site-layout-background {\n    background: #141414;\n  }\n\n  [data-theme="dark"] .site-layout-sub-header-background {\n    background: #141414;\n  }\n\n  #layout-basic {\n  text-align: center;\n}\n#layout-basic .ant-layout-header,\n#layout-basic .ant-layout-footer {\n  color: #fff;\n  background: #7dbcea;\n}\n[data-theme="dark"] #layout-basic .ant-layout-header {\n  background: #6aa0c7;\n}\n[data-theme="dark"] #layout-basic .ant-layout-footer {\n  background: #6aa0c7;\n}\n#layout-basic .ant-layout-footer {\n  line-height: 1.5;\n}\n#layout-basic .ant-layout-sider {\n  color: #fff;\n  line-height: 120px;\n  background: #3ba0e9;\n}\n[data-theme="dark"] #layout-basic .ant-layout-sider {\n  background: #3499ec;\n}\n#layout-basic .ant-layout-content {\n  min-height: 120px;\n  color: #fff;\n  line-height: 120px;\n  background: rgba(16, 142, 233, 1);\n}\n[data-theme="dark"] #layout-basic .ant-layout-content {\n  background: #107bcb;\n}\n#layout-basic .ant-layout + .ant-layout {\n  margin-top: 48px;\n}\n\n.site-layout-content {\n  min-height: 280px;\n  padding: 24px;\n  background: #fff;\n}\n#layout-top .logo {\n  float: left;\n  width: 120px;\n  height: 31px;\n  margin: 16px 24px 16px 0;\n  background: rgba(255, 255, 255, 0.3);\n}\n.ant-row-rtl #layout-top .logo {\n  float: right;\n  margin: 16px 0 16px 24px;\n}\n\n#layout-topside2 .logo {\n  float: left;\n  width: 120px;\n  height: 31px;\n  margin: 16px 24px 16px 0;\n  background: rgba(255, 255, 255, 0.3);\n}\n\n.ant-row-rtl #layout-topside2 .logo {\n  float: right;\n  margin: 16px 0 16px 24px;\n}\n\n.site-layout-background {\n  background: #fff;\n}\n  \n\n#layout-topside .logo {\n  float: left;\n  width: 120px;\n  height: 31px;\n  margin: 16px 24px 16px 0;\n  background: rgba(255, 255, 255, 0.3);\n}\n\n.ant-row-rtl #layout-topside .logo {\n  float: right;\n  margin: 16px 0 16px 24px;\n}\n\n.site-layout-background {\n  background: #fff;\n}\n\n\n#layout-customtrigger .trigger {\n  padding: 0 24px;\n  font-size: 18px;\n  line-height: 64px;\n  cursor: pointer;\n  transition: color 0.3s;\n}\n\n#layout-customtrigger .trigger:hover {\n  color: #1890ff;\n}\n\n#layout-customtrigger .logo {\n  height: 32px;\n  margin: 16px;\n  background: rgba(255, 255, 255, 0.3);\n}\n\n.site-layout .site-layout-background {\n  background: #fff;\n}\n\n\n#layout-responsive .logo {\n  height: 32px;\n  margin: 16px;\n  background: rgba(255, 255, 255, 0.2);\n}\n\n.site-layout-sub-header-background {\n  background: #fff;\n}\n\n.site-layout-background {\n  background: #fff;\n}\n\n'}})))))},MZF8:function(e,t,a){"use strict";var n=a("ogwx");a.d(t,"a",(function(){return n["b"]}));a("VCU9")},RZMt:function(e,t,a){},Zxc8:function(e,t,a){"use strict";a.r(t);var n=a("q1tI"),l=a.n(n),r=a("k3GJ"),c=a("MZF8"),o=a("dEAq"),u=a("H1Ra");a("RZMt");function i(e,t){return p(e)||E(e,t)||m(e,t)||d()}function d(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function m(e,t){if(e){if("string"===typeof e)return s(e,t);var a=Object.prototype.toString.call(e).slice(8,-1);return"Object"===a&&e.constructor&&(a=e.constructor.name),"Map"===a||"Set"===a?Array.from(e):"Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a)?s(e,t):void 0}}function s(e,t){(null==t||t>e.length)&&(t=e.length);for(var a=0,n=new Array(t);a<t;a++)n[a]=e[a];return n}function E(e,t){var a=null==e?null:"undefined"!==typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=a){var n,l,r=[],c=!0,o=!1;try{for(a=a.call(e);!(c=(n=a.next()).done);c=!0)if(r.push(n.value),t&&r.length===t)break}catch(u){o=!0,l=u}finally{try{c||null==a["return"]||a["return"]()}finally{if(o)throw l}}return r}}function p(e){if(Array.isArray(e))return e}function f(e,t){var a,n=null===(a=e.match(/\.(\w+)$/))||void 0===a?void 0:a[1];return n||(n=t.tsx?"tsx":"jsx"),n}var h=function(e){var t,a,d,m=Object(n["useRef"])(),s=Object(n["useContext"])(o["context"]),E=s.locale,p=Object(o["useLocaleProps"])(E,e),h=Object(o["useDemoUrl"])(p.identifier),b=p.demoUrl||h,g=(null===c["a"]||void 0===c["a"]?void 0:c["a"].location.hash)==="#".concat(p.identifier),y=1===Object.keys(p.sources).length,k=Object(o["useCodeSandbox"])((null===(t=p.hideActions)||void 0===t?void 0:t.includes("CSB"))?null:p),x=Object(o["useRiddle"])((null===(a=p.hideActions)||void 0===a?void 0:a.includes("RIDDLE"))?null:p),v=Object(o["useMotions"])(p.motions||[],m.current),w=i(v,2),N=w[0],L=w[1],_=Object(o["useCopy"])(),A=i(_,2),S=A[0],I=A[1],C=Object(n["useState"])("_"),j=i(C,2),O=j[0],P=j[1],R=Object(n["useState"])(f(O,p.sources[O])),M=i(R,2),T=M[0],F=M[1],H=Object(n["useState"])(Boolean(p.defaultShowCode)),q=i(H,2),U=q[0],Z=q[1],J=Object(n["useState"])(Math.random()),B=i(J,2),$=B[0],D=B[1],W=p.sources[O][T]||p.sources[O].content,z=Object(o["useTSPlaygroundUrl"])(E,W),G=Object(n["useRef"])(),X=Object(o["usePrefersColor"])(),K=i(X,1),V=K[0];function Q(e){P(e),F(f(e,p.sources[e]))}return Object(n["useEffect"])((function(){D(Math.random())}),[V]),l.a.createElement("div",{style:p.style,className:[p.className,"__dumi-default-previewer",g?"__dumi-default-previewer-target":""].filter(Boolean).join(" "),id:p.identifier,"data-debug":p.debug||void 0,"data-iframe":p.iframe||void 0},p.iframe&&l.a.createElement("div",{className:"__dumi-default-previewer-browser-nav"}),l.a.createElement("div",{ref:m,className:"__dumi-default-previewer-demo",style:{transform:p.transform?"translate(0, 0)":void 0,padding:p.compact||p.iframe&&!1!==p.compact?"0":void 0,background:p.background}},p.iframe?l.a.createElement("iframe",{title:"dumi-previewer",style:{height:String(p.iframe).replace(/(\d)$/,"$1px")},key:$,src:b,ref:G}):p.children),l.a.createElement("div",{className:"__dumi-default-previewer-desc","data-title":p.title},p.title&&l.a.createElement(o["AnchorLink"],{to:"#".concat(p.identifier)},p.title),p.description&&l.a.createElement("div",{dangerouslySetInnerHTML:{__html:p.description}})),l.a.createElement("div",{className:"__dumi-default-previewer-actions"},k&&l.a.createElement("button",{title:"Open demo on CodeSandbox.io",className:"__dumi-default-icon",role:"codesandbox",onClick:k}),x&&l.a.createElement("button",{title:"Open demo on Riddle",className:"__dumi-default-icon",role:"riddle",onClick:x}),p.motions&&l.a.createElement("button",{title:"Execute motions",className:"__dumi-default-icon",role:"motions",disabled:L,onClick:function(){return N()}}),p.iframe&&l.a.createElement("button",{title:"Reload demo iframe page",className:"__dumi-default-icon",role:"refresh",onClick:function(){return D(Math.random())}}),!(null===(d=p.hideActions)||void 0===d?void 0:d.includes("EXTERNAL"))&&l.a.createElement(o["Link"],{target:"_blank",to:b},l.a.createElement("button",{title:"Open demo in new tab",className:"__dumi-default-icon",role:"open-demo",type:"button"})),l.a.createElement("span",null),l.a.createElement("button",{title:"Copy source code",className:"__dumi-default-icon",role:"copy","data-status":I,onClick:function(){return S(W)}}),"tsx"===T&&U&&l.a.createElement(o["Link"],{target:"_blank",to:z},l.a.createElement("button",{title:"Get JSX via TypeScript Playground",className:"__dumi-default-icon",role:"change-tsx",type:"button"})),l.a.createElement("button",{title:"Toggle source code panel",className:"__dumi-default-icon".concat(U?" __dumi-default-btn-expand":""),role:"source",type:"button",onClick:function(){return Z(!U)}})),U&&l.a.createElement("div",{className:"__dumi-default-previewer-source-wrapper"},!y&&l.a.createElement(r["b"],{className:"__dumi-default-previewer-source-tab",prefixCls:"__dumi-default-tabs",moreIcon:"\xb7\xb7\xb7",defaultActiveKey:O,onChange:Q},Object.keys(p.sources).map((function(e){return l.a.createElement(r["a"],{tab:"_"===e?"index.".concat(f(e,p.sources[e])):e,key:e})}))),l.a.createElement("div",{className:"__dumi-default-previewer-source"},l.a.createElement(u["a"],{code:W,lang:T,showCopy:!1}))))};t["default"]=h}}]);
+(window['webpackJsonp'] = window['webpackJsonp'] || []).push([
+  [37],
+  {
+    '+TR4': function (e, t, a) {
+      'use strict';
+      a.r(t);
+      var n = a('q1tI'),
+        l = a.n(n),
+        r = a('dEAq'),
+        c = a('Zxc8'),
+        o = a('H1Ra'),
+        u = a('JjdP'),
+        i = l.a.memo(u['default']['layout-basic'].component),
+        d = l.a.memo(u['default']['layout-top'].component),
+        m = l.a.memo(u['default']['layout-topside2'].component),
+        s = l.a.memo(u['default']['layout-topside'].component),
+        E = l.a.memo(u['default']['layout-side'].component),
+        p = l.a.memo(u['default']['layout-customtrigger'].component),
+        f = l.a.memo(u['default']['layout-responsive'].component),
+        h = l.a.memo(u['default']['layout-fixed'].component),
+        b = l.a.memo(u['default']['layout-fixedsider'].component);
+      t['default'] = (e) => (
+        l.a.useEffect(() => {
+          var t;
+          null !== e &&
+            void 0 !== e &&
+            null !== (t = e.location) &&
+            void 0 !== t &&
+            t.hash &&
+            r['AnchorLink'].scrollToAnchor(
+              decodeURIComponent(e.location.hash.slice(1)),
+            );
+        }, []),
+        l.a.createElement(
+          l.a.Fragment,
+          null,
+          l.a.createElement(
+            l.a.Fragment,
+            null,
+            l.a.createElement(
+              'div',
+              { className: 'markdown' },
+              l.a.createElement(
+                'h1',
+                { id: 'layout-\u5e03\u5c40' },
+                l.a.createElement(
+                  r['AnchorLink'],
+                  {
+                    to: '#layout-\u5e03\u5c40',
+                    'aria-hidden': 'true',
+                    tabIndex: -1,
+                  },
+                  l.a.createElement('span', { className: 'icon icon-link' }),
+                ),
+                'Layout \u5e03\u5c40',
+              ),
+              l.a.createElement(
+                'p',
+                null,
+                '\u534f\u52a9\u8fdb\u884c\u9875\u9762\u7ea7\u6574\u4f53\u5e03\u5c40\u3002',
+              ),
+              l.a.createElement(
+                'h2',
+                { id: '\u8bbe\u8ba1\u89c4\u5219' },
+                l.a.createElement(
+                  r['AnchorLink'],
+                  {
+                    to: '#\u8bbe\u8ba1\u89c4\u5219',
+                    'aria-hidden': 'true',
+                    tabIndex: -1,
+                  },
+                  l.a.createElement('span', { className: 'icon icon-link' }),
+                ),
+                '\u8bbe\u8ba1\u89c4\u5219',
+              ),
+              l.a.createElement(
+                'h3',
+                { id: '\u5c3a\u5bf8' },
+                l.a.createElement(
+                  r['AnchorLink'],
+                  { to: '#\u5c3a\u5bf8', 'aria-hidden': 'true', tabIndex: -1 },
+                  l.a.createElement('span', { className: 'icon icon-link' }),
+                ),
+                '\u5c3a\u5bf8',
+              ),
+              l.a.createElement(
+                'p',
+                null,
+                '\u4e00\u7ea7\u5bfc\u822a\u9879\u504f\u5de6\u9760\u8fd1 logo \u653e\u7f6e\uff0c\u8f85\u52a9\u83dc\u5355\u504f\u53f3\u653e\u7f6e\u3002',
+              ),
+              l.a.createElement(
+                'ul',
+                null,
+                l.a.createElement(
+                  'li',
+                  null,
+                  '\u9876\u90e8\u5bfc\u822a\uff08\u5927\u90e8\u5206\u7cfb\u7edf\uff09\uff1a\u4e00\u7ea7\u5bfc\u822a\u9ad8\u5ea6 ',
+                  l.a.createElement('code', null, '64px'),
+                  '\uff0c\u4e8c\u7ea7\u5bfc\u822a ',
+                  l.a.createElement('code', null, '48px'),
+                  '\u3002',
+                ),
+                l.a.createElement(
+                  'li',
+                  null,
+                  '\u9876\u90e8\u5bfc\u822a\uff08\u5c55\u793a\u7c7b\u9875\u9762\uff09\uff1a\u4e00\u7ea7\u5bfc\u822a\u9ad8\u5ea6 ',
+                  l.a.createElement('code', null, '80px'),
+                  '\uff0c\u4e8c\u7ea7\u5bfc\u822a ',
+                  l.a.createElement('code', null, '56px'),
+                  '\u3002',
+                ),
+                l.a.createElement(
+                  'li',
+                  null,
+                  '\u9876\u90e8\u5bfc\u822a\u9ad8\u5ea6\u7684\u8303\u56f4\u8ba1\u7b97\u516c\u5f0f\u4e3a\uff1a',
+                  l.a.createElement('code', null, '48+8n'),
+                  '\u3002',
+                ),
+                l.a.createElement(
+                  'li',
+                  null,
+                  '\u4fa7\u8fb9\u5bfc\u822a\u5bbd\u5ea6\u7684\u8303\u56f4\u8ba1\u7b97\u516c\u5f0f\uff1a',
+                  l.a.createElement('code', null, '200+8n'),
+                  '\u3002',
+                ),
+              ),
+              l.a.createElement(
+                'h3',
+                { id: '\u4ea4\u4e92' },
+                l.a.createElement(
+                  r['AnchorLink'],
+                  { to: '#\u4ea4\u4e92', 'aria-hidden': 'true', tabIndex: -1 },
+                  l.a.createElement('span', { className: 'icon icon-link' }),
+                ),
+                '\u4ea4\u4e92',
+              ),
+              l.a.createElement(
+                'ul',
+                null,
+                l.a.createElement(
+                  'li',
+                  null,
+                  '\u4e00\u7ea7\u5bfc\u822a\u548c\u672b\u7ea7\u7684\u5bfc\u822a\u9700\u8981\u5728\u53ef\u89c6\u5316\u7684\u5c42\u9762\u88ab\u5f3a\u8c03\u51fa\u6765\uff1b',
+                ),
+                l.a.createElement(
+                  'li',
+                  null,
+                  '\u5f53\u524d\u9879\u5e94\u8be5\u5728\u5448\u73b0\u4e0a\u4f18\u5148\u7ea7\u6700\u9ad8\uff1b',
+                ),
+                l.a.createElement(
+                  'li',
+                  null,
+                  '\u5f53\u5bfc\u822a\u6536\u8d77\u7684\u65f6\u5019\uff0c\u5f53\u524d\u9879\u7684\u6837\u5f0f\u81ea\u52a8\u8d4b\u4e88\u7ed9\u5b83\u7684\u4e0a\u4e00\u4e2a\u5c42\u7ea7\uff1b',
+                ),
+                l.a.createElement(
+                  'li',
+                  null,
+                  '\u5de6\u4fa7\u5bfc\u822a\u680f\u7684\u6536\u653e\u4ea4\u4e92\u540c\u65f6\u652f\u6301\u624b\u98ce\u7434\u548c\u5168\u5c55\u5f00\u7684\u6837\u5f0f\uff0c\u6839\u636e\u4e1a\u52a1\u7684\u8981\u6c42\u8fdb\u884c\u9002\u5f53\u7684\u9009\u62e9\u3002',
+                ),
+              ),
+              l.a.createElement(
+                'h3',
+                { id: '\u89c6\u89c9' },
+                l.a.createElement(
+                  r['AnchorLink'],
+                  { to: '#\u89c6\u89c9', 'aria-hidden': 'true', tabIndex: -1 },
+                  l.a.createElement('span', { className: 'icon icon-link' }),
+                ),
+                '\u89c6\u89c9',
+              ),
+              l.a.createElement(
+                'p',
+                null,
+                '\u5bfc\u822a\u6837\u5f0f\u4e0a\u9700\u8981\u6839\u636e\u4fe1\u606f\u5c42\u7ea7\u5408\u7406\u7684\u9009\u62e9\u6837\u5f0f\uff1a',
+              ),
+              l.a.createElement(
+                'ul',
+                null,
+                l.a.createElement(
+                  'li',
+                  null,
+                  l.a.createElement(
+                    'p',
+                    null,
+                    l.a.createElement(
+                      'strong',
+                      null,
+                      '\u5927\u8272\u5757\u5f3a\u8c03',
+                    ),
+                  ),
+                  l.a.createElement(
+                    'p',
+                    null,
+                    '\u5efa\u8bae\u7528\u4e8e\u5e95\u8272\u4e3a\u6df1\u8272\u7cfb\u65f6\uff0c\u5f53\u524d\u9875\u9762\u7236\u7ea7\u7684\u5bfc\u822a\u9879\u3002',
+                  ),
+                ),
+                l.a.createElement(
+                  'li',
+                  null,
+                  l.a.createElement(
+                    'p',
+                    null,
+                    l.a.createElement(
+                      'strong',
+                      null,
+                      '\u9ad8\u4eae\u706b\u67f4\u68cd',
+                    ),
+                  ),
+                  l.a.createElement(
+                    'p',
+                    null,
+                    '\u5f53\u5bfc\u822a\u680f\u5e95\u8272\u4e3a\u6d45\u8272\u7cfb\u65f6\u4f7f\u7528\uff0c\u53ef\u7528\u4e8e\u5f53\u524d\u9875\u9762\u5bf9\u5e94\u5bfc\u822a\u9879\uff0c\u5efa\u8bae\u5c3d\u91cf\u5728\u5bfc\u822a\u8def\u5f84\u7684\u6700\u7ec8\u9879\u4f7f\u7528\u3002',
+                  ),
+                ),
+                l.a.createElement(
+                  'li',
+                  null,
+                  l.a.createElement(
+                    'p',
+                    null,
+                    l.a.createElement(
+                      'strong',
+                      null,
+                      '\u5b57\u4f53\u9ad8\u4eae\u53d8\u8272',
+                    ),
+                  ),
+                  l.a.createElement(
+                    'p',
+                    null,
+                    '\u4ece\u53ef\u89c6\u5316\u5c42\u9762\uff0c\u5b57\u4f53\u9ad8\u4eae\u7684\u89c6\u89c9\u5f3a\u5316\u529b\u5ea6\u4f4e\u4e8e\u5927\u8272\u5757\uff0c\u901a\u5e38\u5728\u5f53\u524d\u9879\u7684\u4e0a\u4e00\u7ea7\u4f7f\u7528\u3002',
+                  ),
+                ),
+                l.a.createElement(
+                  'li',
+                  null,
+                  l.a.createElement(
+                    'p',
+                    null,
+                    l.a.createElement(
+                      'strong',
+                      null,
+                      '\u5b57\u4f53\u653e\u5927',
+                    ),
+                  ),
+                  l.a.createElement(
+                    'p',
+                    null,
+                    l.a.createElement('code', null, '12px'),
+                    '\u3001',
+                    l.a.createElement('code', null, '14px'),
+                    ' \u662f\u5bfc\u822a\u7684\u6807\u51c6\u5b57\u53f7\uff0c14 \u53f7\u5b57\u4f53\u7528\u5728\u4e00\u3001\u4e8c\u7ea7\u5bfc\u822a\u4e2d\u3002\u5b57\u53f7\u53ef\u4ee5\u8003\u8651\u5bfc\u822a\u9879\u7684\u7b49\u7ea7\u505a\u76f8\u5e94\u9009\u62e9\u3002',
+                  ),
+                ),
+              ),
+              l.a.createElement(
+                'h2',
+                { id: '\u7ec4\u4ef6\u6982\u8ff0' },
+                l.a.createElement(
+                  r['AnchorLink'],
+                  {
+                    to: '#\u7ec4\u4ef6\u6982\u8ff0',
+                    'aria-hidden': 'true',
+                    tabIndex: -1,
+                  },
+                  l.a.createElement('span', { className: 'icon icon-link' }),
+                ),
+                '\u7ec4\u4ef6\u6982\u8ff0',
+              ),
+              l.a.createElement(
+                'ul',
+                null,
+                l.a.createElement(
+                  'li',
+                  null,
+                  l.a.createElement('code', null, 'Layout'),
+                  '\uff1a\u5e03\u5c40\u5bb9\u5668\uff0c\u5176\u4e0b\u53ef\u5d4c\u5957 ',
+                  l.a.createElement('code', null, 'Header'),
+                  ' ',
+                  l.a.createElement('code', null, 'Sider'),
+                  ' ',
+                  l.a.createElement('code', null, 'Content'),
+                  ' ',
+                  l.a.createElement('code', null, 'Footer'),
+                  ' \u6216 ',
+                  l.a.createElement('code', null, 'Layout'),
+                  ' \u672c\u8eab\uff0c\u53ef\u4ee5\u653e\u5728\u4efb\u4f55\u7236\u5bb9\u5668\u4e2d\u3002',
+                ),
+                l.a.createElement(
+                  'li',
+                  null,
+                  l.a.createElement('code', null, 'Header'),
+                  '\uff1a\u9876\u90e8\u5e03\u5c40\uff0c\u81ea\u5e26\u9ed8\u8ba4\u6837\u5f0f\uff0c\u5176\u4e0b\u53ef\u5d4c\u5957\u4efb\u4f55\u5143\u7d20\uff0c\u53ea\u80fd\u653e\u5728 ',
+                  l.a.createElement('code', null, 'Layout'),
+                  ' \u4e2d\u3002',
+                ),
+                l.a.createElement(
+                  'li',
+                  null,
+                  l.a.createElement('code', null, 'Sider'),
+                  '\uff1a\u4fa7\u8fb9\u680f\uff0c\u81ea\u5e26\u9ed8\u8ba4\u6837\u5f0f\u53ca\u57fa\u672c\u529f\u80fd\uff0c\u5176\u4e0b\u53ef\u5d4c\u5957\u4efb\u4f55\u5143\u7d20\uff0c\u53ea\u80fd\u653e\u5728 ',
+                  l.a.createElement('code', null, 'Layout'),
+                  ' \u4e2d\u3002',
+                ),
+                l.a.createElement(
+                  'li',
+                  null,
+                  l.a.createElement('code', null, 'Content'),
+                  '\uff1a\u5185\u5bb9\u90e8\u5206\uff0c\u81ea\u5e26\u9ed8\u8ba4\u6837\u5f0f\uff0c\u5176\u4e0b\u53ef\u5d4c\u5957\u4efb\u4f55\u5143\u7d20\uff0c\u53ea\u80fd\u653e\u5728 ',
+                  l.a.createElement('code', null, 'Layout'),
+                  ' \u4e2d\u3002',
+                ),
+                l.a.createElement(
+                  'li',
+                  null,
+                  l.a.createElement('code', null, 'Footer'),
+                  '\uff1a\u5e95\u90e8\u5e03\u5c40\uff0c\u81ea\u5e26\u9ed8\u8ba4\u6837\u5f0f\uff0c\u5176\u4e0b\u53ef\u5d4c\u5957\u4efb\u4f55\u5143\u7d20\uff0c\u53ea\u80fd\u653e\u5728 ',
+                  l.a.createElement('code', null, 'Layout'),
+                  ' \u4e2d\u3002',
+                ),
+              ),
+              l.a.createElement(
+                'blockquote',
+                null,
+                l.a.createElement(
+                  'p',
+                  null,
+                  '\u6ce8\u610f\uff1a\u91c7\u7528 flex \u5e03\u5c40\u5b9e\u73b0\uff0c\u8bf7\u6ce8\u610f',
+                  l.a.createElement(
+                    r['Link'],
+                    { to: 'http://caniuse.com/#search=flex' },
+                    '\u6d4f\u89c8\u5668\u517c\u5bb9\u6027',
+                  ),
+                  '\u95ee\u9898\u3002',
+                ),
+              ),
+              l.a.createElement(
+                'h3',
+                { id: '\u57fa\u672c\u7ed3\u6784' },
+                l.a.createElement(
+                  r['AnchorLink'],
+                  {
+                    to: '#\u57fa\u672c\u7ed3\u6784',
+                    'aria-hidden': 'true',
+                    tabIndex: -1,
+                  },
+                  l.a.createElement('span', { className: 'icon icon-link' }),
+                ),
+                '\u57fa\u672c\u7ed3\u6784',
+              ),
+            ),
+            l.a.createElement(
+              c['default'],
+              u['default']['layout-basic'].previewerProps,
+              l.a.createElement(i, null),
+            ),
+            l.a.createElement(
+              'div',
+              { className: 'markdown' },
+              l.a.createElement(
+                'h3',
+                { id: '\u4e0a\u4e2d\u4e0b\u5e03\u5c40' },
+                l.a.createElement(
+                  r['AnchorLink'],
+                  {
+                    to: '#\u4e0a\u4e2d\u4e0b\u5e03\u5c40',
+                    'aria-hidden': 'true',
+                    tabIndex: -1,
+                  },
+                  l.a.createElement('span', { className: 'icon icon-link' }),
+                ),
+                '\u4e0a\u4e2d\u4e0b\u5e03\u5c40',
+              ),
+            ),
+            l.a.createElement(
+              c['default'],
+              u['default']['layout-top'].previewerProps,
+              l.a.createElement(d, null),
+            ),
+            l.a.createElement(
+              'div',
+              { className: 'markdown' },
+              l.a.createElement(
+                'h3',
+                { id: '\u9876\u90e8-\u4fa7\u8fb9\u5e03\u5c40-\u901a\u680f' },
+                l.a.createElement(
+                  r['AnchorLink'],
+                  {
+                    to: '#\u9876\u90e8-\u4fa7\u8fb9\u5e03\u5c40-\u901a\u680f',
+                    'aria-hidden': 'true',
+                    tabIndex: -1,
+                  },
+                  l.a.createElement('span', { className: 'icon icon-link' }),
+                ),
+                '\u9876\u90e8-\u4fa7\u8fb9\u5e03\u5c40-\u901a\u680f',
+              ),
+            ),
+            l.a.createElement(
+              c['default'],
+              u['default']['layout-topside2'].previewerProps,
+              l.a.createElement(m, null),
+            ),
+            l.a.createElement(
+              'div',
+              { className: 'markdown' },
+              l.a.createElement(
+                'h3',
+                { id: '\u9876\u90e8-\u4fa7\u8fb9\u5e03\u5c40' },
+                l.a.createElement(
+                  r['AnchorLink'],
+                  {
+                    to: '#\u9876\u90e8-\u4fa7\u8fb9\u5e03\u5c40',
+                    'aria-hidden': 'true',
+                    tabIndex: -1,
+                  },
+                  l.a.createElement('span', { className: 'icon icon-link' }),
+                ),
+                '\u9876\u90e8-\u4fa7\u8fb9\u5e03\u5c40',
+              ),
+            ),
+            l.a.createElement(
+              c['default'],
+              u['default']['layout-topside'].previewerProps,
+              l.a.createElement(s, null),
+            ),
+            l.a.createElement(
+              'div',
+              { className: 'markdown' },
+              l.a.createElement(
+                'h3',
+                { id: '\u4fa7\u8fb9\u5e03\u5c40' },
+                l.a.createElement(
+                  r['AnchorLink'],
+                  {
+                    to: '#\u4fa7\u8fb9\u5e03\u5c40',
+                    'aria-hidden': 'true',
+                    tabIndex: -1,
+                  },
+                  l.a.createElement('span', { className: 'icon icon-link' }),
+                ),
+                '\u4fa7\u8fb9\u5e03\u5c40',
+              ),
+            ),
+            l.a.createElement(
+              c['default'],
+              u['default']['layout-side'].previewerProps,
+              l.a.createElement(E, null),
+            ),
+            l.a.createElement(
+              'div',
+              { className: 'markdown' },
+              l.a.createElement(
+                'h3',
+                { id: '\u81ea\u5b9a\u4e49\u89e6\u53d1\u5668' },
+                l.a.createElement(
+                  r['AnchorLink'],
+                  {
+                    to: '#\u81ea\u5b9a\u4e49\u89e6\u53d1\u5668',
+                    'aria-hidden': 'true',
+                    tabIndex: -1,
+                  },
+                  l.a.createElement('span', { className: 'icon icon-link' }),
+                ),
+                '\u81ea\u5b9a\u4e49\u89e6\u53d1\u5668',
+              ),
+            ),
+            l.a.createElement(
+              c['default'],
+              u['default']['layout-customtrigger'].previewerProps,
+              l.a.createElement(p, null),
+            ),
+            l.a.createElement(
+              'div',
+              { className: 'markdown' },
+              l.a.createElement(
+                'h3',
+                { id: '\u54cd\u5e94\u5f0f\u5e03\u5c40' },
+                l.a.createElement(
+                  r['AnchorLink'],
+                  {
+                    to: '#\u54cd\u5e94\u5f0f\u5e03\u5c40',
+                    'aria-hidden': 'true',
+                    tabIndex: -1,
+                  },
+                  l.a.createElement('span', { className: 'icon icon-link' }),
+                ),
+                '\u54cd\u5e94\u5f0f\u5e03\u5c40',
+              ),
+            ),
+            l.a.createElement(
+              c['default'],
+              u['default']['layout-responsive'].previewerProps,
+              l.a.createElement(f, null),
+            ),
+            l.a.createElement(
+              'div',
+              { className: 'markdown' },
+              l.a.createElement(
+                'h3',
+                { id: '\u56fa\u5b9a\u5934\u90e8' },
+                l.a.createElement(
+                  r['AnchorLink'],
+                  {
+                    to: '#\u56fa\u5b9a\u5934\u90e8',
+                    'aria-hidden': 'true',
+                    tabIndex: -1,
+                  },
+                  l.a.createElement('span', { className: 'icon icon-link' }),
+                ),
+                '\u56fa\u5b9a\u5934\u90e8',
+              ),
+            ),
+            l.a.createElement(
+              c['default'],
+              u['default']['layout-fixed'].previewerProps,
+              l.a.createElement(h, null),
+            ),
+            l.a.createElement(
+              'div',
+              { className: 'markdown' },
+              l.a.createElement(
+                'h3',
+                { id: '\u56fa\u5b9a\u4fa7\u8fb9\u680f' },
+                l.a.createElement(
+                  r['AnchorLink'],
+                  {
+                    to: '#\u56fa\u5b9a\u4fa7\u8fb9\u680f',
+                    'aria-hidden': 'true',
+                    tabIndex: -1,
+                  },
+                  l.a.createElement('span', { className: 'icon icon-link' }),
+                ),
+                '\u56fa\u5b9a\u4fa7\u8fb9\u680f',
+              ),
+            ),
+            l.a.createElement(
+              c['default'],
+              u['default']['layout-fixedsider'].previewerProps,
+              l.a.createElement(b, null),
+            ),
+            l.a.createElement(
+              'div',
+              { className: 'markdown' },
+              l.a.createElement(
+                'h2',
+                { id: 'api' },
+                l.a.createElement(
+                  r['AnchorLink'],
+                  { to: '#api', 'aria-hidden': 'true', tabIndex: -1 },
+                  l.a.createElement('span', { className: 'icon icon-link' }),
+                ),
+                'API',
+              ),
+              l.a.createElement(o['a'], {
+                code: '<Layout>\n  <Header>header</Header>\n  <Layout>\n    <Sider>left sidebar</Sider>\n    <Content>main content</Content>\n    <Sider>right sidebar</Sider>\n  </Layout>\n  <Footer>footer</Footer>\n</Layout>',
+                lang: 'bash',
+              }),
+              l.a.createElement(
+                'h3',
+                { id: 'layout' },
+                l.a.createElement(
+                  r['AnchorLink'],
+                  { to: '#layout', 'aria-hidden': 'true', tabIndex: -1 },
+                  l.a.createElement('span', { className: 'icon icon-link' }),
+                ),
+                'Layout',
+              ),
+              l.a.createElement('p', null, '\u5e03\u5c40\u5bb9\u5668\u3002'),
+              l.a.createElement(
+                'table',
+                null,
+                l.a.createElement(
+                  'thead',
+                  null,
+                  l.a.createElement(
+                    'tr',
+                    null,
+                    l.a.createElement('th', null, '\u53c2\u6570'),
+                    l.a.createElement('th', null, '\u8bf4\u660e'),
+                    l.a.createElement('th', null, '\u7c7b\u578b'),
+                    l.a.createElement('th', null, '\u9ed8\u8ba4\u503c'),
+                  ),
+                ),
+                l.a.createElement(
+                  'tbody',
+                  null,
+                  l.a.createElement(
+                    'tr',
+                    null,
+                    l.a.createElement('td', null, 'className'),
+                    l.a.createElement('td', null, '\u5bb9\u5668 className'),
+                    l.a.createElement('td', null, 'string'),
+                    l.a.createElement('td', null, '-'),
+                  ),
+                  l.a.createElement(
+                    'tr',
+                    null,
+                    l.a.createElement('td', null, 'hasSider'),
+                    l.a.createElement(
+                      'td',
+                      null,
+                      '\u8868\u793a\u5b50\u5143\u7d20\u91cc\u6709 Sider\uff0c\u4e00\u822c\u4e0d\u7528\u6307\u5b9a\u3002\u53ef\u7528\u4e8e\u670d\u52a1\u7aef\u6e32\u67d3\u65f6\u907f\u514d\u6837\u5f0f\u95ea\u52a8',
+                    ),
+                    l.a.createElement('td', null, 'boolean'),
+                    l.a.createElement('td', null, '-'),
+                  ),
+                  l.a.createElement(
+                    'tr',
+                    null,
+                    l.a.createElement('td', null, 'style'),
+                    l.a.createElement('td', null, '\u6307\u5b9a\u6837\u5f0f'),
+                    l.a.createElement('td', null, 'CSSProperties'),
+                    l.a.createElement('td', null, '-'),
+                  ),
+                ),
+              ),
+              l.a.createElement(
+                'blockquote',
+                null,
+                l.a.createElement(
+                  'p',
+                  null,
+                  l.a.createElement('code', null, 'Layout.Header'),
+                  ' ',
+                  l.a.createElement('code', null, 'Layout.Footer'),
+                  ' ',
+                  l.a.createElement('code', null, 'Layout.Content'),
+                  ' API \u4e0e ',
+                  l.a.createElement('code', null, 'Layout'),
+                  ' \u76f8\u540c',
+                ),
+              ),
+              l.a.createElement(
+                'h3',
+                { id: 'layoutsider' },
+                l.a.createElement(
+                  r['AnchorLink'],
+                  { to: '#layoutsider', 'aria-hidden': 'true', tabIndex: -1 },
+                  l.a.createElement('span', { className: 'icon icon-link' }),
+                ),
+                'Layout.Sider',
+              ),
+              l.a.createElement('p', null, '\u4fa7\u8fb9\u680f\u3002'),
+              l.a.createElement(
+                'table',
+                null,
+                l.a.createElement(
+                  'thead',
+                  null,
+                  l.a.createElement(
+                    'tr',
+                    null,
+                    l.a.createElement('th', null, '\u53c2\u6570'),
+                    l.a.createElement('th', null, '\u8bf4\u660e'),
+                    l.a.createElement('th', null, '\u7c7b\u578b'),
+                    l.a.createElement('th', null, '\u9ed8\u8ba4\u503c'),
+                  ),
+                ),
+                l.a.createElement(
+                  'tbody',
+                  null,
+                  l.a.createElement(
+                    'tr',
+                    null,
+                    l.a.createElement('td', null, 'breakpoint'),
+                    l.a.createElement(
+                      'td',
+                      null,
+                      '\u89e6\u53d1\u54cd\u5e94\u5f0f\u5e03\u5c40\u7684',
+                      l.a.createElement(
+                        r['AnchorLink'],
+                        { to: '/components/grid/#Col' },
+                        '\u65ad\u70b9',
+                      ),
+                    ),
+                    l.a.createElement(
+                      'td',
+                      null,
+                      l.a.createElement('code', null, 'xs'),
+                      ' | ',
+                      l.a.createElement('code', null, 'sm'),
+                      ' | ',
+                      l.a.createElement('code', null, 'md'),
+                      ' | ',
+                      l.a.createElement('code', null, 'lg'),
+                      ' | ',
+                      l.a.createElement('code', null, 'xl'),
+                      ' | ',
+                      l.a.createElement('code', null, 'xxl'),
+                    ),
+                    l.a.createElement('td', null, '-'),
+                  ),
+                  l.a.createElement(
+                    'tr',
+                    null,
+                    l.a.createElement('td', null, 'className'),
+                    l.a.createElement('td', null, '\u5bb9\u5668 className'),
+                    l.a.createElement('td', null, 'string'),
+                    l.a.createElement('td', null, '-'),
+                  ),
+                  l.a.createElement(
+                    'tr',
+                    null,
+                    l.a.createElement('td', null, 'collapsed'),
+                    l.a.createElement(
+                      'td',
+                      null,
+                      '\u5f53\u524d\u6536\u8d77\u72b6\u6001',
+                    ),
+                    l.a.createElement('td', null, 'boolean'),
+                    l.a.createElement('td', null, '-'),
+                  ),
+                  l.a.createElement(
+                    'tr',
+                    null,
+                    l.a.createElement('td', null, 'collapsedWidth'),
+                    l.a.createElement(
+                      'td',
+                      null,
+                      '\u6536\u7f29\u5bbd\u5ea6\uff0c\u8bbe\u7f6e\u4e3a 0 \u4f1a\u51fa\u73b0\u7279\u6b8a trigger',
+                    ),
+                    l.a.createElement('td', null, 'number'),
+                    l.a.createElement('td', null, '80'),
+                  ),
+                  l.a.createElement(
+                    'tr',
+                    null,
+                    l.a.createElement('td', null, 'collapsible'),
+                    l.a.createElement(
+                      'td',
+                      null,
+                      '\u662f\u5426\u53ef\u6536\u8d77',
+                    ),
+                    l.a.createElement('td', null, 'boolean'),
+                    l.a.createElement('td', null, 'false'),
+                  ),
+                  l.a.createElement(
+                    'tr',
+                    null,
+                    l.a.createElement('td', null, 'defaultCollapsed'),
+                    l.a.createElement(
+                      'td',
+                      null,
+                      '\u662f\u5426\u9ed8\u8ba4\u6536\u8d77',
+                    ),
+                    l.a.createElement('td', null, 'boolean'),
+                    l.a.createElement('td', null, 'false'),
+                  ),
+                  l.a.createElement(
+                    'tr',
+                    null,
+                    l.a.createElement('td', null, 'reverseArrow'),
+                    l.a.createElement(
+                      'td',
+                      null,
+                      '\u7ffb\u8f6c\u6298\u53e0\u63d0\u793a\u7bad\u5934\u7684\u65b9\u5411\uff0c\u5f53 Sider \u5728\u53f3\u8fb9\u65f6\u53ef\u4ee5\u4f7f\u7528',
+                    ),
+                    l.a.createElement('td', null, 'boolean'),
+                    l.a.createElement('td', null, 'false'),
+                  ),
+                  l.a.createElement(
+                    'tr',
+                    null,
+                    l.a.createElement('td', null, 'style'),
+                    l.a.createElement('td', null, '\u6307\u5b9a\u6837\u5f0f'),
+                    l.a.createElement('td', null, 'CSSProperties'),
+                    l.a.createElement('td', null, '-'),
+                  ),
+                  l.a.createElement(
+                    'tr',
+                    null,
+                    l.a.createElement('td', null, 'theme'),
+                    l.a.createElement('td', null, '\u4e3b\u9898\u989c\u8272'),
+                    l.a.createElement(
+                      'td',
+                      null,
+                      l.a.createElement('code', null, 'light'),
+                      ' | ',
+                      l.a.createElement('code', null, 'dark'),
+                    ),
+                    l.a.createElement(
+                      'td',
+                      null,
+                      l.a.createElement('code', null, 'dark'),
+                    ),
+                  ),
+                  l.a.createElement(
+                    'tr',
+                    null,
+                    l.a.createElement('td', null, 'trigger'),
+                    l.a.createElement(
+                      'td',
+                      null,
+                      '\u81ea\u5b9a\u4e49 trigger\uff0c\u8bbe\u7f6e\u4e3a null \u65f6\u9690\u85cf trigger',
+                    ),
+                    l.a.createElement('td', null, 'ReactNode'),
+                    l.a.createElement('td', null, '-'),
+                  ),
+                  l.a.createElement(
+                    'tr',
+                    null,
+                    l.a.createElement('td', null, 'width'),
+                    l.a.createElement('td', null, '\u5bbd\u5ea6'),
+                    l.a.createElement('td', null, 'number | string'),
+                    l.a.createElement('td', null, '200'),
+                  ),
+                  l.a.createElement(
+                    'tr',
+                    null,
+                    l.a.createElement('td', null, 'zeroWidthTriggerStyle'),
+                    l.a.createElement(
+                      'td',
+                      null,
+                      '\u6307\u5b9a\u5f53 ',
+                      l.a.createElement('code', null, 'collapsedWidth'),
+                      ' \u4e3a 0 \u65f6\u51fa\u73b0\u7684\u7279\u6b8a trigger \u7684\u6837\u5f0f',
+                    ),
+                    l.a.createElement('td', null, 'object'),
+                    l.a.createElement('td', null, '-'),
+                  ),
+                  l.a.createElement(
+                    'tr',
+                    null,
+                    l.a.createElement('td', null, 'onBreakpoint'),
+                    l.a.createElement(
+                      'td',
+                      null,
+                      '\u89e6\u53d1\u54cd\u5e94\u5f0f\u5e03\u5c40',
+                      l.a.createElement(
+                        r['AnchorLink'],
+                        { to: '/components/grid/#API' },
+                        '\u65ad\u70b9',
+                      ),
+                      '\u65f6\u7684\u56de\u8c03',
+                    ),
+                    l.a.createElement('td', null, '(broken) => ', '{', '}'),
+                    l.a.createElement('td', null, '-'),
+                  ),
+                  l.a.createElement(
+                    'tr',
+                    null,
+                    l.a.createElement('td', null, 'onCollapse'),
+                    l.a.createElement(
+                      'td',
+                      null,
+                      '\u5c55\u5f00-\u6536\u8d77\u65f6\u7684\u56de\u8c03\u51fd\u6570\uff0c\u6709\u70b9\u51fb trigger \u4ee5\u53ca\u54cd\u5e94\u5f0f\u53cd\u9988\u4e24\u79cd\u65b9\u5f0f\u53ef\u4ee5\u89e6\u53d1',
+                    ),
+                    l.a.createElement(
+                      'td',
+                      null,
+                      '(collapsed, type) => ',
+                      '{',
+                      '}',
+                    ),
+                    l.a.createElement('td', null, '-'),
+                  ),
+                ),
+              ),
+              l.a.createElement(
+                'h4',
+                { id: 'breakpoint-width' },
+                l.a.createElement(
+                  r['AnchorLink'],
+                  {
+                    to: '#breakpoint-width',
+                    'aria-hidden': 'true',
+                    tabIndex: -1,
+                  },
+                  l.a.createElement('span', { className: 'icon icon-link' }),
+                ),
+                'breakpoint width',
+              ),
+              l.a.createElement(o['a'], {
+                code: "{\n  xs: '480px',\n  sm: '576px',\n  md: '768px',\n  lg: '992px',\n  xl: '1200px',\n  xxl: '1600px',\n}",
+                lang: 'ts',
+              }),
+              l.a.createElement('style', {
+                dangerouslySetInnerHTML: {
+                  __html:
+                    '\n  [data-theme="dark"] .site-layout-background {\n    background: #141414;\n  }\n  [data-theme="dark"] .site-layout-header-background {\n    background: #1f1f1f;\n  }\n\n  [data-theme="dark"] .site-layout-content {\n    background: #141414;\n  }\n\n   [data-theme="dark"] .site-layout .site-layout-background {\n    background: #141414;\n  }\n\n  [data-theme="dark"] .site-layout-sub-header-background {\n    background: #141414;\n  }\n\n  #layout-basic {\n  text-align: center;\n}\n#layout-basic .ant-layout-header,\n#layout-basic .ant-layout-footer {\n  color: #fff;\n  background: #7dbcea;\n}\n[data-theme="dark"] #layout-basic .ant-layout-header {\n  background: #6aa0c7;\n}\n[data-theme="dark"] #layout-basic .ant-layout-footer {\n  background: #6aa0c7;\n}\n#layout-basic .ant-layout-footer {\n  line-height: 1.5;\n}\n#layout-basic .ant-layout-sider {\n  color: #fff;\n  line-height: 120px;\n  background: #3ba0e9;\n}\n[data-theme="dark"] #layout-basic .ant-layout-sider {\n  background: #3499ec;\n}\n#layout-basic .ant-layout-content {\n  min-height: 120px;\n  color: #fff;\n  line-height: 120px;\n  background: rgba(16, 142, 233, 1);\n}\n[data-theme="dark"] #layout-basic .ant-layout-content {\n  background: #107bcb;\n}\n#layout-basic .ant-layout + .ant-layout {\n  margin-top: 48px;\n}\n\n.site-layout-content {\n  min-height: 280px;\n  padding: 24px;\n  background: #fff;\n}\n#layout-top .logo {\n  float: left;\n  width: 120px;\n  height: 31px;\n  margin: 16px 24px 16px 0;\n  background: rgba(255, 255, 255, 0.3);\n}\n.ant-row-rtl #layout-top .logo {\n  float: right;\n  margin: 16px 0 16px 24px;\n}\n\n#layout-topside2 .logo {\n  float: left;\n  width: 120px;\n  height: 31px;\n  margin: 16px 24px 16px 0;\n  background: rgba(255, 255, 255, 0.3);\n}\n\n.ant-row-rtl #layout-topside2 .logo {\n  float: right;\n  margin: 16px 0 16px 24px;\n}\n\n.site-layout-background {\n  background: #fff;\n}\n  \n\n#layout-topside .logo {\n  float: left;\n  width: 120px;\n  height: 31px;\n  margin: 16px 24px 16px 0;\n  background: rgba(255, 255, 255, 0.3);\n}\n\n.ant-row-rtl #layout-topside .logo {\n  float: right;\n  margin: 16px 0 16px 24px;\n}\n\n.site-layout-background {\n  background: #fff;\n}\n\n\n#layout-customtrigger .trigger {\n  padding: 0 24px;\n  font-size: 18px;\n  line-height: 64px;\n  cursor: pointer;\n  transition: color 0.3s;\n}\n\n#layout-customtrigger .trigger:hover {\n  color: #1890ff;\n}\n\n#layout-customtrigger .logo {\n  height: 32px;\n  margin: 16px;\n  background: rgba(255, 255, 255, 0.3);\n}\n\n.site-layout .site-layout-background {\n  background: #fff;\n}\n\n\n#layout-responsive .logo {\n  height: 32px;\n  margin: 16px;\n  background: rgba(255, 255, 255, 0.2);\n}\n\n.site-layout-sub-header-background {\n  background: #fff;\n}\n\n.site-layout-background {\n  background: #fff;\n}\n\n',
+                },
+              }),
+            ),
+          ),
+        )
+      );
+    },
+    MZF8: function (e, t, a) {
+      'use strict';
+      var n = a('ogwx');
+      a.d(t, 'a', function () {
+        return n['b'];
+      });
+      a('VCU9');
+    },
+    RZMt: function (e, t, a) {},
+    Zxc8: function (e, t, a) {
+      'use strict';
+      a.r(t);
+      var n = a('q1tI'),
+        l = a.n(n),
+        r = a('k3GJ'),
+        c = a('MZF8'),
+        o = a('dEAq'),
+        u = a('H1Ra');
+      a('RZMt');
+      function i(e, t) {
+        return p(e) || E(e, t) || m(e, t) || d();
+      }
+      function d() {
+        throw new TypeError(
+          'Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.',
+        );
+      }
+      function m(e, t) {
+        if (e) {
+          if ('string' === typeof e) return s(e, t);
+          var a = Object.prototype.toString.call(e).slice(8, -1);
+          return (
+            'Object' === a && e.constructor && (a = e.constructor.name),
+            'Map' === a || 'Set' === a
+              ? Array.from(e)
+              : 'Arguments' === a ||
+                /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a)
+              ? s(e, t)
+              : void 0
+          );
+        }
+      }
+      function s(e, t) {
+        (null == t || t > e.length) && (t = e.length);
+        for (var a = 0, n = new Array(t); a < t; a++) n[a] = e[a];
+        return n;
+      }
+      function E(e, t) {
+        var a =
+          null == e
+            ? null
+            : ('undefined' !== typeof Symbol && e[Symbol.iterator]) ||
+              e['@@iterator'];
+        if (null != a) {
+          var n,
+            l,
+            r = [],
+            c = !0,
+            o = !1;
+          try {
+            for (a = a.call(e); !(c = (n = a.next()).done); c = !0)
+              if ((r.push(n.value), t && r.length === t)) break;
+          } catch (u) {
+            (o = !0), (l = u);
+          } finally {
+            try {
+              c || null == a['return'] || a['return']();
+            } finally {
+              if (o) throw l;
+            }
+          }
+          return r;
+        }
+      }
+      function p(e) {
+        if (Array.isArray(e)) return e;
+      }
+      function f(e, t) {
+        var a,
+          n =
+            null === (a = e.match(/\.(\w+)$/)) || void 0 === a ? void 0 : a[1];
+        return n || (n = t.tsx ? 'tsx' : 'jsx'), n;
+      }
+      var h = function (e) {
+        var t,
+          a,
+          d,
+          m = Object(n['useRef'])(),
+          s = Object(n['useContext'])(o['context']),
+          E = s.locale,
+          p = Object(o['useLocaleProps'])(E, e),
+          h = Object(o['useDemoUrl'])(p.identifier),
+          b = p.demoUrl || h,
+          g =
+            (null === c['a'] || void 0 === c['a']
+              ? void 0
+              : c['a'].location.hash) === '#'.concat(p.identifier),
+          y = 1 === Object.keys(p.sources).length,
+          k = Object(o['useCodeSandbox'])(
+            (
+              null === (t = p.hideActions) || void 0 === t
+                ? void 0
+                : t.includes('CSB')
+            )
+              ? null
+              : p,
+          ),
+          x = Object(o['useRiddle'])(
+            (
+              null === (a = p.hideActions) || void 0 === a
+                ? void 0
+                : a.includes('RIDDLE')
+            )
+              ? null
+              : p,
+          ),
+          v = Object(o['useMotions'])(p.motions || [], m.current),
+          w = i(v, 2),
+          N = w[0],
+          L = w[1],
+          _ = Object(o['useCopy'])(),
+          A = i(_, 2),
+          S = A[0],
+          I = A[1],
+          C = Object(n['useState'])('_'),
+          j = i(C, 2),
+          O = j[0],
+          P = j[1],
+          R = Object(n['useState'])(f(O, p.sources[O])),
+          M = i(R, 2),
+          T = M[0],
+          F = M[1],
+          H = Object(n['useState'])(Boolean(p.defaultShowCode)),
+          q = i(H, 2),
+          U = q[0],
+          Z = q[1],
+          J = Object(n['useState'])(Math.random()),
+          B = i(J, 2),
+          $ = B[0],
+          D = B[1],
+          W = p.sources[O][T] || p.sources[O].content,
+          z = Object(o['useTSPlaygroundUrl'])(E, W),
+          G = Object(n['useRef'])(),
+          X = Object(o['usePrefersColor'])(),
+          K = i(X, 1),
+          V = K[0];
+        function Q(e) {
+          P(e), F(f(e, p.sources[e]));
+        }
+        return (
+          Object(n['useEffect'])(
+            function () {
+              D(Math.random());
+            },
+            [V],
+          ),
+          l.a.createElement(
+            'div',
+            {
+              style: p.style,
+              className: [
+                p.className,
+                '__dumi-default-previewer',
+                g ? '__dumi-default-previewer-target' : '',
+              ]
+                .filter(Boolean)
+                .join(' '),
+              id: p.identifier,
+              'data-debug': p.debug || void 0,
+              'data-iframe': p.iframe || void 0,
+            },
+            p.iframe &&
+              l.a.createElement('div', {
+                className: '__dumi-default-previewer-browser-nav',
+              }),
+            l.a.createElement(
+              'div',
+              {
+                ref: m,
+                className: '__dumi-default-previewer-demo',
+                style: {
+                  transform: p.transform ? 'translate(0, 0)' : void 0,
+                  padding:
+                    p.compact || (p.iframe && !1 !== p.compact) ? '0' : void 0,
+                  background: p.background,
+                },
+              },
+              p.iframe
+                ? l.a.createElement('iframe', {
+                    title: 'dumi-previewer',
+                    style: {
+                      height: String(p.iframe).replace(/(\d)$/, '$1px'),
+                    },
+                    key: $,
+                    src: b,
+                    ref: G,
+                  })
+                : p.children,
+            ),
+            l.a.createElement(
+              'div',
+              {
+                className: '__dumi-default-previewer-desc',
+                'data-title': p.title,
+              },
+              p.title &&
+                l.a.createElement(
+                  o['AnchorLink'],
+                  { to: '#'.concat(p.identifier) },
+                  p.title,
+                ),
+              p.description &&
+                l.a.createElement('div', {
+                  dangerouslySetInnerHTML: { __html: p.description },
+                }),
+            ),
+            l.a.createElement(
+              'div',
+              { className: '__dumi-default-previewer-actions' },
+              k &&
+                l.a.createElement('button', {
+                  title: 'Open demo on CodeSandbox.io',
+                  className: '__dumi-default-icon',
+                  role: 'codesandbox',
+                  onClick: k,
+                }),
+              x &&
+                l.a.createElement('button', {
+                  title: 'Open demo on Riddle',
+                  className: '__dumi-default-icon',
+                  role: 'riddle',
+                  onClick: x,
+                }),
+              p.motions &&
+                l.a.createElement('button', {
+                  title: 'Execute motions',
+                  className: '__dumi-default-icon',
+                  role: 'motions',
+                  disabled: L,
+                  onClick: function () {
+                    return N();
+                  },
+                }),
+              p.iframe &&
+                l.a.createElement('button', {
+                  title: 'Reload demo iframe page',
+                  className: '__dumi-default-icon',
+                  role: 'refresh',
+                  onClick: function () {
+                    return D(Math.random());
+                  },
+                }),
+              !(null === (d = p.hideActions) || void 0 === d
+                ? void 0
+                : d.includes('EXTERNAL')) &&
+                l.a.createElement(
+                  o['Link'],
+                  { target: '_blank', to: b },
+                  l.a.createElement('button', {
+                    title: 'Open demo in new tab',
+                    className: '__dumi-default-icon',
+                    role: 'open-demo',
+                    type: 'button',
+                  }),
+                ),
+              l.a.createElement('span', null),
+              l.a.createElement('button', {
+                title: 'Copy source code',
+                className: '__dumi-default-icon',
+                role: 'copy',
+                'data-status': I,
+                onClick: function () {
+                  return S(W);
+                },
+              }),
+              'tsx' === T &&
+                U &&
+                l.a.createElement(
+                  o['Link'],
+                  { target: '_blank', to: z },
+                  l.a.createElement('button', {
+                    title: 'Get JSX via TypeScript Playground',
+                    className: '__dumi-default-icon',
+                    role: 'change-tsx',
+                    type: 'button',
+                  }),
+                ),
+              l.a.createElement('button', {
+                title: 'Toggle source code panel',
+                className: '__dumi-default-icon'.concat(
+                  U ? ' __dumi-default-btn-expand' : '',
+                ),
+                role: 'source',
+                type: 'button',
+                onClick: function () {
+                  return Z(!U);
+                },
+              }),
+            ),
+            U &&
+              l.a.createElement(
+                'div',
+                { className: '__dumi-default-previewer-source-wrapper' },
+                !y &&
+                  l.a.createElement(
+                    r['b'],
+                    {
+                      className: '__dumi-default-previewer-source-tab',
+                      prefixCls: '__dumi-default-tabs',
+                      moreIcon: '\xb7\xb7\xb7',
+                      defaultActiveKey: O,
+                      onChange: Q,
+                    },
+                    Object.keys(p.sources).map(function (e) {
+                      return l.a.createElement(r['a'], {
+                        tab:
+                          '_' === e ? 'index.'.concat(f(e, p.sources[e])) : e,
+                        key: e,
+                      });
+                    }),
+                  ),
+                l.a.createElement(
+                  'div',
+                  { className: '__dumi-default-previewer-source' },
+                  l.a.createElement(u['a'], { code: W, lang: T, showCopy: !1 }),
+                ),
+              ),
+          )
+        );
+      };
+      t['default'] = h;
+    },
+  },
+]);