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.
828 lines
43 KiB
828 lines
43 KiB
"use strict";(self.webpackChunkantd=self.webpackChunkantd||[]).push([[4852],{284568:function(p,r,t){t.r(r);var _=t(502143),g=t(968521),y=t(720719),v=t(28840),l=t(759907),a=t(828089),h=t(825673),b=t(902068),Z=t(574399),f=t(863942),x=t(316073),k=t(24628),C=t(719260),O=t(956140),c=t(127179),d=t(905388),L=t(40428),B=t(606965),w=t(268696),E=t(587302),o=t(424128),I=t(249706),S=t(795127),A=t(116846),D=t(212039),M=t(73024),T=t(553913),i=t(606641),s=t(667294),e=t(370917);function u(){var m=(0,i.eL)(),n=m.texts;return(0,e.tZ)(i.dY,null,(0,e.tZ)(s.Fragment,null,(0,e.tZ)("div",{className:"markdown"},(0,e.tZ)("p",null,n[0].value),(0,e.tZ)("h2",{id:"specification"},(0,e.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#specification",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Specification"),(0,e.tZ)("h3",{id:"size"},(0,e.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#size",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Size"),(0,e.tZ)("p",null,n[1].value),(0,e.tZ)("ul",null,(0,e.tZ)("li",null,n[2].value,(0,e.tZ)("code",null,n[3].value),n[4].value,(0,e.tZ)("code",null,n[5].value),n[6].value),(0,e.tZ)("li",null,n[7].value,(0,e.tZ)("code",null,n[8].value),n[9].value,(0,e.tZ)("code",null,n[10].value),n[11].value),(0,e.tZ)("li",null,n[12].value,(0,e.tZ)("code",null,n[13].value),n[14].value),(0,e.tZ)("li",null,n[15].value,(0,e.tZ)("code",null,n[16].value),n[17].value)),(0,e.tZ)("h3",{id:"interaction-rules"},(0,e.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#interaction-rules",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Interaction rules"),(0,e.tZ)("ul",null,(0,e.tZ)("li",null,n[18].value),(0,e.tZ)("li",null,n[19].value),(0,e.tZ)("li",null,n[20].value),(0,e.tZ)("li",null,n[21].value)),(0,e.tZ)("h2",{id:"visualization-rules"},(0,e.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#visualization-rules",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Visualization rules"),(0,e.tZ)("p",null,n[22].value),(0,e.tZ)("ul",null,(0,e.tZ)("li",null,(0,e.tZ)("p",null,(0,e.tZ)("strong",null,n[23].value)),(0,e.tZ)("p",null,n[24].value)),(0,e.tZ)("li",null,(0,e.tZ)("p",null,(0,e.tZ)("strong",null,n[25].value)),(0,e.tZ)("p",null,n[26].value)),(0,e.tZ)("li",null,(0,e.tZ)("p",null,(0,e.tZ)("strong",null,n[27].value)),(0,e.tZ)("p",null,n[28].value)),(0,e.tZ)("li",null,(0,e.tZ)("p",null,(0,e.tZ)("strong",null,n[29].value)),(0,e.tZ)("p",null,(0,e.tZ)("code",null,n[30].value),n[31].value,(0,e.tZ)("code",null,n[32].value),n[33].value,(0,e.tZ)("code",null,n[34].value),n[35].value))),(0,e.tZ)("h2",{id:"component-overview"},(0,e.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#component-overview",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Component Overview"),(0,e.tZ)("ul",null,(0,e.tZ)("li",null,(0,e.tZ)("code",null,n[36].value),n[37].value,(0,e.tZ)("code",null,n[38].value),n[39].value,(0,e.tZ)("code",null,n[40].value),n[41].value,(0,e.tZ)("code",null,n[42].value),n[43].value,(0,e.tZ)("code",null,n[44].value),n[45].value,(0,e.tZ)("code",null,n[46].value),n[47].value),(0,e.tZ)("li",null,(0,e.tZ)("code",null,n[48].value),n[49].value,(0,e.tZ)("code",null,n[50].value),n[51].value),(0,e.tZ)("li",null,(0,e.tZ)("code",null,n[52].value),n[53].value,(0,e.tZ)("code",null,n[54].value),n[55].value),(0,e.tZ)("li",null,(0,e.tZ)("code",null,n[56].value),n[57].value,(0,e.tZ)("code",null,n[58].value),n[59].value),(0,e.tZ)("li",null,(0,e.tZ)("code",null,n[60].value),n[61].value,(0,e.tZ)("code",null,n[62].value),n[63].value)),(0,e.tZ)("blockquote",null,(0,e.tZ)("p",null,n[64].value,(0,e.tZ)("code",null,n[65].value),n[66].value,(0,e.tZ)(o.Z,{href:"http://caniuse.com/#search=flex",sourceType:"a"},n[67].value),n[68].value)),(0,e.tZ)("h2",{id:"examples"},(0,e.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#examples",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Examples")),(0,e.tZ)(d.Z,{items:[{demo:{id:"components-layout-demo-basic"},previewerProps:{title:"Basic Structure",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>Classic page layouts.</p>"}},{demo:{id:"components-layout-demo-top"},previewerProps:{compact:!0,background:"grey",title:"Header-Content-Footer",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>The most basic "header-content-footer" layout.</p>
|
|
<p>Generally, the mainnav is placed at the top of the page, and includes the logo, the first level navigation, and the secondary menu (users, settings, notifications) from left to right in it. We always put contents in a fixed size navigation (eg: <code>1200px</code>), the layout of the whole page is stable, it's not affected by viewing area.</p>
|
|
<p>Top-bottom structure is conform with the top-bottom viewing habit, it's a classical navigation pattern of websites. This pattern demonstrates efficiency in the main workarea, while using some vertical space. And because the horizontal space of the navigation is limited, this pattern is not suitable for cases when the first level navigation contains many elements or links.</p>`}},{demo:{id:"components-layout-demo-top-side"},previewerProps:{compact:!0,background:"grey",title:"Header-Sider",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>Both the top navigation and the sidebar, commonly used in documentation site.</p>"}},{demo:{id:"components-layout-demo-top-side-2"},previewerProps:{compact:!0,background:"grey",title:"Header Sider 2",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>Both the top navigation and the sidebar, commonly used in application site.</p>"}},{demo:{id:"components-layout-demo-side"},previewerProps:{iframe:"360",title:"Sider",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>Two-columns layout. The sider menu can be collapsed when horizontal space is limited.</p>
|
|
<p>Generally, the mainnav is placed on the left side of the page, and the secondary menu is placed on the top of the working area. Contents will adapt the layout to the viewing area to improve the horizontal space usage, while the layout of the whole page is not stable.</p>
|
|
<p>The level of the aside navigation is scalable. The first, second, and third level navigations could be present more fluently and relevantly, and aside navigation can be fixed, allowing the user to quickly switch and spot the current position, improving the user experience. However, this navigation occupies some horizontal space of the contents.</p>`}},{demo:{id:"components-layout-demo-custom-trigger"},previewerProps:{compact:!0,background:"grey",title:"Custom trigger",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>If you want to use a customized trigger, you can hide the default one by setting <code>trigger={null}</code>.</p>"}},{demo:{id:"components-layout-demo-responsive"},previewerProps:{compact:!0,background:"grey",title:"Responsive",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 supports responsive layout.</p>
|
|
<blockquote>
|
|
<p>Note: You can get a responsive layout by setting <code>breakpoint</code>, the Sider will collapse to the width of <code>collapsedWidth</code> when window width is below the <code>breakpoint</code>. And a special trigger will appear if the <code>collapsedWidth</code> is set to 0.</p>
|
|
</blockquote>`}},{demo:{id:"components-layout-demo-fixed"},previewerProps:{iframe:"360",title:"Fixed Header",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>Fixed Header is generally used to fix the top navigation to facilitate page switching.</p>"}},{demo:{id:"components-layout-demo-fixed-sider"},previewerProps:{iframe:"360",title:"Fixed Sider",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>When dealing with long content, a fixed sider can provide a better user experience.</p>"}},{demo:{id:"components-layout-demo-custom-trigger-debug"},previewerProps:{compact:!0,background:"grey",debug:!0,title:"Custom trigger 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;
|
|
`}}]}),(0,e.tZ)("div",{className:"markdown"},(0,e.tZ)("h2",{id:"api"},(0,e.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#api",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"API"),(0,e.tZ)(l.Z,{lang:"jsx"},n[69].value),(0,e.tZ)("h3",{id:"layout"},(0,e.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#layout",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Layout"),(0,e.tZ)("p",null,n[70].value),(0,e.tZ)(a.Z,{className:"component-api-table"},(0,e.tZ)("thead",null,(0,e.tZ)("tr",null,(0,e.tZ)("th",null,n[71].value),(0,e.tZ)("th",null,n[72].value),(0,e.tZ)("th",null,n[73].value),(0,e.tZ)("th",null,n[74].value))),(0,e.tZ)("tbody",null,(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[75].value),(0,e.tZ)("td",null,n[76].value),(0,e.tZ)("td",null,n[77].value),(0,e.tZ)("td",null,n[78].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[79].value),(0,e.tZ)("td",null,n[80].value),(0,e.tZ)("td",null,n[81].value),(0,e.tZ)("td",null,n[82].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[83].value),(0,e.tZ)("td",null,n[84].value),(0,e.tZ)("td",null,n[85].value),(0,e.tZ)("td",null,n[86].value)))),(0,e.tZ)("h3",{id:"layoutsider"},(0,e.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#layoutsider",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Layout.Sider"),(0,e.tZ)("p",null,n[87].value),(0,e.tZ)(a.Z,{className:"component-api-table"},(0,e.tZ)("thead",null,(0,e.tZ)("tr",null,(0,e.tZ)("th",null,n[88].value),(0,e.tZ)("th",null,n[89].value),(0,e.tZ)("th",null,n[90].value),(0,e.tZ)("th",null,n[91].value))),(0,e.tZ)("tbody",null,(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[92].value),(0,e.tZ)("td",null,(0,e.tZ)(o.Z,{to:"/components/grid/#col",sourceType:"Link"},n[93].value),n[94].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[95].value),n[96].value,(0,e.tZ)("code",null,n[97].value),n[98].value,(0,e.tZ)("code",null,n[99].value),n[100].value,(0,e.tZ)("code",null,n[101].value),n[102].value,(0,e.tZ)("code",null,n[103].value),n[104].value,(0,e.tZ)("code",null,n[105].value)),(0,e.tZ)("td",null,n[106].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[107].value),(0,e.tZ)("td",null,n[108].value),(0,e.tZ)("td",null,n[109].value),(0,e.tZ)("td",null,n[110].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[111].value),(0,e.tZ)("td",null,n[112].value),(0,e.tZ)("td",null,n[113].value),(0,e.tZ)("td",null,n[114].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[115].value),(0,e.tZ)("td",null,n[116].value),(0,e.tZ)("td",null,n[117].value),(0,e.tZ)("td",null,n[118].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[119].value),(0,e.tZ)("td",null,n[120].value),(0,e.tZ)("td",null,n[121].value),(0,e.tZ)("td",null,n[122].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[123].value),(0,e.tZ)("td",null,n[124].value),(0,e.tZ)("td",null,n[125].value),(0,e.tZ)("td",null,n[126].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[127].value),(0,e.tZ)("td",null,n[128].value),(0,e.tZ)("td",null,n[129].value),(0,e.tZ)("td",null,n[130].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[131].value),(0,e.tZ)("td",null,n[132].value),(0,e.tZ)("td",null,n[133].value),(0,e.tZ)("td",null,n[134].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[135].value),(0,e.tZ)("td",null,n[136].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[137].value),n[138].value,(0,e.tZ)("code",null,n[139].value)),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[140].value))),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[141].value),(0,e.tZ)("td",null,n[142].value),(0,e.tZ)("td",null,n[143].value),(0,e.tZ)("td",null,n[144].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[145].value),(0,e.tZ)("td",null,n[146].value),(0,e.tZ)("td",null,n[147].value),(0,e.tZ)("td",null,n[148].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[149].value),(0,e.tZ)("td",null,n[150].value,(0,e.tZ)("code",null,n[151].value),n[152].value),(0,e.tZ)("td",null,n[153].value),(0,e.tZ)("td",null,n[154].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[155].value),(0,e.tZ)("td",null,n[156].value,(0,e.tZ)(o.Z,{to:"/components/grid/#api",sourceType:"Link"},n[157].value),n[158].value),(0,e.tZ)("td",null,n[159].value),(0,e.tZ)("td",null,n[160].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[161].value),(0,e.tZ)("td",null,n[162].value),(0,e.tZ)("td",null,n[163].value),(0,e.tZ)("td",null,n[164].value)))),(0,e.tZ)("h4",{id:"breakpoint-width"},(0,e.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#breakpoint-width",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"breakpoint width"),(0,e.tZ)(l.Z,{lang:"js"},n[165].value),(0,e.tZ)("h2",{id:"design-token"},(0,e.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#design-token",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Design Token")),(0,e.tZ)(c.Z,{component:"Layout"})))}r.default=u}}]);
|
|
|