test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 12:09:14 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

docs: update Layout demo (#39255)

Browse Source 
* docs: update Layout demo

* chore: code clean

* chore: update snapshot
This commit is contained in:
MadCcc 2022-12-05 14:06:42 +08:00 committed by GitHub
parent 7b92c1ab13
commit fbab5df655
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 306 additions and 378 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
components/layout/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -380,8 +380,8 @@ exports[`renders ./components/layout/demo/custom-trigger.tsx extend context corr
class="ant-layout site-layout" class="ant-layout site-layout"
> >
<header <header
class="ant-layout-header site-layout-background" class="ant-layout-header"
style="padding:0" style="padding:0;background:#ffffff"
> >
<span <span
aria-label="menu-fold" aria-label="menu-fold"
@ -405,8 +405,8 @@ exports[`renders ./components/layout/demo/custom-trigger.tsx extend context corr
</span> </span>
</header> </header>
<main <main
class="ant-layout-content site-layout-background" class="ant-layout-content"
style="margin:24px 16px;padding:24px;min-height:280px" style="margin:24px 16px;padding:24px;min-height:280px;background:#ffffff"
> >
Content Content
</main> </main>
@ -423,7 +423,7 @@ exports[`renders ./components/layout/demo/fixed.tsx extend context correctly 1`]
style="position:sticky;top:0;z-index:1;width:100%" style="position:sticky;top:0;z-index:1;width:100%"
> >
<div <div
class="logo" style="float:left;width:120px;height:31px;margin:16px 24px 16px 0;background:rgba(255, 255, 255, 0.2)"
/> />
<ul <ul
class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-dark" class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-dark"
@ -656,7 +656,7 @@ exports[`renders ./components/layout/demo/fixed.tsx extend context correctly 1`]
</header> </header>
<main <main
class="ant-layout-content site-layout" class="ant-layout-content site-layout"
style="padding:0 50px;margin-top:64px" style="padding:0 50px"
> >
<nav <nav
class="ant-breadcrumb" class="ant-breadcrumb"
@ -702,8 +702,7 @@ exports[`renders ./components/layout/demo/fixed.tsx extend context correctly 1`]
</ol> </ol>
</nav> </nav>
<div <div
class="site-layout-background" style="padding:24px;min-height:380px;background:#ffffff"
style="padding:24px;min-height:380px"
> >
Content Content
</div> </div>
@ -729,7 +728,7 @@ exports[`renders ./components/layout/demo/fixed-sider.tsx extend context correct
class="ant-layout-sider-children" class="ant-layout-sider-children"
> >
<div <div
class="logo" style="height:32px;margin:16px;background:rgba(255, 255, 255, 0.2)"
/> />
<ul <ul
class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark" class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark"
@ -1350,16 +1349,15 @@ exports[`renders ./components/layout/demo/fixed-sider.tsx extend context correct
style="margin-left:200px" style="margin-left:200px"
> >
<header <header
class="ant-layout-header site-layout-background" class="ant-layout-header"
style="padding:0" style="padding:0;background:#ffffff"
/> />
<main <main
class="ant-layout-content" class="ant-layout-content"
style="margin:24px 16px 0;overflow:initial" style="margin:24px 16px 0;overflow:initial"
> >
<div <div
class="site-layout-background" style="padding:24px;text-align:center;background:#ffffff"
style="padding:24px;text-align:center"
> >
<p> <p>
long content long content
@ -1908,16 +1906,15 @@ exports[`renders ./components/layout/demo/responsive.tsx extend context correctl
class="ant-layout" class="ant-layout"
> >
<header <header
class="ant-layout-header site-layout-sub-header-background" class="ant-layout-header"
style="padding:0" style="padding:0;background:#ffffff"
/> />
<main <main
class="ant-layout-content" class="ant-layout-content"
style="margin:24px 16px 0" style="margin:24px 16px 0"
> >
<div <div
class="site-layout-background" style="padding:24px;min-height:360px;background:#ffffff"
style="padding:24px;min-height:360px"
> >
content content
</div> </div>
@ -1945,7 +1942,7 @@ exports[`renders ./components/layout/demo/side.tsx extend context correctly 1`]
class="ant-layout-sider-children" class="ant-layout-sider-children"
> >
<div <div
class="logo" style="height:32px;margin:16px;background:rgba(255, 255, 255, 0.2)"
/> />
<ul <ul
class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark" class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark"
@ -2600,8 +2597,8 @@ exports[`renders ./components/layout/demo/side.tsx extend context correctly 1`]
class="ant-layout site-layout" class="ant-layout site-layout"
> >
<header <header
class="ant-layout-header site-layout-background" class="ant-layout-header"
style="padding:0" style="padding:0;background:#ffffff"
/> />
<main <main
class="ant-layout-content" class="ant-layout-content"
@ -2639,8 +2636,7 @@ exports[`renders ./components/layout/demo/side.tsx extend context correctly 1`]
</ol> </ol>
</nav> </nav>
<div <div
class="site-layout-background" style="padding:24px;min-height:360px;background:#ffffff"
style="padding:24px;min-height:360px"
> >
Bill is a cat. Bill is a cat.
</div> </div>
@ -3615,6 +3611,7 @@ exports[`renders ./components/layout/demo/top.tsx extend context correctly 1`] =
</nav> </nav>
<div <div
class="site-layout-content" class="site-layout-content"
style="background:#ffffff"
> >
Content Content
</div> </div>
@ -3915,12 +3912,12 @@ exports[`renders ./components/layout/demo/top-side.tsx extend context correctly
</ol> </ol>
</nav> </nav>
<section <section
class="ant-layout site-layout-background" class="ant-layout"
style="padding:24px 0" style="padding:24px 0;background:#ffffff"
> >
<aside <aside
class="ant-layout-sider ant-layout-sider-dark site-layout-background" class="ant-layout-sider ant-layout-sider-dark"
style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px" style="background:#ffffff;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
> >
<div <div
class="ant-layout-sider-children" class="ant-layout-sider-children"
@ -5172,8 +5169,8 @@ exports[`renders ./components/layout/demo/top-side-2.tsx extend context correctl
class="ant-layout" class="ant-layout"
> >
<aside <aside
class="ant-layout-sider ant-layout-sider-dark site-layout-background" class="ant-layout-sider ant-layout-sider-dark"
style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px" style="background:#ffffff;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
> >
<div <div
class="ant-layout-sider-children" class="ant-layout-sider-children"
@ -6213,8 +6210,8 @@ exports[`renders ./components/layout/demo/top-side-2.tsx extend context correctl
</ol> </ol>
</nav> </nav>
<main <main
class="ant-layout-content site-layout-background" class="ant-layout-content"
style="padding:24px;margin:0;min-height:280px" style="padding:24px;margin:0;min-height:280px;background:#ffffff"
> >
Content Content
</main> </main>

57
components/layout/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -247,8 +247,8 @@ exports[`renders ./components/layout/demo/custom-trigger.tsx correctly 1`] = `
class="ant-layout site-layout" class="ant-layout site-layout"
> >
<header <header
class="ant-layout-header site-layout-background" class="ant-layout-header"
style="padding:0" style="padding:0;background:#ffffff"
> >
<span <span
aria-label="menu-fold" aria-label="menu-fold"
@ -272,8 +272,8 @@ exports[`renders ./components/layout/demo/custom-trigger.tsx correctly 1`] = `
</span> </span>
</header> </header>
<main <main
class="ant-layout-content site-layout-background" class="ant-layout-content"
style="margin:24px 16px;padding:24px;min-height:280px" style="margin:24px 16px;padding:24px;min-height:280px;background:#ffffff"
> >
Content Content
</main> </main>
@ -290,7 +290,7 @@ exports[`renders ./components/layout/demo/fixed.tsx correctly 1`] = `
style="position:sticky;top:0;z-index:1;width:100%" style="position:sticky;top:0;z-index:1;width:100%"
> >
<div <div
class="logo" style="float:left;width:120px;height:31px;margin:16px 24px 16px 0;background:rgba(255, 255, 255, 0.2)"
/> />
<ul <ul
class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-dark" class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-dark"
@ -379,7 +379,7 @@ exports[`renders ./components/layout/demo/fixed.tsx correctly 1`] = `
</header> </header>
<main <main
class="ant-layout-content site-layout" class="ant-layout-content site-layout"
style="padding:0 50px;margin-top:64px" style="padding:0 50px"
> >
<nav <nav
class="ant-breadcrumb" class="ant-breadcrumb"
@ -425,8 +425,7 @@ exports[`renders ./components/layout/demo/fixed.tsx correctly 1`] = `
</ol> </ol>
</nav> </nav>
<div <div
class="site-layout-background" style="padding:24px;min-height:380px;background:#ffffff"
style="padding:24px;min-height:380px"
> >
Content Content
</div> </div>
@ -452,7 +451,7 @@ exports[`renders ./components/layout/demo/fixed-sider.tsx correctly 1`] = `
class="ant-layout-sider-children" class="ant-layout-sider-children"
> >
<div <div
class="logo" style="height:32px;margin:16px;background:rgba(255, 255, 255, 0.2)"
/> />
<ul <ul
class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark" class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark"
@ -720,16 +719,15 @@ exports[`renders ./components/layout/demo/fixed-sider.tsx correctly 1`] = `
style="margin-left:200px" style="margin-left:200px"
> >
<header <header
class="ant-layout-header site-layout-background" class="ant-layout-header"
style="padding:0" style="padding:0;background:#ffffff"
/> />
<main <main
class="ant-layout-content" class="ant-layout-content"
style="margin:24px 16px 0;overflow:initial" style="margin:24px 16px 0;overflow:initial"
> >
<div <div
class="site-layout-background" style="padding:24px;text-align:center;background:#ffffff"
style="padding:24px;text-align:center"
> >
<p> <p>
long content long content
@ -1101,16 +1099,15 @@ exports[`renders ./components/layout/demo/responsive.tsx correctly 1`] = `
class="ant-layout" class="ant-layout"
> >
<header <header
class="ant-layout-header site-layout-sub-header-background" class="ant-layout-header"
style="padding:0" style="padding:0;background:#ffffff"
/> />
<main <main
class="ant-layout-content" class="ant-layout-content"
style="margin:24px 16px 0" style="margin:24px 16px 0"
> >
<div <div
class="site-layout-background" style="padding:24px;min-height:360px;background:#ffffff"
style="padding:24px;min-height:360px"
> >
content content
</div> </div>
@ -1138,7 +1135,7 @@ exports[`renders ./components/layout/demo/side.tsx correctly 1`] = `
class="ant-layout-sider-children" class="ant-layout-sider-children"
> >
<div <div
class="logo" style="height:32px;margin:16px;background:rgba(255, 255, 255, 0.2)"
/> />
<ul <ul
class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark" class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark"
@ -1356,8 +1353,8 @@ exports[`renders ./components/layout/demo/side.tsx correctly 1`] = `
class="ant-layout site-layout" class="ant-layout site-layout"
> >
<header <header
class="ant-layout-header site-layout-background" class="ant-layout-header"
style="padding:0" style="padding:0;background:#ffffff"
/> />
<main <main
class="ant-layout-content" class="ant-layout-content"
@ -1395,8 +1392,7 @@ exports[`renders ./components/layout/demo/side.tsx correctly 1`] = `
</ol> </ol>
</nav> </nav>
<div <div
class="site-layout-background" style="padding:24px;min-height:360px;background:#ffffff"
style="padding:24px;min-height:360px"
> >
Bill is a cat. Bill is a cat.
</div> </div>
@ -1699,6 +1695,7 @@ exports[`renders ./components/layout/demo/top.tsx correctly 1`] = `
</nav> </nav>
<div <div
class="site-layout-content" class="site-layout-content"
style="background:#ffffff"
> >
Content Content
</div> </div>
@ -1855,12 +1852,12 @@ exports[`renders ./components/layout/demo/top-side.tsx correctly 1`] = `
</ol> </ol>
</nav> </nav>
<section <section
class="ant-layout site-layout-background" class="ant-layout"
style="padding:24px 0" style="padding:24px 0;background:#ffffff"
> >
<aside <aside
class="ant-layout-sider ant-layout-sider-dark site-layout-background" class="ant-layout-sider ant-layout-sider-dark"
style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px" style="background:#ffffff;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
> >
<div <div
class="ant-layout-sider-children" class="ant-layout-sider-children"
@ -2171,8 +2168,8 @@ exports[`renders ./components/layout/demo/top-side-2.tsx correctly 1`] = `
class="ant-layout" class="ant-layout"
> >
<aside <aside
class="ant-layout-sider ant-layout-sider-dark site-layout-background" class="ant-layout-sider ant-layout-sider-dark"
style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px" style="background:#ffffff;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
> >
<div <div
class="ant-layout-sider-children" class="ant-layout-sider-children"
@ -2415,8 +2412,8 @@ exports[`renders ./components/layout/demo/top-side-2.tsx correctly 1`] = `
</ol> </ol>
</nav> </nav>
<main <main
class="ant-layout-content site-layout-background" class="ant-layout-content"
style="padding:24px;margin:0;min-height:280px" style="padding:24px;margin:0;min-height:280px;background:#ffffff"
> >
Content Content
</main> </main>

12
components/layout/demo/basic.md
View File

@ -15,12 +15,6 @@ Classic page layouts.
color: #fff; color: #fff;
background: #7dbcea; background: #7dbcea;
} }
[data-theme="dark"] #components-layout-demo-basic .ant-layout-header {
background: #6aa0c7;
}
[data-theme="dark"] #components-layout-demo-basic .ant-layout-footer {
background: #6aa0c7;
}
#components-layout-demo-basic .ant-layout-footer { #components-layout-demo-basic .ant-layout-footer {
line-height: 1.5; line-height: 1.5;
} }
@ -29,18 +23,12 @@ Classic page layouts.
line-height: 120px; line-height: 120px;
background: #3ba0e9; background: #3ba0e9;
} }
[data-theme="dark"] #components-layout-demo-basic .ant-layout-sider {
background: #3499ec;
}
#components-layout-demo-basic .ant-layout-content { #components-layout-demo-basic .ant-layout-content {
min-height: 120px; min-height: 120px;
color: #fff; color: #fff;
line-height: 120px; line-height: 120px;
background: rgba(16, 142, 233, 1); background: rgba(16, 142, 233, 1);
} }
[data-theme="dark"] #components-layout-demo-basic .ant-layout-content {
background: #107bcb;
}
#components-layout-demo-basic > .code-box-demo > .ant-layout + .ant-layout { #components-layout-demo-basic > .code-box-demo > .ant-layout + .ant-layout {
margin-top: 48px; margin-top: 48px;
} }

9
components/layout/demo/custom-trigger-debug.tsx
View File

@ -9,7 +9,7 @@ import {
UserOutlined, UserOutlined,
} from '@ant-design/icons'; } from '@ant-design/icons';
import type { MenuProps } from 'antd'; import type { MenuProps } from 'antd';
import { Layout, Menu } from 'antd'; import { Layout, Menu, theme } from 'antd';
const { Header, Sider, Content } = Layout; const { Header, Sider, Content } = Layout;
@ -66,6 +66,9 @@ const items: MenuProps['items'] = [
const App: React.FC = () => { const App: React.FC = () => {
const [collapsed, setCollapsed] = useState(true); const [collapsed, setCollapsed] = useState(true);
const {
token: { colorBgContainer },
} = theme.useToken();
return ( return (
<Layout> <Layout>
@ -80,18 +83,18 @@ const App: React.FC = () => {
/> />
</Sider> </Sider>
<Layout> <Layout>
<Header className="site-layout-background" style={{ padding: 0 }}> <Header style={{ padding: 0, background: colorBgContainer }}>
{React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, { {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
className: 'trigger', className: 'trigger',
onClick: () => setCollapsed(!collapsed), onClick: () => setCollapsed(!collapsed),
})} })}
</Header> </Header>
<Content <Content
className="site-layout-background"
style={{ style={{
margin: '24px 16px', margin: '24px 16px',
padding: 24, padding: 24,
minHeight: 280, minHeight: 280,
background: colorBgContainer,
}} }}
> >
Content Content

4
components/layout/demo/custom-trigger.md
View File

@ -24,8 +24,4 @@ If you want to use a customized trigger, you can hide the default one by setting
margin: 16px; margin: 16px;
background: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.3);
} }
#components-layout-demo-custom-trigger .site-layout .site-layout-background {
background: #fff;
}
``` ```

9
components/layout/demo/custom-trigger.tsx
View File

@ -6,12 +6,15 @@ import {
UserOutlined, UserOutlined,
VideoCameraOutlined, VideoCameraOutlined,
} from '@ant-design/icons'; } from '@ant-design/icons';
import { Layout, Menu } from 'antd'; import { Layout, Menu, theme } from 'antd';
const { Header, Sider, Content } = Layout; const { Header, Sider, Content } = Layout;
const App: React.FC = () => { const App: React.FC = () => {
const [collapsed, setCollapsed] = useState(false); const [collapsed, setCollapsed] = useState(false);
const {
token: { colorBgContainer },
} = theme.useToken();
return ( return (
<Layout> <Layout>
@ -41,18 +44,18 @@ const App: React.FC = () => {
/> />
</Sider> </Sider>
<Layout className="site-layout"> <Layout className="site-layout">
<Header className="site-layout-background" style={{ padding: 0 }}> <Header style={{ padding: 0, background: colorBgContainer }}>
{React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, { {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
className: 'trigger', className: 'trigger',
onClick: () => setCollapsed(!collapsed), onClick: () => setCollapsed(!collapsed),
})} })}
</Header> </Header>
<Content <Content
className="site-layout-background"
style={{ style={{
margin: '24px 16px', margin: '24px 16px',
padding: 24, padding: 24,
minHeight: 280, minHeight: 280,
background: colorBgContainer,
}} }}
> >
Content Content

17
components/layout/demo/fixed-sider.md
View File

@ -5,20 +5,3 @@
## en-US ## en-US
When dealing with long content, a fixed sider can provide a better user experience. When dealing with long content, a fixed sider can provide a better user experience.
```css
#components-layout-demo-fixed-sider .logo {
height: 32px;
margin: 16px;
background: rgba(255, 255, 255, 0.2);
}
#components-layout-demo-fixed-sider .site-layout .site-layout-background {
background: #fff;
}
```
<style>
[data-theme="dark"] .site-layout .site-layout-background {
background: #141414;
}
</style>

76
components/layout/demo/fixed-sider.tsx
View File

@ -10,7 +10,7 @@ import {
VideoCameraOutlined, VideoCameraOutlined,
} from '@ant-design/icons'; } from '@ant-design/icons';
import type { MenuProps } from 'antd'; import type { MenuProps } from 'antd';
import { Layout, Menu } from 'antd'; import { Layout, Menu, theme } from 'antd';
const { Header, Content, Footer, Sider } = Layout; const { Header, Content, Footer, Sider } = Layout;
@ -29,40 +29,46 @@ const items: MenuProps['items'] = [
label: `nav ${index + 1}`, label: `nav ${index + 1}`,
})); }));
const App: React.FC = () => ( const App: React.FC = () => {
<Layout hasSider> const {
<Sider token: { colorBgContainer },
style={{ } = theme.useToken();
overflow: 'auto',
height: '100vh', return (
position: 'fixed', <Layout hasSider>
left: 0, <Sider
top: 0, style={{
bottom: 0, overflow: 'auto',
}} height: '100vh',
> position: 'fixed',
<div className="logo" /> left: 0,
<Menu theme="dark" mode="inline" defaultSelectedKeys={['4']} items={items} /> top: 0,
</Sider> bottom: 0,
<Layout className="site-layout" style={{ marginLeft: 200 }}> }}
<Header className="site-layout-background" style={{ padding: 0 }} /> >
<Content style={{ margin: '24px 16px 0', overflow: 'initial' }}> <div style={{ height: 32, margin: 16, background: 'rgba(255, 255, 255, 0.2)' }} />
<div className="site-layout-background" style={{ padding: 24, textAlign: 'center' }}> <Menu theme="dark" mode="inline" defaultSelectedKeys={['4']} items={items} />
<p>long content</p> </Sider>
{ <Layout className="site-layout" style={{ marginLeft: 200 }}>
// indicates very long content <Header style={{ padding: 0, background: colorBgContainer }} />
Array.from({ length: 100 }, (_, index) => ( <Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
<React.Fragment key={index}> <div style={{ padding: 24, textAlign: 'center', background: colorBgContainer }}>
{index % 20 === 0 && index ? 'more' : '...'} <p>long content</p>
<br /> {
</React.Fragment> // indicates very long content
)) Array.from({ length: 100 }, (_, index) => (
} <React.Fragment key={index}>
</div> {index % 20 === 0 && index ? 'more' : '...'}
</Content> <br />
<Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer> </React.Fragment>
))
}
</div>
</Content>
<Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
</Layout>
</Layout> </Layout>
</Layout> );
); };
export default App; export default App;

19
components/layout/demo/fixed.md
View File

@ -5,22 +5,3 @@
## en-US ## en-US
Fixed Header is generally used to fix the top navigation to facilitate page switching. Fixed Header is generally used to fix the top navigation to facilitate page switching.
```css
#components-layout-demo-fixed .logo {
float: left;
width: 120px;
height: 31px;
margin: 16px 24px 16px 0;
background: rgba(255, 255, 255, 0.2);
}
#components-layout-demo-fixed .site-layout .site-layout-background {
background: #fff;
}
```
<style>
[data-theme="dark"] .site-layout .site-layout-background {
background: #141414;
}
</style>

68
components/layout/demo/fixed.tsx
View File

@ -1,34 +1,46 @@
import React from 'react'; import React from 'react';
import { Breadcrumb, Layout, Menu } from 'antd'; import { Breadcrumb, Layout, Menu, theme } from 'antd';
const { Header, Content, Footer } = Layout; const { Header, Content, Footer } = Layout;
const App: React.FC = () => ( const App: React.FC = () => {
<Layout> const {
<Header style={{ position: 'sticky', top: 0, zIndex: 1, width: '100%' }}> token: { colorBgContainer },
<div className="logo" /> } = theme.useToken();
<Menu
theme="dark" return (
mode="horizontal" <Layout>
defaultSelectedKeys={['2']} <Header style={{ position: 'sticky', top: 0, zIndex: 1, width: '100%' }}>
items={new Array(3).fill(null).map((_, index) => ({ <div
key: String(index + 1), style={{
label: `nav ${index + 1}`, float: 'left',
}))} width: 120,
/> height: 31,
</Header> margin: '16px 24px 16px 0',
<Content className="site-layout" style={{ padding: '0 50px', marginTop: 64 }}> background: 'rgba(255, 255, 255, 0.2)',
<Breadcrumb style={{ margin: '16px 0' }}> }}
<Breadcrumb.Item>Home</Breadcrumb.Item> />
<Breadcrumb.Item>List</Breadcrumb.Item> <Menu
<Breadcrumb.Item>App</Breadcrumb.Item> theme="dark"
</Breadcrumb> mode="horizontal"
<div className="site-layout-background" style={{ padding: 24, minHeight: 380 }}> defaultSelectedKeys={['2']}
Content items={new Array(3).fill(null).map((_, index) => ({
</div> key: String(index + 1),
</Content> label: `nav ${index + 1}`,
<Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer> }))}
</Layout> />
); </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 ©2018 Created by Ant UED</Footer>
</Layout>
);
};
export default App; export default App;

14
components/layout/demo/responsive.md
View File

@ -16,18 +16,4 @@ Layout.Sider supports responsive layout.
margin: 16px; margin: 16px;
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.2);
} }
#components-layout-demo-responsive .site-layout-sub-header-background {
background: #fff;
}
#components-layout-demo-responsive .site-layout-background {
background: #fff;
}
``` ```
<style>
[data-theme="dark"] .site-layout-sub-header-background {
background: #141414;
}
</style>

76
components/layout/demo/responsive.tsx
View File

@ -1,45 +1,49 @@
import React from 'react'; import React from 'react';
import { UploadOutlined, UserOutlined, VideoCameraOutlined } from '@ant-design/icons'; import { UploadOutlined, UserOutlined, VideoCameraOutlined } from '@ant-design/icons';
import { Layout, Menu } from 'antd'; import { Layout, Menu, theme } from 'antd';
const { Header, Content, Footer, Sider } = Layout; const { Header, Content, Footer, Sider } = Layout;
const App: React.FC = () => ( const App: React.FC = () => {
<Layout> const {
<Sider token: { colorBgContainer },
breakpoint="lg" } = theme.useToken();
collapsedWidth="0"
onBreakpoint={(broken) => { return (
console.log(broken);
}}
onCollapse={(collapsed, type) => {
console.log(collapsed, type);
}}
>
<div className="logo" />
<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> <Layout>
<Header className="site-layout-sub-header-background" style={{ padding: 0 }} /> <Sider
<Content style={{ margin: '24px 16px 0' }}> breakpoint="lg"
<div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}> collapsedWidth="0"
content onBreakpoint={(broken) => {
</div> console.log(broken);
</Content> }}
<Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer> onCollapse={(collapsed, type) => {
console.log(collapsed, type);
}}
>
<div className="logo" />
<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 ©2018 Created by Ant UED</Footer>
</Layout>
</Layout> </Layout>
</Layout> );
); };
export default App; export default App;

18
components/layout/demo/side.md
View File

@ -13,21 +13,3 @@ Two-columns layout. The sider menu can be collapsed when horizontal space is lim
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. 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.
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. 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.
```css
#components-layout-demo-side .logo {
height: 32px;
margin: 16px;
background: rgba(255, 255, 255, 0.3);
}
#components-layout-demo-side .site-layout .site-layout-background {
background: #fff;
}
```
<style>
[data-theme="dark"] .site-layout .site-layout-background {
background: #141414;
}
</style>

11
components/layout/demo/side.tsx
View File

@ -7,7 +7,7 @@ import {
UserOutlined, UserOutlined,
} from '@ant-design/icons'; } from '@ant-design/icons';
import type { MenuProps } from 'antd'; import type { MenuProps } from 'antd';
import { Breadcrumb, Layout, Menu } from 'antd'; import { Breadcrumb, Layout, Menu, theme } from 'antd';
const { Header, Content, Footer, Sider } = Layout; const { Header, Content, Footer, Sider } = Layout;
@ -41,21 +41,24 @@ const items: MenuItem[] = [
const App: React.FC = () => { const App: React.FC = () => {
const [collapsed, setCollapsed] = useState(false); const [collapsed, setCollapsed] = useState(false);
const {
token: { colorBgContainer },
} = theme.useToken();
return ( return (
<Layout style={{ minHeight: '100vh' }}> <Layout style={{ minHeight: '100vh' }}>
<Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}> <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
<div className="logo" /> <div style={{ height: 32, margin: 16, background: 'rgba(255, 255, 255, 0.2)' }} />
<Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} /> <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} />
</Sider> </Sider>
<Layout className="site-layout"> <Layout className="site-layout">
<Header className="site-layout-background" style={{ padding: 0 }} /> <Header style={{ padding: 0, background: colorBgContainer }} />
<Content style={{ margin: '0 16px' }}> <Content style={{ margin: '0 16px' }}>
<Breadcrumb style={{ margin: '16px 0' }}> <Breadcrumb style={{ margin: '16px 0' }}>
<Breadcrumb.Item>User</Breadcrumb.Item> <Breadcrumb.Item>User</Breadcrumb.Item>
<Breadcrumb.Item>Bill</Breadcrumb.Item> <Breadcrumb.Item>Bill</Breadcrumb.Item>
</Breadcrumb> </Breadcrumb>
<div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}> <div style={{ padding: 24, minHeight: 360, background: colorBgContainer }}>
Bill is a cat. Bill is a cat.
</div> </div>
</Content> </Content>

4
components/layout/demo/top-side-2.md
View File

@ -19,8 +19,4 @@ Both the top navigation and the sidebar, commonly used in application site.
float: right; float: right;
margin: 16px 0 16px 24px; margin: 16px 0 16px 24px;
} }
#components-layout-demo-top-side-2 .site-layout-background {
background: #fff;
}
``` ```

74
components/layout/demo/top-side-2.tsx
View File

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import { LaptopOutlined, NotificationOutlined, UserOutlined } from '@ant-design/icons'; import { LaptopOutlined, NotificationOutlined, UserOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd'; import type { MenuProps } from 'antd';
import { Breadcrumb, Layout, Menu } from 'antd'; import { Breadcrumb, Layout, Menu, theme } from 'antd';
const { Header, Content, Sider } = Layout; const { Header, Content, Sider } = Layout;
@ -30,41 +30,47 @@ const items2: MenuProps['items'] = [UserOutlined, LaptopOutlined, NotificationOu
}, },
); );
const App: React.FC = () => ( const App: React.FC = () => {
<Layout> const {
<Header className="header"> token: { colorBgContainer },
<div className="logo" /> } = theme.useToken();
<Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} items={items1} />
</Header> return (
<Layout> <Layout>
<Sider width={200} className="site-layout-background"> <Header className="header">
<Menu <div className="logo" />
mode="inline" <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} items={items1} />
defaultSelectedKeys={['1']} </Header>
defaultOpenKeys={['sub1']} <Layout>
style={{ height: '100%', borderRight: 0 }} <Sider width={200} style={{ background: colorBgContainer }}>
items={items2} <Menu
/> mode="inline"
</Sider> defaultSelectedKeys={['1']}
<Layout style={{ padding: '0 24px 24px' }}> defaultOpenKeys={['sub1']}
<Breadcrumb style={{ margin: '16px 0' }}> style={{ height: '100%', borderRight: 0 }}
<Breadcrumb.Item>Home</Breadcrumb.Item> items={items2}
<Breadcrumb.Item>List</Breadcrumb.Item> />
<Breadcrumb.Item>App</Breadcrumb.Item> </Sider>
</Breadcrumb> <Layout style={{ padding: '0 24px 24px' }}>
<Content <Breadcrumb style={{ margin: '16px 0' }}>
className="site-layout-background" <Breadcrumb.Item>Home</Breadcrumb.Item>
style={{ <Breadcrumb.Item>List</Breadcrumb.Item>
padding: 24, <Breadcrumb.Item>App</Breadcrumb.Item>
margin: 0, </Breadcrumb>
minHeight: 280, <Content
}} style={{
> padding: 24,
Content margin: 0,
</Content> minHeight: 280,
background: colorBgContainer,
}}
>
Content
</Content>
</Layout>
</Layout> </Layout>
</Layout> </Layout>
</Layout> );
); };
export default App; export default App;

4
components/layout/demo/top-side.md
View File

@ -19,8 +19,4 @@ Both the top navigation and the sidebar, commonly used in documentation site.
float: right; float: right;
margin: 16px 0 16px 24px; margin: 16px 0 16px 24px;
} }
#components-layout-demo-top-side .site-layout-background {
background: #fff;
}
``` ```

64
components/layout/demo/top-side.tsx
View File

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import { LaptopOutlined, NotificationOutlined, UserOutlined } from '@ant-design/icons'; import { LaptopOutlined, NotificationOutlined, UserOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd'; import type { MenuProps } from 'antd';
import { Breadcrumb, Layout, Menu } from 'antd'; import { Breadcrumb, Layout, Menu, theme } from 'antd';
const { Header, Content, Footer, Sider } = Layout; const { Header, Content, Footer, Sider } = Layout;
@ -30,33 +30,39 @@ const items2: MenuProps['items'] = [UserOutlined, LaptopOutlined, NotificationOu
}, },
); );
const App: React.FC = () => ( const App: React.FC = () => {
<Layout> const {
<Header className="header"> token: { colorBgContainer },
<div className="logo" /> } = theme.useToken();
<Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} items={items1} />
</Header> return (
<Content style={{ padding: '0 50px' }}> <Layout>
<Breadcrumb style={{ margin: '16px 0' }}> <Header className="header">
<Breadcrumb.Item>Home</Breadcrumb.Item> <div className="logo" />
<Breadcrumb.Item>List</Breadcrumb.Item> <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} items={items1} />
<Breadcrumb.Item>App</Breadcrumb.Item> </Header>
</Breadcrumb> <Content style={{ padding: '0 50px' }}>
<Layout className="site-layout-background" style={{ padding: '24px 0' }}> <Breadcrumb style={{ margin: '16px 0' }}>
<Sider className="site-layout-background" width={200}> <Breadcrumb.Item>Home</Breadcrumb.Item>
<Menu <Breadcrumb.Item>List</Breadcrumb.Item>
mode="inline" <Breadcrumb.Item>App</Breadcrumb.Item>
defaultSelectedKeys={['1']} </Breadcrumb>
defaultOpenKeys={['sub1']} <Layout style={{ padding: '24px 0', background: colorBgContainer }}>
style={{ height: '100%' }} <Sider style={{ background: colorBgContainer }} width={200}>
items={items2} <Menu
/> mode="inline"
</Sider> defaultSelectedKeys={['1']}
<Content style={{ padding: '0 24px', minHeight: 280 }}>Content</Content> defaultOpenKeys={['sub1']}
</Layout> style={{ height: '100%' }}
</Content> items={items2}
<Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer> />
</Layout> </Sider>
); <Content style={{ padding: '0 24px', minHeight: 280 }}>Content</Content>
</Layout>
</Content>
<Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
</Layout>
);
};
export default App; export default App;

7
components/layout/demo/top.md
View File

@ -16,7 +16,6 @@ Top-bottom structure is conform with the top-bottom viewing habit, it's a classi
.site-layout-content { .site-layout-content {
min-height: 280px; min-height: 280px;
padding: 24px; padding: 24px;
background: #fff;
} }
#components-layout-demo-top .logo { #components-layout-demo-top .logo {
float: left; float: left;
@ -30,9 +29,3 @@ Top-bottom structure is conform with the top-bottom viewing habit, it's a classi
margin: 16px 0 16px 24px; margin: 16px 0 16px 24px;
} }
``` ```
<style>
[data-theme="dark"] .site-layout-content {
background: #141414;
}
</style>

66
components/layout/demo/top.tsx
View File

@ -1,35 +1,43 @@
import React from 'react'; import React from 'react';
import { Breadcrumb, Layout, Menu } from 'antd'; import { Breadcrumb, Layout, Menu, theme } from 'antd';
const { Header, Content, Footer } = Layout; const { Header, Content, Footer } = Layout;
const App: React.FC = () => ( const App: React.FC = () => {
<Layout className="layout"> const {
<Header> token: { colorBgContainer },
<div className="logo" /> } = theme.useToken();
<Menu
theme="dark" return (
mode="horizontal" <Layout className="layout">
defaultSelectedKeys={['2']} <Header>
items={new Array(15).fill(null).map((_, index) => { <div className="logo" />
const key = index + 1; <Menu
return { theme="dark"
key, mode="horizontal"
label: `nav ${key}`, defaultSelectedKeys={['2']}
}; items={new Array(15).fill(null).map((_, index) => {
})} const key = index + 1;
/> return {
</Header> key,
<Content style={{ padding: '0 50px' }}> label: `nav ${key}`,
<Breadcrumb style={{ margin: '16px 0' }}> };
<Breadcrumb.Item>Home</Breadcrumb.Item> })}
<Breadcrumb.Item>List</Breadcrumb.Item> />
<Breadcrumb.Item>App</Breadcrumb.Item> </Header>
</Breadcrumb> <Content style={{ padding: '0 50px' }}>
<div className="site-layout-content">Content</div> <Breadcrumb style={{ margin: '16px 0' }}>
</Content> <Breadcrumb.Item>Home</Breadcrumb.Item>
<Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer> <Breadcrumb.Item>List</Breadcrumb.Item>
</Layout> <Breadcrumb.Item>App</Breadcrumb.Item>
); </Breadcrumb>
<div className="site-layout-content" style={{ background: colorBgContainer }}>
Content
</div>
</Content>
<Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
</Layout>
);
};
export default App; export default App;

9
components/layout/index.en-US.md
View File

@ -126,12 +126,3 @@ The sidebar.
xxl: '1600px', xxl: '1600px',
} }
``` ```
<style>
[data-theme="dark"] .site-layout-background {
background: #141414;
}
[data-theme="dark"] .site-layout-header-background {
background: #1f1f1f;
}
</style>

9
components/layout/index.zh-CN.md
View File

@ -127,12 +127,3 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*4i58ToAcxaYAAAAAAA
xxl: '1600px', xxl: '1600px',
} }
``` ```
<style>
[data-theme="dark"] .site-layout-background {
background: #141414;
}
[data-theme="dark"] .site-layout-header-background {
background: #1f1f1f;
}
</style>