You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
829 lines
45 KiB
829 lines
45 KiB
"use strict";(self.webpackChunkantd=self.webpackChunkantd||[]).push([[3853],{927038:function(p,o,t){t.r(o);var _=t(502143),g=t(968521),y=t(720719),v=t(28840),l=t(759907),a=t(828089),b=t(825673),Z=t(902068),h=t(574399),k=t(863942),x=t(316073),f=t(24628),C=t(719260),O=t(956140),c=t(127179),d=t(905388),L=t(40428),B=t(606965),E=t(268696),A=t(587302),r=t(424128),D=t(249706),I=t(795127),M=t(116846),S=t(212039),P=t(73024),T=t(553913),i=t(606641),u=t(667294),n=t(370917);function s(){var m=(0,i.eL)(),e=m.texts;return(0,n.tZ)(i.dY,null,(0,n.tZ)(u.Fragment,null,(0,n.tZ)("div",{className:"markdown"},(0,n.tZ)("p",null,e[0].value),(0,n.tZ)("h2",{id:"\u8BBE\u8BA1\u89C4\u5219"},(0,n.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#\u8BBE\u8BA1\u89C4\u5219",sourceType:"a"},(0,n.tZ)("span",{className:"icon icon-link"})),"\u8BBE\u8BA1\u89C4\u5219"),(0,n.tZ)("h3",{id:"\u5C3A\u5BF8"},(0,n.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#\u5C3A\u5BF8",sourceType:"a"},(0,n.tZ)("span",{className:"icon icon-link"})),"\u5C3A\u5BF8"),(0,n.tZ)("p",null,e[1].value),(0,n.tZ)("ul",null,(0,n.tZ)("li",null,e[2].value,(0,n.tZ)("code",null,e[3].value),e[4].value,(0,n.tZ)("code",null,e[5].value),e[6].value),(0,n.tZ)("li",null,e[7].value,(0,n.tZ)("code",null,e[8].value),e[9].value,(0,n.tZ)("code",null,e[10].value),e[11].value),(0,n.tZ)("li",null,e[12].value,(0,n.tZ)("code",null,e[13].value),e[14].value),(0,n.tZ)("li",null,e[15].value,(0,n.tZ)("code",null,e[16].value),e[17].value)),(0,n.tZ)("h3",{id:"\u4EA4\u4E92"},(0,n.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#\u4EA4\u4E92",sourceType:"a"},(0,n.tZ)("span",{className:"icon icon-link"})),"\u4EA4\u4E92"),(0,n.tZ)("ul",null,(0,n.tZ)("li",null,e[18].value),(0,n.tZ)("li",null,e[19].value),(0,n.tZ)("li",null,e[20].value),(0,n.tZ)("li",null,e[21].value)),(0,n.tZ)("h3",{id:"\u89C6\u89C9"},(0,n.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#\u89C6\u89C9",sourceType:"a"},(0,n.tZ)("span",{className:"icon icon-link"})),"\u89C6\u89C9"),(0,n.tZ)("p",null,e[22].value),(0,n.tZ)("ul",null,(0,n.tZ)("li",null,(0,n.tZ)("p",null,(0,n.tZ)("strong",null,e[23].value)),(0,n.tZ)("p",null,e[24].value)),(0,n.tZ)("li",null,(0,n.tZ)("p",null,(0,n.tZ)("strong",null,e[25].value)),(0,n.tZ)("p",null,e[26].value)),(0,n.tZ)("li",null,(0,n.tZ)("p",null,(0,n.tZ)("strong",null,e[27].value)),(0,n.tZ)("p",null,e[28].value)),(0,n.tZ)("li",null,(0,n.tZ)("p",null,(0,n.tZ)("strong",null,e[29].value)),(0,n.tZ)("p",null,(0,n.tZ)("code",null,e[30].value),e[31].value,(0,n.tZ)("code",null,e[32].value),e[33].value))),(0,n.tZ)("h2",{id:"\u7EC4\u4EF6\u6982\u8FF0"},(0,n.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#\u7EC4\u4EF6\u6982\u8FF0",sourceType:"a"},(0,n.tZ)("span",{className:"icon icon-link"})),"\u7EC4\u4EF6\u6982\u8FF0"),(0,n.tZ)("ul",null,(0,n.tZ)("li",null,(0,n.tZ)("code",null,e[34].value),e[35].value,(0,n.tZ)("code",null,e[36].value),e[37].value,(0,n.tZ)("code",null,e[38].value),e[39].value,(0,n.tZ)("code",null,e[40].value),e[41].value,(0,n.tZ)("code",null,e[42].value),e[43].value,(0,n.tZ)("code",null,e[44].value),e[45].value),(0,n.tZ)("li",null,(0,n.tZ)("code",null,e[46].value),e[47].value,(0,n.tZ)("code",null,e[48].value),e[49].value),(0,n.tZ)("li",null,(0,n.tZ)("code",null,e[50].value),e[51].value,(0,n.tZ)("code",null,e[52].value),e[53].value),(0,n.tZ)("li",null,(0,n.tZ)("code",null,e[54].value),e[55].value,(0,n.tZ)("code",null,e[56].value),e[57].value),(0,n.tZ)("li",null,(0,n.tZ)("code",null,e[58].value),e[59].value,(0,n.tZ)("code",null,e[60].value),e[61].value)),(0,n.tZ)("blockquote",null,(0,n.tZ)("p",null,e[62].value,(0,n.tZ)(r.Z,{href:"http://caniuse.com/#search=flex",sourceType:"a"},e[63].value),e[64].value)),(0,n.tZ)("h2",{id:"\u4EE3\u7801\u6F14\u793A"},(0,n.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#\u4EE3\u7801\u6F14\u793A",sourceType:"a"},(0,n.tZ)("span",{className:"icon icon-link"})),"\u4EE3\u7801\u6F14\u793A")),(0,n.tZ)(d.Z,{items:[{demo:{id:"components-layout-demo-basic"},previewerProps:{title:"\u57FA\u672C\u7ED3\u6784",filename:"components/layout/demo/basic.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { Layout, Space } from 'antd';
|
|
const { Header, Footer, Sider, Content } = Layout;
|
|
const headerStyle = {
|
|
textAlign: 'center',
|
|
color: '#fff',
|
|
height: 64,
|
|
paddingInline: 50,
|
|
lineHeight: '64px',
|
|
backgroundColor: '#7dbcea',
|
|
};
|
|
const contentStyle = {
|
|
textAlign: 'center',
|
|
minHeight: 120,
|
|
lineHeight: '120px',
|
|
color: '#fff',
|
|
backgroundColor: '#108ee9',
|
|
};
|
|
const siderStyle = {
|
|
textAlign: 'center',
|
|
lineHeight: '120px',
|
|
color: '#fff',
|
|
backgroundColor: '#3ba0e9',
|
|
};
|
|
const footerStyle = {
|
|
textAlign: 'center',
|
|
color: '#fff',
|
|
backgroundColor: '#7dbcea',
|
|
};
|
|
const App = () => (
|
|
<Space
|
|
direction="vertical"
|
|
style={{
|
|
width: '100%',
|
|
}}
|
|
size={[0, 48]}
|
|
>
|
|
<Layout>
|
|
<Header style={headerStyle}>Header</Header>
|
|
<Content style={contentStyle}>Content</Content>
|
|
<Footer style={footerStyle}>Footer</Footer>
|
|
</Layout>
|
|
<Layout>
|
|
<Header style={headerStyle}>Header</Header>
|
|
<Layout hasSider>
|
|
<Sider style={siderStyle}>Sider</Sider>
|
|
<Content style={contentStyle}>Content</Content>
|
|
</Layout>
|
|
<Footer style={footerStyle}>Footer</Footer>
|
|
</Layout>
|
|
<Layout>
|
|
<Header style={headerStyle}>Header</Header>
|
|
<Layout hasSider>
|
|
<Content style={contentStyle}>Content</Content>
|
|
<Sider style={siderStyle}>Sider</Sider>
|
|
</Layout>
|
|
<Footer style={footerStyle}>Footer</Footer>
|
|
</Layout>
|
|
<Layout>
|
|
<Sider style={siderStyle}>Sider</Sider>
|
|
<Layout>
|
|
<Header style={headerStyle}>Header</Header>
|
|
<Content style={contentStyle}>Content</Content>
|
|
<Footer style={footerStyle}>Footer</Footer>
|
|
</Layout>
|
|
</Layout>
|
|
</Space>
|
|
);
|
|
export default App;
|
|
`,description:"<p>\u5178\u578B\u7684\u9875\u9762\u5E03\u5C40\u3002</p>"}},{demo:{id:"components-layout-demo-top"},previewerProps:{compact:!0,background:"grey",title:"\u4E0A\u4E2D\u4E0B\u5E03\u5C40",filename:"components/layout/demo/top.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { Breadcrumb, Layout, Menu, theme } from 'antd';
|
|
const { Header, Content, Footer } = Layout;
|
|
const App = () => {
|
|
const {
|
|
token: { colorBgContainer },
|
|
} = theme.useToken();
|
|
return (
|
|
<Layout className="layout">
|
|
<Header
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
}}
|
|
>
|
|
<div className="demo-logo" />
|
|
<Menu
|
|
theme="dark"
|
|
mode="horizontal"
|
|
defaultSelectedKeys={['2']}
|
|
items={new Array(15).fill(null).map((_, index) => {
|
|
const key = index + 1;
|
|
return {
|
|
key,
|
|
label: \`nav \${key}\`,
|
|
};
|
|
})}
|
|
/>
|
|
</Header>
|
|
<Content
|
|
style={{
|
|
padding: '0 50px',
|
|
}}
|
|
>
|
|
<Breadcrumb
|
|
style={{
|
|
margin: '16px 0',
|
|
}}
|
|
>
|
|
<Breadcrumb.Item>Home</Breadcrumb.Item>
|
|
<Breadcrumb.Item>List</Breadcrumb.Item>
|
|
<Breadcrumb.Item>App</Breadcrumb.Item>
|
|
</Breadcrumb>
|
|
<div
|
|
className="site-layout-content"
|
|
style={{
|
|
background: colorBgContainer,
|
|
}}
|
|
>
|
|
Content
|
|
</div>
|
|
</Content>
|
|
<Footer
|
|
style={{
|
|
textAlign: 'center',
|
|
}}
|
|
>
|
|
Ant Design \xA92023 Created by Ant UED
|
|
</Footer>
|
|
</Layout>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:`<p>\u6700\u57FA\u672C\u7684\u300E\u4E0A-\u4E2D-\u4E0B\u300F\u5E03\u5C40\u3002</p>
|
|
<p>\u4E00\u822C\u4E3B\u5BFC\u822A\u653E\u7F6E\u4E8E\u9875\u9762\u7684\u9876\u7AEF\uFF0C\u4ECE\u5DE6\u81EA\u53F3\u4F9D\u6B21\u4E3A\uFF1Alogo\u3001\u4E00\u7EA7\u5BFC\u822A\u9879\u3001\u8F85\u52A9\u83DC\u5355\uFF08\u7528\u6237\u3001\u8BBE\u7F6E\u3001\u901A\u77E5\u7B49\uFF09\u3002\u901A\u5E38\u5C06\u5185\u5BB9\u653E\u5728\u56FA\u5B9A\u5C3A\u5BF8\uFF08\u4F8B\u5982\uFF1A1200px\uFF09\u5185\uFF0C\u6574\u4E2A\u9875\u9762\u6392\u7248\u7A33\u5B9A\uFF0C\u4E0D\u53D7\u7528\u6237\u7EC8\u7AEF\u663E\u793A\u5668\u5F71\u54CD\uFF1B\u4E0A\u4E0B\u7EA7\u7684\u7ED3\u6784\u7B26\u5408\u7528\u6237\u4E0A\u4E0B\u6D4F\u89C8\u7684\u4E60\u60EF\uFF0C\u4E5F\u662F\u8F83\u4E3A\u7ECF\u5178\u7684\u7F51\u7AD9\u5BFC\u822A\u6A21\u5F0F\u3002\u9875\u9762\u4E0A\u4E0B\u5207\u5206\u7684\u65B9\u5F0F\u63D0\u9AD8\u4E86\u4E3B\u5DE5\u4F5C\u533A\u57DF\u7684\u4FE1\u606F\u5C55\u793A\u6548\u7387\uFF0C\u4F46\u5728\u7EB5\u5411\u7A7A\u95F4\u4E0A\u4F1A\u6709\u4E00\u4E9B\u727A\u7272\u3002\u6B64\u5916\uFF0C\u7531\u4E8E\u5BFC\u822A\u680F\u6C34\u5E73\u7A7A\u95F4\u7684\u9650\u5236\uFF0C\u4E0D\u9002\u5408\u90A3\u4E9B\u4E00\u7EA7\u5BFC\u822A\u9879\u5F88\u591A\u7684\u4FE1\u606F\u7ED3\u6784\u3002</p>`}},{demo:{id:"components-layout-demo-top-side"},previewerProps:{compact:!0,background:"grey",title:"\u9876\u90E8-\u4FA7\u8FB9\u5E03\u5C40",filename:"components/layout/demo/top-side.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { LaptopOutlined, NotificationOutlined, UserOutlined } from '@ant-design/icons';
|
|
import { Breadcrumb, Layout, Menu, theme } from 'antd';
|
|
const { Header, Content, Footer, Sider } = Layout;
|
|
const items1 = ['1', '2', '3'].map((key) => ({
|
|
key,
|
|
label: \`nav \${key}\`,
|
|
}));
|
|
const items2 = [UserOutlined, LaptopOutlined, NotificationOutlined].map((icon, index) => {
|
|
const key = String(index + 1);
|
|
return {
|
|
key: \`sub\${key}\`,
|
|
icon: React.createElement(icon),
|
|
label: \`subnav \${key}\`,
|
|
children: new Array(4).fill(null).map((_, j) => {
|
|
const subKey = index * 4 + j + 1;
|
|
return {
|
|
key: subKey,
|
|
label: \`option\${subKey}\`,
|
|
};
|
|
}),
|
|
};
|
|
});
|
|
const App = () => {
|
|
const {
|
|
token: { colorBgContainer },
|
|
} = theme.useToken();
|
|
return (
|
|
<Layout>
|
|
<Header
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
}}
|
|
>
|
|
<div className="demo-logo" />
|
|
<Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} items={items1} />
|
|
</Header>
|
|
<Content
|
|
style={{
|
|
padding: '0 50px',
|
|
}}
|
|
>
|
|
<Breadcrumb
|
|
style={{
|
|
margin: '16px 0',
|
|
}}
|
|
>
|
|
<Breadcrumb.Item>Home</Breadcrumb.Item>
|
|
<Breadcrumb.Item>List</Breadcrumb.Item>
|
|
<Breadcrumb.Item>App</Breadcrumb.Item>
|
|
</Breadcrumb>
|
|
<Layout
|
|
style={{
|
|
padding: '24px 0',
|
|
background: colorBgContainer,
|
|
}}
|
|
>
|
|
<Sider
|
|
style={{
|
|
background: colorBgContainer,
|
|
}}
|
|
width={200}
|
|
>
|
|
<Menu
|
|
mode="inline"
|
|
defaultSelectedKeys={['1']}
|
|
defaultOpenKeys={['sub1']}
|
|
style={{
|
|
height: '100%',
|
|
}}
|
|
items={items2}
|
|
/>
|
|
</Sider>
|
|
<Content
|
|
style={{
|
|
padding: '0 24px',
|
|
minHeight: 280,
|
|
}}
|
|
>
|
|
Content
|
|
</Content>
|
|
</Layout>
|
|
</Content>
|
|
<Footer
|
|
style={{
|
|
textAlign: 'center',
|
|
}}
|
|
>
|
|
Ant Design \xA92023 Created by Ant UED
|
|
</Footer>
|
|
</Layout>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>\u62E5\u6709\u9876\u90E8\u5BFC\u822A\u53CA\u4FA7\u8FB9\u680F\u7684\u9875\u9762\uFF0C\u591A\u7528\u4E8E\u5C55\u793A\u7C7B\u7F51\u7AD9\u3002</p>"}},{demo:{id:"components-layout-demo-top-side-2"},previewerProps:{compact:!0,background:"grey",title:"\u9876\u90E8-\u4FA7\u8FB9\u5E03\u5C40-\u901A\u680F",filename:"components/layout/demo/top-side-2.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { LaptopOutlined, NotificationOutlined, UserOutlined } from '@ant-design/icons';
|
|
import { Breadcrumb, Layout, Menu, theme } from 'antd';
|
|
const { Header, Content, Sider } = Layout;
|
|
const items1 = ['1', '2', '3'].map((key) => ({
|
|
key,
|
|
label: \`nav \${key}\`,
|
|
}));
|
|
const items2 = [UserOutlined, LaptopOutlined, NotificationOutlined].map((icon, index) => {
|
|
const key = String(index + 1);
|
|
return {
|
|
key: \`sub\${key}\`,
|
|
icon: React.createElement(icon),
|
|
label: \`subnav \${key}\`,
|
|
children: new Array(4).fill(null).map((_, j) => {
|
|
const subKey = index * 4 + j + 1;
|
|
return {
|
|
key: subKey,
|
|
label: \`option\${subKey}\`,
|
|
};
|
|
}),
|
|
};
|
|
});
|
|
const App = () => {
|
|
const {
|
|
token: { colorBgContainer },
|
|
} = theme.useToken();
|
|
return (
|
|
<Layout>
|
|
<Header
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
}}
|
|
>
|
|
<div className="demo-logo" />
|
|
<Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} items={items1} />
|
|
</Header>
|
|
<Layout>
|
|
<Sider
|
|
width={200}
|
|
style={{
|
|
background: colorBgContainer,
|
|
}}
|
|
>
|
|
<Menu
|
|
mode="inline"
|
|
defaultSelectedKeys={['1']}
|
|
defaultOpenKeys={['sub1']}
|
|
style={{
|
|
height: '100%',
|
|
borderRight: 0,
|
|
}}
|
|
items={items2}
|
|
/>
|
|
</Sider>
|
|
<Layout
|
|
style={{
|
|
padding: '0 24px 24px',
|
|
}}
|
|
>
|
|
<Breadcrumb
|
|
style={{
|
|
margin: '16px 0',
|
|
}}
|
|
>
|
|
<Breadcrumb.Item>Home</Breadcrumb.Item>
|
|
<Breadcrumb.Item>List</Breadcrumb.Item>
|
|
<Breadcrumb.Item>App</Breadcrumb.Item>
|
|
</Breadcrumb>
|
|
<Content
|
|
style={{
|
|
padding: 24,
|
|
margin: 0,
|
|
minHeight: 280,
|
|
background: colorBgContainer,
|
|
}}
|
|
>
|
|
Content
|
|
</Content>
|
|
</Layout>
|
|
</Layout>
|
|
</Layout>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>\u540C\u6837\u62E5\u6709\u9876\u90E8\u5BFC\u822A\u53CA\u4FA7\u8FB9\u680F\uFF0C\u533A\u522B\u662F\u4E24\u8FB9\u672A\u7559\u8FB9\u8DDD\uFF0C\u591A\u7528\u4E8E\u5E94\u7528\u578B\u7684\u7F51\u7AD9\u3002</p>"}},{demo:{id:"components-layout-demo-side"},previewerProps:{iframe:"360",title:"\u4FA7\u8FB9\u5E03\u5C40",filename:"components/layout/demo/side.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React, { useState } from 'react';
|
|
import {
|
|
DesktopOutlined,
|
|
FileOutlined,
|
|
PieChartOutlined,
|
|
TeamOutlined,
|
|
UserOutlined,
|
|
} from '@ant-design/icons';
|
|
import { Breadcrumb, Layout, Menu, theme } from 'antd';
|
|
const { Header, Content, Footer, Sider } = Layout;
|
|
function getItem(label, key, icon, children) {
|
|
return {
|
|
key,
|
|
icon,
|
|
children,
|
|
label,
|
|
};
|
|
}
|
|
const items = [
|
|
getItem('Option 1', '1', <PieChartOutlined />),
|
|
getItem('Option 2', '2', <DesktopOutlined />),
|
|
getItem('User', 'sub1', <UserOutlined />, [
|
|
getItem('Tom', '3'),
|
|
getItem('Bill', '4'),
|
|
getItem('Alex', '5'),
|
|
]),
|
|
getItem('Team', 'sub2', <TeamOutlined />, [getItem('Team 1', '6'), getItem('Team 2', '8')]),
|
|
getItem('Files', '9', <FileOutlined />),
|
|
];
|
|
const App = () => {
|
|
const [collapsed, setCollapsed] = useState(false);
|
|
const {
|
|
token: { colorBgContainer },
|
|
} = theme.useToken();
|
|
return (
|
|
<Layout
|
|
style={{
|
|
minHeight: '100vh',
|
|
}}
|
|
>
|
|
<Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
|
|
<div className="demo-logo-vertical" />
|
|
<Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} />
|
|
</Sider>
|
|
<Layout>
|
|
<Header
|
|
style={{
|
|
padding: 0,
|
|
background: colorBgContainer,
|
|
}}
|
|
/>
|
|
<Content
|
|
style={{
|
|
margin: '0 16px',
|
|
}}
|
|
>
|
|
<Breadcrumb
|
|
style={{
|
|
margin: '16px 0',
|
|
}}
|
|
>
|
|
<Breadcrumb.Item>User</Breadcrumb.Item>
|
|
<Breadcrumb.Item>Bill</Breadcrumb.Item>
|
|
</Breadcrumb>
|
|
<div
|
|
style={{
|
|
padding: 24,
|
|
minHeight: 360,
|
|
background: colorBgContainer,
|
|
}}
|
|
>
|
|
Bill is a cat.
|
|
</div>
|
|
</Content>
|
|
<Footer
|
|
style={{
|
|
textAlign: 'center',
|
|
}}
|
|
>
|
|
Ant Design \xA92023 Created by Ant UED
|
|
</Footer>
|
|
</Layout>
|
|
</Layout>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:`<p>\u4FA7\u8FB9\u4E24\u5217\u5F0F\u5E03\u5C40\u3002\u9875\u9762\u6A2A\u5411\u7A7A\u95F4\u6709\u9650\u65F6\uFF0C\u4FA7\u8FB9\u5BFC\u822A\u53EF\u6536\u8D77\u3002</p>
|
|
<p>\u4FA7\u8FB9\u5BFC\u822A\u5728\u9875\u9762\u5E03\u5C40\u4E0A\u91C7\u7528\u7684\u662F\u5DE6\u53F3\u7684\u7ED3\u6784\uFF0C\u4E00\u822C\u4E3B\u5BFC\u822A\u653E\u7F6E\u4E8E\u9875\u9762\u7684\u5DE6\u4FA7\u56FA\u5B9A\u4F4D\u7F6E\uFF0C\u8F85\u52A9\u83DC\u5355\u653E\u7F6E\u4E8E\u5DE5\u4F5C\u533A\u9876\u90E8\u3002\u5185\u5BB9\u6839\u636E\u6D4F\u89C8\u5668\u7EC8\u7AEF\u8FDB\u884C\u81EA\u9002\u5E94\uFF0C\u80FD\u63D0\u9AD8\u6A2A\u5411\u7A7A\u95F4\u7684\u4F7F\u7528\u7387\uFF0C\u4F46\u662F\u6574\u4E2A\u9875\u9762\u6392\u7248\u4E0D\u7A33\u5B9A\u3002\u4FA7\u8FB9\u5BFC\u822A\u7684\u6A21\u5F0F\u5C42\u7EA7\u6269\u5C55\u6027\u5F3A\uFF0C\u4E00\u3001\u4E8C\u3001\u4E09\u7EA7\u5BFC\u822A\u9879\u76EE\u53EF\u4EE5\u66F4\u4E3A\u987A\u7545\u4E14\u5177\u5173\u8054\u6027\u7684\u88AB\u5C55\u793A\uFF0C\u540C\u65F6\u4FA7\u8FB9\u5BFC\u822A\u53EF\u4EE5\u56FA\u5B9A\uFF0C\u4F7F\u5F97\u7528\u6237\u5728\u64CD\u4F5C\u548C\u6D4F\u89C8\u4E2D\u53EF\u4EE5\u5FEB\u901F\u7684\u5B9A\u4F4D\u548C\u5207\u6362\u5F53\u524D\u4F4D\u7F6E\uFF0C\u6709\u5F88\u9AD8\u7684\u64CD\u4F5C\u6548\u7387\u3002\u4F46\u8FD9\u7C7B\u5BFC\u822A\u6A2A\u5411\u9875\u9762\u5185\u5BB9\u7684\u7A7A\u95F4\u4F1A\u88AB\u727A\u7272\u4E00\u90E8\u5206\u3002</p>
|
|
<blockquote>
|
|
<p>\u{1F6CE}\uFE0F \u60F3\u8981 3 \u5206\u949F\u5B9E\u73B0\uFF1F\u8BD5\u8BD5 <a href="https://procomponents.ant.design/components/layout">ProLayout</a>\uFF01</p>
|
|
</blockquote>`}},{demo:{id:"components-layout-demo-custom-trigger"},previewerProps:{compact:!0,background:"grey",title:"\u81EA\u5B9A\u4E49\u89E6\u53D1\u5668",filename:"components/layout/demo/custom-trigger.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React, { useState } from 'react';
|
|
import {
|
|
MenuFoldOutlined,
|
|
MenuUnfoldOutlined,
|
|
UploadOutlined,
|
|
UserOutlined,
|
|
VideoCameraOutlined,
|
|
} from '@ant-design/icons';
|
|
import { Layout, Menu, Button, theme } from 'antd';
|
|
const { Header, Sider, Content } = Layout;
|
|
const App = () => {
|
|
const [collapsed, setCollapsed] = useState(false);
|
|
const {
|
|
token: { colorBgContainer },
|
|
} = theme.useToken();
|
|
return (
|
|
<Layout>
|
|
<Sider trigger={null} collapsible collapsed={collapsed}>
|
|
<div className="demo-logo-vertical" />
|
|
<Menu
|
|
theme="dark"
|
|
mode="inline"
|
|
defaultSelectedKeys={['1']}
|
|
items={[
|
|
{
|
|
key: '1',
|
|
icon: <UserOutlined />,
|
|
label: 'nav 1',
|
|
},
|
|
{
|
|
key: '2',
|
|
icon: <VideoCameraOutlined />,
|
|
label: 'nav 2',
|
|
},
|
|
{
|
|
key: '3',
|
|
icon: <UploadOutlined />,
|
|
label: 'nav 3',
|
|
},
|
|
]}
|
|
/>
|
|
</Sider>
|
|
<Layout>
|
|
<Header
|
|
style={{
|
|
padding: 0,
|
|
background: colorBgContainer,
|
|
}}
|
|
>
|
|
<Button
|
|
type="text"
|
|
icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
|
|
onClick={() => setCollapsed(!collapsed)}
|
|
style={{
|
|
fontSize: '16px',
|
|
width: 64,
|
|
height: 64,
|
|
}}
|
|
/>
|
|
</Header>
|
|
<Content
|
|
style={{
|
|
margin: '24px 16px',
|
|
padding: 24,
|
|
minHeight: 280,
|
|
background: colorBgContainer,
|
|
}}
|
|
>
|
|
Content
|
|
</Content>
|
|
</Layout>
|
|
</Layout>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>\u8981\u4F7F\u7528\u81EA\u5B9A\u4E49\u89E6\u53D1\u5668\uFF0C\u53EF\u4EE5\u8BBE\u7F6E <code>trigger={null}</code> \u6765\u9690\u85CF\u9ED8\u8BA4\u8BBE\u5B9A\u3002</p>"}},{demo:{id:"components-layout-demo-responsive"},previewerProps:{compact:!0,background:"grey",title:"\u54CD\u5E94\u5F0F\u5E03\u5C40",filename:"components/layout/demo/responsive.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { UploadOutlined, UserOutlined, VideoCameraOutlined } from '@ant-design/icons';
|
|
import { Layout, Menu, theme } from 'antd';
|
|
const { Header, Content, Footer, Sider } = Layout;
|
|
const App = () => {
|
|
const {
|
|
token: { colorBgContainer },
|
|
} = theme.useToken();
|
|
return (
|
|
<Layout>
|
|
<Sider
|
|
breakpoint="lg"
|
|
collapsedWidth="0"
|
|
onBreakpoint={(broken) => {
|
|
console.log(broken);
|
|
}}
|
|
onCollapse={(collapsed, type) => {
|
|
console.log(collapsed, type);
|
|
}}
|
|
>
|
|
<div className="demo-logo-vertical" />
|
|
<Menu
|
|
theme="dark"
|
|
mode="inline"
|
|
defaultSelectedKeys={['4']}
|
|
items={[UserOutlined, VideoCameraOutlined, UploadOutlined, UserOutlined].map(
|
|
(icon, index) => ({
|
|
key: String(index + 1),
|
|
icon: React.createElement(icon),
|
|
label: \`nav \${index + 1}\`,
|
|
}),
|
|
)}
|
|
/>
|
|
</Sider>
|
|
<Layout>
|
|
<Header
|
|
style={{
|
|
padding: 0,
|
|
background: colorBgContainer,
|
|
}}
|
|
/>
|
|
<Content
|
|
style={{
|
|
margin: '24px 16px 0',
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
padding: 24,
|
|
minHeight: 360,
|
|
background: colorBgContainer,
|
|
}}
|
|
>
|
|
content
|
|
</div>
|
|
</Content>
|
|
<Footer
|
|
style={{
|
|
textAlign: 'center',
|
|
}}
|
|
>
|
|
Ant Design \xA92023 Created by Ant UED
|
|
</Footer>
|
|
</Layout>
|
|
</Layout>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:`<p>Layout.Sider \u652F\u6301\u54CD\u5E94\u5F0F\u5E03\u5C40\u3002</p>
|
|
<blockquote>
|
|
<p>\u8BF4\u660E\uFF1A\u914D\u7F6E <code>breakpoint</code> \u5C5E\u6027\u5373\u751F\u6548\uFF0C\u89C6\u7A97\u5BBD\u5EA6\u5C0F\u4E8E <code>breakpoint</code> \u65F6 Sider \u7F29\u5C0F\u4E3A <code>collapsedWidth</code> \u5BBD\u5EA6\uFF0C\u82E5\u5C06 <code>collapsedWidth</code> \u8BBE\u7F6E\u4E3A 0\uFF0C\u4F1A\u51FA\u73B0\u7279\u6B8A trigger\u3002</p>
|
|
</blockquote>`}},{demo:{id:"components-layout-demo-fixed"},previewerProps:{iframe:"360",title:"\u56FA\u5B9A\u5934\u90E8",filename:"components/layout/demo/fixed.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { Breadcrumb, Layout, Menu, theme } from 'antd';
|
|
const { Header, Content, Footer } = Layout;
|
|
const App = () => {
|
|
const {
|
|
token: { colorBgContainer },
|
|
} = theme.useToken();
|
|
return (
|
|
<Layout>
|
|
<Header
|
|
style={{
|
|
position: 'sticky',
|
|
top: 0,
|
|
zIndex: 1,
|
|
width: '100%',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
}}
|
|
>
|
|
<div className="demo-logo" />
|
|
<Menu
|
|
theme="dark"
|
|
mode="horizontal"
|
|
defaultSelectedKeys={['2']}
|
|
items={new Array(3).fill(null).map((_, index) => ({
|
|
key: String(index + 1),
|
|
label: \`nav \${index + 1}\`,
|
|
}))}
|
|
/>
|
|
</Header>
|
|
<Content
|
|
className="site-layout"
|
|
style={{
|
|
padding: '0 50px',
|
|
}}
|
|
>
|
|
<Breadcrumb
|
|
style={{
|
|
margin: '16px 0',
|
|
}}
|
|
>
|
|
<Breadcrumb.Item>Home</Breadcrumb.Item>
|
|
<Breadcrumb.Item>List</Breadcrumb.Item>
|
|
<Breadcrumb.Item>App</Breadcrumb.Item>
|
|
</Breadcrumb>
|
|
<div
|
|
style={{
|
|
padding: 24,
|
|
minHeight: 380,
|
|
background: colorBgContainer,
|
|
}}
|
|
>
|
|
Content
|
|
</div>
|
|
</Content>
|
|
<Footer
|
|
style={{
|
|
textAlign: 'center',
|
|
}}
|
|
>
|
|
Ant Design \xA92023 Created by Ant UED
|
|
</Footer>
|
|
</Layout>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>\u4E00\u822C\u7528\u4E8E\u56FA\u5B9A\u9876\u90E8\u5BFC\u822A\uFF0C\u65B9\u4FBF\u9875\u9762\u5207\u6362\u3002</p>"}},{demo:{id:"components-layout-demo-fixed-sider"},previewerProps:{iframe:"360",title:"\u56FA\u5B9A\u4FA7\u8FB9\u680F",filename:"components/layout/demo/fixed-sider.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import {
|
|
AppstoreOutlined,
|
|
BarChartOutlined,
|
|
CloudOutlined,
|
|
ShopOutlined,
|
|
TeamOutlined,
|
|
UploadOutlined,
|
|
UserOutlined,
|
|
VideoCameraOutlined,
|
|
} from '@ant-design/icons';
|
|
import { Layout, Menu, theme } from 'antd';
|
|
const { Header, Content, Footer, Sider } = Layout;
|
|
const items = [
|
|
UserOutlined,
|
|
VideoCameraOutlined,
|
|
UploadOutlined,
|
|
BarChartOutlined,
|
|
CloudOutlined,
|
|
AppstoreOutlined,
|
|
TeamOutlined,
|
|
ShopOutlined,
|
|
].map((icon, index) => ({
|
|
key: String(index + 1),
|
|
icon: React.createElement(icon),
|
|
label: \`nav \${index + 1}\`,
|
|
}));
|
|
const App = () => {
|
|
const {
|
|
token: { colorBgContainer },
|
|
} = theme.useToken();
|
|
return (
|
|
<Layout hasSider>
|
|
<Sider
|
|
style={{
|
|
overflow: 'auto',
|
|
height: '100vh',
|
|
position: 'fixed',
|
|
left: 0,
|
|
top: 0,
|
|
bottom: 0,
|
|
}}
|
|
>
|
|
<div className="demo-logo-vertical" />
|
|
<Menu theme="dark" mode="inline" defaultSelectedKeys={['4']} items={items} />
|
|
</Sider>
|
|
<Layout
|
|
className="site-layout"
|
|
style={{
|
|
marginLeft: 200,
|
|
}}
|
|
>
|
|
<Header
|
|
style={{
|
|
padding: 0,
|
|
background: colorBgContainer,
|
|
}}
|
|
/>
|
|
<Content
|
|
style={{
|
|
margin: '24px 16px 0',
|
|
overflow: 'initial',
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
padding: 24,
|
|
textAlign: 'center',
|
|
background: colorBgContainer,
|
|
}}
|
|
>
|
|
<p>long content</p>
|
|
{
|
|
// indicates very long content
|
|
Array.from(
|
|
{
|
|
length: 100,
|
|
},
|
|
(_, index) => (
|
|
<React.Fragment key={index}>
|
|
{index % 20 === 0 && index ? 'more' : '...'}
|
|
<br />
|
|
</React.Fragment>
|
|
),
|
|
)
|
|
}
|
|
</div>
|
|
</Content>
|
|
<Footer
|
|
style={{
|
|
textAlign: 'center',
|
|
}}
|
|
>
|
|
Ant Design \xA92023 Created by Ant UED
|
|
</Footer>
|
|
</Layout>
|
|
</Layout>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>\u5F53\u5185\u5BB9\u8F83\u957F\u65F6\uFF0C\u4F7F\u7528\u56FA\u5B9A\u4FA7\u8FB9\u680F\u53EF\u4EE5\u63D0\u4F9B\u66F4\u597D\u7684\u4F53\u9A8C\u3002</p>"}},{demo:{id:"components-layout-demo-custom-trigger-debug"},previewerProps:{compact:!0,background:"grey",debug:!0,title:"\u81EA\u5B9A\u4E49\u89E6\u53D1\u5668 Debug",filename:"components/layout/demo/custom-trigger-debug.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React, { useState } from 'react';
|
|
import {
|
|
DesktopOutlined,
|
|
FileOutlined,
|
|
MenuFoldOutlined,
|
|
MenuUnfoldOutlined,
|
|
PieChartOutlined,
|
|
TeamOutlined,
|
|
UserOutlined,
|
|
} from '@ant-design/icons';
|
|
import { Layout, Menu, Button, theme } from 'antd';
|
|
const { Header, Sider, Content } = Layout;
|
|
const items = [
|
|
{
|
|
key: '1',
|
|
icon: <PieChartOutlined />,
|
|
label: 'Option 1',
|
|
},
|
|
{
|
|
key: '2',
|
|
icon: <DesktopOutlined />,
|
|
label: 'Option 2',
|
|
},
|
|
{
|
|
key: 'sub1',
|
|
icon: <UserOutlined />,
|
|
label: 'User',
|
|
children: [
|
|
{
|
|
key: '3',
|
|
label: 'Tom',
|
|
},
|
|
{
|
|
key: '4',
|
|
label: 'Bill',
|
|
},
|
|
{
|
|
key: '5',
|
|
label: 'Alex',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
key: 'sub2',
|
|
icon: <TeamOutlined />,
|
|
label: 'Team',
|
|
children: [
|
|
{
|
|
key: '6',
|
|
label: 'Team 1',
|
|
},
|
|
{
|
|
key: '7',
|
|
label: 'Team 2',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
key: '9',
|
|
icon: <FileOutlined />,
|
|
},
|
|
];
|
|
const App = () => {
|
|
const [collapsed, setCollapsed] = useState(true);
|
|
const {
|
|
token: { colorBgContainer },
|
|
} = theme.useToken();
|
|
return (
|
|
<Layout>
|
|
<Sider trigger={null} collapsible collapsed={collapsed}>
|
|
<div className="demo-logo-vertical" />
|
|
<Menu
|
|
theme="dark"
|
|
mode="inline"
|
|
defaultSelectedKeys={['3']}
|
|
defaultOpenKeys={['sub1']}
|
|
items={items}
|
|
/>
|
|
</Sider>
|
|
<Layout>
|
|
<Header
|
|
style={{
|
|
padding: 0,
|
|
background: colorBgContainer,
|
|
}}
|
|
>
|
|
<Button
|
|
type="text"
|
|
icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
|
|
onClick={() => setCollapsed(!collapsed)}
|
|
style={{
|
|
fontSize: '16px',
|
|
width: 64,
|
|
height: 64,
|
|
}}
|
|
/>
|
|
</Header>
|
|
<Content
|
|
style={{
|
|
margin: '24px 16px',
|
|
padding: 24,
|
|
minHeight: 280,
|
|
background: colorBgContainer,
|
|
}}
|
|
>
|
|
Content
|
|
</Content>
|
|
</Layout>
|
|
</Layout>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>\u4FEE\u6539\u5185\u5BB9\u524D\uFF0C\u8BF7\u5C1D\u8BD5\u6B64 Demo \u67E5\u770B\u6837\u5F0F\u662F\u5426\u6296\u52A8\u3002</p>"}}]}),(0,n.tZ)("div",{className:"markdown"},(0,n.tZ)("h2",{id:"api"},(0,n.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#api",sourceType:"a"},(0,n.tZ)("span",{className:"icon icon-link"})),"API"),(0,n.tZ)(l.Z,{lang:"jsx"},e[65].value),(0,n.tZ)("h3",{id:"layout"},(0,n.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#layout",sourceType:"a"},(0,n.tZ)("span",{className:"icon icon-link"})),"Layout"),(0,n.tZ)("p",null,e[66].value),(0,n.tZ)(a.Z,{className:"component-api-table"},(0,n.tZ)("thead",null,(0,n.tZ)("tr",null,(0,n.tZ)("th",null,e[67].value),(0,n.tZ)("th",null,e[68].value),(0,n.tZ)("th",null,e[69].value),(0,n.tZ)("th",null,e[70].value))),(0,n.tZ)("tbody",null,(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[71].value),(0,n.tZ)("td",null,e[72].value),(0,n.tZ)("td",null,e[73].value),(0,n.tZ)("td",null,e[74].value)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[75].value),(0,n.tZ)("td",null,e[76].value),(0,n.tZ)("td",null,e[77].value),(0,n.tZ)("td",null,e[78].value)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[79].value),(0,n.tZ)("td",null,e[80].value),(0,n.tZ)("td",null,e[81].value),(0,n.tZ)("td",null,e[82].value)))),(0,n.tZ)("h3",{id:"layoutsider"},(0,n.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#layoutsider",sourceType:"a"},(0,n.tZ)("span",{className:"icon icon-link"})),"Layout.Sider"),(0,n.tZ)("p",null,e[83].value),(0,n.tZ)(a.Z,{className:"component-api-table"},(0,n.tZ)("thead",null,(0,n.tZ)("tr",null,(0,n.tZ)("th",null,e[84].value),(0,n.tZ)("th",null,e[85].value),(0,n.tZ)("th",null,e[86].value),(0,n.tZ)("th",null,e[87].value))),(0,n.tZ)("tbody",null,(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[88].value),(0,n.tZ)("td",null,e[89].value,(0,n.tZ)(r.Z,{to:"/components/grid-cn#col",sourceType:"Link"},e[90].value)),(0,n.tZ)("td",null,(0,n.tZ)("code",null,e[91].value),e[92].value,(0,n.tZ)("code",null,e[93].value),e[94].value,(0,n.tZ)("code",null,e[95].value),e[96].value,(0,n.tZ)("code",null,e[97].value),e[98].value,(0,n.tZ)("code",null,e[99].value),e[100].value,(0,n.tZ)("code",null,e[101].value)),(0,n.tZ)("td",null,e[102].value)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[103].value),(0,n.tZ)("td",null,e[104].value),(0,n.tZ)("td",null,e[105].value),(0,n.tZ)("td",null,e[106].value)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[107].value),(0,n.tZ)("td",null,e[108].value),(0,n.tZ)("td",null,e[109].value),(0,n.tZ)("td",null,e[110].value)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[111].value),(0,n.tZ)("td",null,e[112].value),(0,n.tZ)("td",null,e[113].value),(0,n.tZ)("td",null,e[114].value)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[115].value),(0,n.tZ)("td",null,e[116].value),(0,n.tZ)("td",null,e[117].value),(0,n.tZ)("td",null,e[118].value)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[119].value),(0,n.tZ)("td",null,e[120].value),(0,n.tZ)("td",null,e[121].value),(0,n.tZ)("td",null,e[122].value)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[123].value),(0,n.tZ)("td",null,e[124].value),(0,n.tZ)("td",null,e[125].value),(0,n.tZ)("td",null,e[126].value)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[127].value),(0,n.tZ)("td",null,e[128].value),(0,n.tZ)("td",null,e[129].value),(0,n.tZ)("td",null,e[130].value)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[131].value),(0,n.tZ)("td",null,e[132].value),(0,n.tZ)("td",null,(0,n.tZ)("code",null,e[133].value),e[134].value,(0,n.tZ)("code",null,e[135].value)),(0,n.tZ)("td",null,(0,n.tZ)("code",null,e[136].value))),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[137].value),(0,n.tZ)("td",null,e[138].value),(0,n.tZ)("td",null,e[139].value),(0,n.tZ)("td",null,e[140].value)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[141].value),(0,n.tZ)("td",null,e[142].value),(0,n.tZ)("td",null,e[143].value),(0,n.tZ)("td",null,e[144].value)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[145].value),(0,n.tZ)("td",null,e[146].value,(0,n.tZ)("code",null,e[147].value),e[148].value),(0,n.tZ)("td",null,e[149].value),(0,n.tZ)("td",null,e[150].value)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[151].value),(0,n.tZ)("td",null,e[152].value,(0,n.tZ)(r.Z,{to:"/components/grid-cn#api",sourceType:"Link"},e[153].value),e[154].value),(0,n.tZ)("td",null,e[155].value),(0,n.tZ)("td",null,e[156].value)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[157].value),(0,n.tZ)("td",null,e[158].value),(0,n.tZ)("td",null,e[159].value),(0,n.tZ)("td",null,e[160].value)))),(0,n.tZ)("h4",{id:"breakpoint-width"},(0,n.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#breakpoint-width",sourceType:"a"},(0,n.tZ)("span",{className:"icon icon-link"})),"breakpoint width"),(0,n.tZ)(l.Z,{lang:"js"},e[161].value),(0,n.tZ)("h2",{id:"design-token"},(0,n.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#design-token",sourceType:"a"},(0,n.tZ)("span",{className:"icon icon-link"})),"Design Token")),(0,n.tZ)(c.Z,{component:"Layout"})))}o.default=s}}]);
|
|
|