mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-30 02:59:04 +08:00
docs: update Layout demo (#39255)
* docs: update Layout demo * chore: code clean * chore: update snapshot
This commit is contained in:
MadCcc
GitHub
parent
7b92c1ab13
commit
fbab5df655
@ -380,8 +380,8 @@ exports[`renders ./components/layout/demo/custom-trigger.tsx extend context corr
|
||||
class="ant-layout site-layout"
|
||||
>
|
||||
<header
|
||||
class="ant-layout-header site-layout-background"
|
||||
style="padding:0"
|
||||
class="ant-layout-header"
|
||||
style="padding:0;background:#ffffff"
|
||||
>
|
||||
<span
|
||||
aria-label="menu-fold"
|
||||
@ -405,8 +405,8 @@ exports[`renders ./components/layout/demo/custom-trigger.tsx extend context corr
|
||||
</span>
|
||||
</header>
|
||||
<main
|
||||
class="ant-layout-content site-layout-background"
|
||||
style="margin:24px 16px;padding:24px;min-height:280px"
|
||||
class="ant-layout-content"
|
||||
style="margin:24px 16px;padding:24px;min-height:280px;background:#ffffff"
|
||||
>
|
||||
Content
|
||||
</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%"
|
||||
>
|
||||
<div
|
||||
class="logo"
|
||||
style="float:left;width:120px;height:31px;margin:16px 24px 16px 0;background:rgba(255, 255, 255, 0.2)"
|
||||
/>
|
||||
<ul
|
||||
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>
|
||||
<main
|
||||
class="ant-layout-content site-layout"
|
||||
style="padding:0 50px;margin-top:64px"
|
||||
style="padding:0 50px"
|
||||
>
|
||||
<nav
|
||||
class="ant-breadcrumb"
|
||||
@ -702,8 +702,7 @@ exports[`renders ./components/layout/demo/fixed.tsx extend context correctly 1`]
|
||||
</ol>
|
||||
</nav>
|
||||
<div
|
||||
class="site-layout-background"
|
||||
style="padding:24px;min-height:380px"
|
||||
style="padding:24px;min-height:380px;background:#ffffff"
|
||||
>
|
||||
Content
|
||||
</div>
|
||||
@ -729,7 +728,7 @@ exports[`renders ./components/layout/demo/fixed-sider.tsx extend context correct
|
||||
class="ant-layout-sider-children"
|
||||
>
|
||||
<div
|
||||
class="logo"
|
||||
style="height:32px;margin:16px;background:rgba(255, 255, 255, 0.2)"
|
||||
/>
|
||||
<ul
|
||||
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"
|
||||
>
|
||||
<header
|
||||
class="ant-layout-header site-layout-background"
|
||||
style="padding:0"
|
||||
class="ant-layout-header"
|
||||
style="padding:0;background:#ffffff"
|
||||
/>
|
||||
<main
|
||||
class="ant-layout-content"
|
||||
style="margin:24px 16px 0;overflow:initial"
|
||||
>
|
||||
<div
|
||||
class="site-layout-background"
|
||||
style="padding:24px;text-align:center"
|
||||
style="padding:24px;text-align:center;background:#ffffff"
|
||||
>
|
||||
<p>
|
||||
long content
|
||||
@ -1908,16 +1906,15 @@ exports[`renders ./components/layout/demo/responsive.tsx extend context correctl
|
||||
class="ant-layout"
|
||||
>
|
||||
<header
|
||||
class="ant-layout-header site-layout-sub-header-background"
|
||||
style="padding:0"
|
||||
class="ant-layout-header"
|
||||
style="padding:0;background:#ffffff"
|
||||
/>
|
||||
<main
|
||||
class="ant-layout-content"
|
||||
style="margin:24px 16px 0"
|
||||
>
|
||||
<div
|
||||
class="site-layout-background"
|
||||
style="padding:24px;min-height:360px"
|
||||
style="padding:24px;min-height:360px;background:#ffffff"
|
||||
>
|
||||
content
|
||||
</div>
|
||||
@ -1945,7 +1942,7 @@ exports[`renders ./components/layout/demo/side.tsx extend context correctly 1`]
|
||||
class="ant-layout-sider-children"
|
||||
>
|
||||
<div
|
||||
class="logo"
|
||||
style="height:32px;margin:16px;background:rgba(255, 255, 255, 0.2)"
|
||||
/>
|
||||
<ul
|
||||
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"
|
||||
>
|
||||
<header
|
||||
class="ant-layout-header site-layout-background"
|
||||
style="padding:0"
|
||||
class="ant-layout-header"
|
||||
style="padding:0;background:#ffffff"
|
||||
/>
|
||||
<main
|
||||
class="ant-layout-content"
|
||||
@ -2639,8 +2636,7 @@ exports[`renders ./components/layout/demo/side.tsx extend context correctly 1`]
|
||||
</ol>
|
||||
</nav>
|
||||
<div
|
||||
class="site-layout-background"
|
||||
style="padding:24px;min-height:360px"
|
||||
style="padding:24px;min-height:360px;background:#ffffff"
|
||||
>
|
||||
Bill is a cat.
|
||||
</div>
|
||||
@ -3615,6 +3611,7 @@ exports[`renders ./components/layout/demo/top.tsx extend context correctly 1`] =
|
||||
</nav>
|
||||
<div
|
||||
class="site-layout-content"
|
||||
style="background:#ffffff"
|
||||
>
|
||||
Content
|
||||
</div>
|
||||
@ -3915,12 +3912,12 @@ exports[`renders ./components/layout/demo/top-side.tsx extend context correctly
|
||||
</ol>
|
||||
</nav>
|
||||
<section
|
||||
class="ant-layout site-layout-background"
|
||||
style="padding:24px 0"
|
||||
class="ant-layout"
|
||||
style="padding:24px 0;background:#ffffff"
|
||||
>
|
||||
<aside
|
||||
class="ant-layout-sider ant-layout-sider-dark site-layout-background"
|
||||
style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
|
||||
class="ant-layout-sider ant-layout-sider-dark"
|
||||
style="background:#ffffff;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
|
||||
>
|
||||
<div
|
||||
class="ant-layout-sider-children"
|
||||
@ -5172,8 +5169,8 @@ exports[`renders ./components/layout/demo/top-side-2.tsx extend context correctl
|
||||
class="ant-layout"
|
||||
>
|
||||
<aside
|
||||
class="ant-layout-sider ant-layout-sider-dark site-layout-background"
|
||||
style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
|
||||
class="ant-layout-sider ant-layout-sider-dark"
|
||||
style="background:#ffffff;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
|
||||
>
|
||||
<div
|
||||
class="ant-layout-sider-children"
|
||||
@ -6213,8 +6210,8 @@ exports[`renders ./components/layout/demo/top-side-2.tsx extend context correctl
|
||||
</ol>
|
||||
</nav>
|
||||
<main
|
||||
class="ant-layout-content site-layout-background"
|
||||
style="padding:24px;margin:0;min-height:280px"
|
||||
class="ant-layout-content"
|
||||
style="padding:24px;margin:0;min-height:280px;background:#ffffff"
|
||||
>
|
||||
Content
|
||||
</main>
|
||||
|
||||
@ -247,8 +247,8 @@ exports[`renders ./components/layout/demo/custom-trigger.tsx correctly 1`] = `
|
||||
class="ant-layout site-layout"
|
||||
>
|
||||
<header
|
||||
class="ant-layout-header site-layout-background"
|
||||
style="padding:0"
|
||||
class="ant-layout-header"
|
||||
style="padding:0;background:#ffffff"
|
||||
>
|
||||
<span
|
||||
aria-label="menu-fold"
|
||||
@ -272,8 +272,8 @@ exports[`renders ./components/layout/demo/custom-trigger.tsx correctly 1`] = `
|
||||
</span>
|
||||
</header>
|
||||
<main
|
||||
class="ant-layout-content site-layout-background"
|
||||
style="margin:24px 16px;padding:24px;min-height:280px"
|
||||
class="ant-layout-content"
|
||||
style="margin:24px 16px;padding:24px;min-height:280px;background:#ffffff"
|
||||
>
|
||||
Content
|
||||
</main>
|
||||
@ -290,7 +290,7 @@ exports[`renders ./components/layout/demo/fixed.tsx correctly 1`] = `
|
||||
style="position:sticky;top:0;z-index:1;width:100%"
|
||||
>
|
||||
<div
|
||||
class="logo"
|
||||
style="float:left;width:120px;height:31px;margin:16px 24px 16px 0;background:rgba(255, 255, 255, 0.2)"
|
||||
/>
|
||||
<ul
|
||||
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>
|
||||
<main
|
||||
class="ant-layout-content site-layout"
|
||||
style="padding:0 50px;margin-top:64px"
|
||||
style="padding:0 50px"
|
||||
>
|
||||
<nav
|
||||
class="ant-breadcrumb"
|
||||
@ -425,8 +425,7 @@ exports[`renders ./components/layout/demo/fixed.tsx correctly 1`] = `
|
||||
</ol>
|
||||
</nav>
|
||||
<div
|
||||
class="site-layout-background"
|
||||
style="padding:24px;min-height:380px"
|
||||
style="padding:24px;min-height:380px;background:#ffffff"
|
||||
>
|
||||
Content
|
||||
</div>
|
||||
@ -452,7 +451,7 @@ exports[`renders ./components/layout/demo/fixed-sider.tsx correctly 1`] = `
|
||||
class="ant-layout-sider-children"
|
||||
>
|
||||
<div
|
||||
class="logo"
|
||||
style="height:32px;margin:16px;background:rgba(255, 255, 255, 0.2)"
|
||||
/>
|
||||
<ul
|
||||
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"
|
||||
>
|
||||
<header
|
||||
class="ant-layout-header site-layout-background"
|
||||
style="padding:0"
|
||||
class="ant-layout-header"
|
||||
style="padding:0;background:#ffffff"
|
||||
/>
|
||||
<main
|
||||
class="ant-layout-content"
|
||||
style="margin:24px 16px 0;overflow:initial"
|
||||
>
|
||||
<div
|
||||
class="site-layout-background"
|
||||
style="padding:24px;text-align:center"
|
||||
style="padding:24px;text-align:center;background:#ffffff"
|
||||
>
|
||||
<p>
|
||||
long content
|
||||
@ -1101,16 +1099,15 @@ exports[`renders ./components/layout/demo/responsive.tsx correctly 1`] = `
|
||||
class="ant-layout"
|
||||
>
|
||||
<header
|
||||
class="ant-layout-header site-layout-sub-header-background"
|
||||
style="padding:0"
|
||||
class="ant-layout-header"
|
||||
style="padding:0;background:#ffffff"
|
||||
/>
|
||||
<main
|
||||
class="ant-layout-content"
|
||||
style="margin:24px 16px 0"
|
||||
>
|
||||
<div
|
||||
class="site-layout-background"
|
||||
style="padding:24px;min-height:360px"
|
||||
style="padding:24px;min-height:360px;background:#ffffff"
|
||||
>
|
||||
content
|
||||
</div>
|
||||
@ -1138,7 +1135,7 @@ exports[`renders ./components/layout/demo/side.tsx correctly 1`] = `
|
||||
class="ant-layout-sider-children"
|
||||
>
|
||||
<div
|
||||
class="logo"
|
||||
style="height:32px;margin:16px;background:rgba(255, 255, 255, 0.2)"
|
||||
/>
|
||||
<ul
|
||||
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"
|
||||
>
|
||||
<header
|
||||
class="ant-layout-header site-layout-background"
|
||||
style="padding:0"
|
||||
class="ant-layout-header"
|
||||
style="padding:0;background:#ffffff"
|
||||
/>
|
||||
<main
|
||||
class="ant-layout-content"
|
||||
@ -1395,8 +1392,7 @@ exports[`renders ./components/layout/demo/side.tsx correctly 1`] = `
|
||||
</ol>
|
||||
</nav>
|
||||
<div
|
||||
class="site-layout-background"
|
||||
style="padding:24px;min-height:360px"
|
||||
style="padding:24px;min-height:360px;background:#ffffff"
|
||||
>
|
||||
Bill is a cat.
|
||||
</div>
|
||||
@ -1699,6 +1695,7 @@ exports[`renders ./components/layout/demo/top.tsx correctly 1`] = `
|
||||
</nav>
|
||||
<div
|
||||
class="site-layout-content"
|
||||
style="background:#ffffff"
|
||||
>
|
||||
Content
|
||||
</div>
|
||||
@ -1855,12 +1852,12 @@ exports[`renders ./components/layout/demo/top-side.tsx correctly 1`] = `
|
||||
</ol>
|
||||
</nav>
|
||||
<section
|
||||
class="ant-layout site-layout-background"
|
||||
style="padding:24px 0"
|
||||
class="ant-layout"
|
||||
style="padding:24px 0;background:#ffffff"
|
||||
>
|
||||
<aside
|
||||
class="ant-layout-sider ant-layout-sider-dark site-layout-background"
|
||||
style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
|
||||
class="ant-layout-sider ant-layout-sider-dark"
|
||||
style="background:#ffffff;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
|
||||
>
|
||||
<div
|
||||
class="ant-layout-sider-children"
|
||||
@ -2171,8 +2168,8 @@ exports[`renders ./components/layout/demo/top-side-2.tsx correctly 1`] = `
|
||||
class="ant-layout"
|
||||
>
|
||||
<aside
|
||||
class="ant-layout-sider ant-layout-sider-dark site-layout-background"
|
||||
style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
|
||||
class="ant-layout-sider ant-layout-sider-dark"
|
||||
style="background:#ffffff;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
|
||||
>
|
||||
<div
|
||||
class="ant-layout-sider-children"
|
||||
@ -2415,8 +2412,8 @@ exports[`renders ./components/layout/demo/top-side-2.tsx correctly 1`] = `
|
||||
</ol>
|
||||
</nav>
|
||||
<main
|
||||
class="ant-layout-content site-layout-background"
|
||||
style="padding:24px;margin:0;min-height:280px"
|
||||
class="ant-layout-content"
|
||||
style="padding:24px;margin:0;min-height:280px;background:#ffffff"
|
||||
>
|
||||
Content
|
||||
</main>
|
||||
|
||||
@ -15,12 +15,6 @@ Classic page layouts.
|
||||
color: #fff;
|
||||
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 {
|
||||
line-height: 1.5;
|
||||
}
|
||||
@ -29,18 +23,12 @@ Classic page layouts.
|
||||
line-height: 120px;
|
||||
background: #3ba0e9;
|
||||
}
|
||||
[data-theme="dark"] #components-layout-demo-basic .ant-layout-sider {
|
||||
background: #3499ec;
|
||||
}
|
||||
#components-layout-demo-basic .ant-layout-content {
|
||||
min-height: 120px;
|
||||
color: #fff;
|
||||
line-height: 120px;
|
||||
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 {
|
||||
margin-top: 48px;
|
||||
}
|
||||
|
||||
@ -9,7 +9,7 @@ import {
|
||||
UserOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import type { MenuProps } from 'antd';
|
||||
import { Layout, Menu } from 'antd';
|
||||
import { Layout, Menu, theme } from 'antd';
|
||||
|
||||
const { Header, Sider, Content } = Layout;
|
||||
|
||||
@ -66,6 +66,9 @@ const items: MenuProps['items'] = [
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [collapsed, setCollapsed] = useState(true);
|
||||
const {
|
||||
token: { colorBgContainer },
|
||||
} = theme.useToken();
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
@ -80,18 +83,18 @@ const App: React.FC = () => {
|
||||
/>
|
||||
</Sider>
|
||||
<Layout>
|
||||
<Header className="site-layout-background" style={{ padding: 0 }}>
|
||||
<Header style={{ padding: 0, background: colorBgContainer }}>
|
||||
{React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
|
||||
className: 'trigger',
|
||||
onClick: () => setCollapsed(!collapsed),
|
||||
})}
|
||||
</Header>
|
||||
<Content
|
||||
className="site-layout-background"
|
||||
style={{
|
||||
margin: '24px 16px',
|
||||
padding: 24,
|
||||
minHeight: 280,
|
||||
background: colorBgContainer,
|
||||
}}
|
||||
>
|
||||
Content
|
||||
|
||||
@ -24,8 +24,4 @@ If you want to use a customized trigger, you can hide the default one by setting
|
||||
margin: 16px;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
#components-layout-demo-custom-trigger .site-layout .site-layout-background {
|
||||
background: #fff;
|
||||
}
|
||||
```
|
||||
|
||||
@ -6,12 +6,15 @@ import {
|
||||
UserOutlined,
|
||||
VideoCameraOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { Layout, Menu } from 'antd';
|
||||
import { Layout, Menu, theme } from 'antd';
|
||||
|
||||
const { Header, Sider, Content } = Layout;
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
const {
|
||||
token: { colorBgContainer },
|
||||
} = theme.useToken();
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
@ -41,18 +44,18 @@ const App: React.FC = () => {
|
||||
/>
|
||||
</Sider>
|
||||
<Layout className="site-layout">
|
||||
<Header className="site-layout-background" style={{ padding: 0 }}>
|
||||
<Header style={{ padding: 0, background: colorBgContainer }}>
|
||||
{React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
|
||||
className: 'trigger',
|
||||
onClick: () => setCollapsed(!collapsed),
|
||||
})}
|
||||
</Header>
|
||||
<Content
|
||||
className="site-layout-background"
|
||||
style={{
|
||||
margin: '24px 16px',
|
||||
padding: 24,
|
||||
minHeight: 280,
|
||||
background: colorBgContainer,
|
||||
}}
|
||||
>
|
||||
Content
|
||||
|
||||
@ -5,20 +5,3 @@
|
||||
## en-US
|
||||
|
||||
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>
|
||||
|
||||
@ -10,7 +10,7 @@ import {
|
||||
VideoCameraOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import type { MenuProps } from 'antd';
|
||||
import { Layout, Menu } from 'antd';
|
||||
import { Layout, Menu, theme } from 'antd';
|
||||
|
||||
const { Header, Content, Footer, Sider } = Layout;
|
||||
|
||||
@ -29,40 +29,46 @@ const items: MenuProps['items'] = [
|
||||
label: `nav ${index + 1}`,
|
||||
}));
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Layout hasSider>
|
||||
<Sider
|
||||
style={{
|
||||
overflow: 'auto',
|
||||
height: '100vh',
|
||||
position: 'fixed',
|
||||
left: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
>
|
||||
<div className="logo" />
|
||||
<Menu theme="dark" mode="inline" defaultSelectedKeys={['4']} items={items} />
|
||||
</Sider>
|
||||
<Layout className="site-layout" style={{ marginLeft: 200 }}>
|
||||
<Header className="site-layout-background" style={{ padding: 0 }} />
|
||||
<Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
|
||||
<div className="site-layout-background" style={{ padding: 24, textAlign: 'center' }}>
|
||||
<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 ©2018 Created by Ant UED</Footer>
|
||||
const App: React.FC = () => {
|
||||
const {
|
||||
token: { colorBgContainer },
|
||||
} = theme.useToken();
|
||||
|
||||
return (
|
||||
<Layout hasSider>
|
||||
<Sider
|
||||
style={{
|
||||
overflow: 'auto',
|
||||
height: '100vh',
|
||||
position: 'fixed',
|
||||
left: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
>
|
||||
<div style={{ height: 32, margin: 16, background: 'rgba(255, 255, 255, 0.2)' }} />
|
||||
<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 ©2018 Created by Ant UED</Footer>
|
||||
</Layout>
|
||||
</Layout>
|
||||
</Layout>
|
||||
);
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
|
||||
@ -5,22 +5,3 @@
|
||||
## en-US
|
||||
|
||||
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>
|
||||
|
||||
@ -1,34 +1,46 @@
|
||||
import React from 'react';
|
||||
import { Breadcrumb, Layout, Menu } from 'antd';
|
||||
import { Breadcrumb, Layout, Menu, theme } from 'antd';
|
||||
|
||||
const { Header, Content, Footer } = Layout;
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Layout>
|
||||
<Header style={{ position: 'sticky', top: 0, zIndex: 1, width: '100%' }}>
|
||||
<div className="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', marginTop: 64 }}>
|
||||
<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-background" style={{ padding: 24, minHeight: 380 }}>
|
||||
Content
|
||||
</div>
|
||||
</Content>
|
||||
<Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
|
||||
</Layout>
|
||||
);
|
||||
const App: React.FC = () => {
|
||||
const {
|
||||
token: { colorBgContainer },
|
||||
} = theme.useToken();
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<Header style={{ position: 'sticky', top: 0, zIndex: 1, width: '100%' }}>
|
||||
<div
|
||||
style={{
|
||||
float: 'left',
|
||||
width: 120,
|
||||
height: 31,
|
||||
margin: '16px 24px 16px 0',
|
||||
background: 'rgba(255, 255, 255, 0.2)',
|
||||
}}
|
||||
/>
|
||||
<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 ©2018 Created by Ant UED</Footer>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
|
||||
@ -16,18 +16,4 @@ Layout.Sider supports responsive layout.
|
||||
margin: 16px;
|
||||
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>
|
||||
|
||||
@ -1,45 +1,49 @@
|
||||
import React from 'react';
|
||||
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 App: React.FC = () => (
|
||||
<Layout>
|
||||
<Sider
|
||||
breakpoint="lg"
|
||||
collapsedWidth="0"
|
||||
onBreakpoint={(broken) => {
|
||||
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>
|
||||
const App: React.FC = () => {
|
||||
const {
|
||||
token: { colorBgContainer },
|
||||
} = theme.useToken();
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<Header className="site-layout-sub-header-background" style={{ padding: 0 }} />
|
||||
<Content style={{ margin: '24px 16px 0' }}>
|
||||
<div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
|
||||
content
|
||||
</div>
|
||||
</Content>
|
||||
<Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
|
||||
<Sider
|
||||
breakpoint="lg"
|
||||
collapsedWidth="0"
|
||||
onBreakpoint={(broken) => {
|
||||
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>
|
||||
<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>
|
||||
);
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
|
||||
@ -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.
|
||||
|
||||
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>
|
||||
|
||||
@ -7,7 +7,7 @@ import {
|
||||
UserOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import type { MenuProps } from 'antd';
|
||||
import { Breadcrumb, Layout, Menu } from 'antd';
|
||||
import { Breadcrumb, Layout, Menu, theme } from 'antd';
|
||||
|
||||
const { Header, Content, Footer, Sider } = Layout;
|
||||
|
||||
@ -41,21 +41,24 @@ const items: MenuItem[] = [
|
||||
|
||||
const App: React.FC = () => {
|
||||
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="logo" />
|
||||
<div style={{ height: 32, margin: 16, background: 'rgba(255, 255, 255, 0.2)' }} />
|
||||
<Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} />
|
||||
</Sider>
|
||||
<Layout className="site-layout">
|
||||
<Header className="site-layout-background" style={{ padding: 0 }} />
|
||||
<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 className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
|
||||
<div style={{ padding: 24, minHeight: 360, background: colorBgContainer }}>
|
||||
Bill is a cat.
|
||||
</div>
|
||||
</Content>
|
||||
|
||||
@ -19,8 +19,4 @@ Both the top navigation and the sidebar, commonly used in application site.
|
||||
float: right;
|
||||
margin: 16px 0 16px 24px;
|
||||
}
|
||||
|
||||
#components-layout-demo-top-side-2 .site-layout-background {
|
||||
background: #fff;
|
||||
}
|
||||
```
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import { LaptopOutlined, NotificationOutlined, UserOutlined } from '@ant-design/icons';
|
||||
import type { MenuProps } from 'antd';
|
||||
import { Breadcrumb, Layout, Menu } from 'antd';
|
||||
import { Breadcrumb, Layout, Menu, theme } from 'antd';
|
||||
|
||||
const { Header, Content, Sider } = Layout;
|
||||
|
||||
@ -30,41 +30,47 @@ const items2: MenuProps['items'] = [UserOutlined, LaptopOutlined, NotificationOu
|
||||
},
|
||||
);
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Layout>
|
||||
<Header className="header">
|
||||
<div className="logo" />
|
||||
<Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} items={items1} />
|
||||
</Header>
|
||||
const App: React.FC = () => {
|
||||
const {
|
||||
token: { colorBgContainer },
|
||||
} = theme.useToken();
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<Sider width={200} className="site-layout-background">
|
||||
<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
|
||||
className="site-layout-background"
|
||||
style={{
|
||||
padding: 24,
|
||||
margin: 0,
|
||||
minHeight: 280,
|
||||
}}
|
||||
>
|
||||
Content
|
||||
</Content>
|
||||
<Header className="header">
|
||||
<div className="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>
|
||||
</Layout>
|
||||
);
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
|
||||
@ -19,8 +19,4 @@ Both the top navigation and the sidebar, commonly used in documentation site.
|
||||
float: right;
|
||||
margin: 16px 0 16px 24px;
|
||||
}
|
||||
|
||||
#components-layout-demo-top-side .site-layout-background {
|
||||
background: #fff;
|
||||
}
|
||||
```
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import { LaptopOutlined, NotificationOutlined, UserOutlined } from '@ant-design/icons';
|
||||
import type { MenuProps } from 'antd';
|
||||
import { Breadcrumb, Layout, Menu } from 'antd';
|
||||
import { Breadcrumb, Layout, Menu, theme } from 'antd';
|
||||
|
||||
const { Header, Content, Footer, Sider } = Layout;
|
||||
|
||||
@ -30,33 +30,39 @@ const items2: MenuProps['items'] = [UserOutlined, LaptopOutlined, NotificationOu
|
||||
},
|
||||
);
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Layout>
|
||||
<Header className="header">
|
||||
<div className="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 className="site-layout-background" style={{ padding: '24px 0' }}>
|
||||
<Sider className="site-layout-background" 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 ©2018 Created by Ant UED</Footer>
|
||||
</Layout>
|
||||
);
|
||||
const App: React.FC = () => {
|
||||
const {
|
||||
token: { colorBgContainer },
|
||||
} = theme.useToken();
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<Header className="header">
|
||||
<div className="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 ©2018 Created by Ant UED</Footer>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
|
||||
@ -16,7 +16,6 @@ Top-bottom structure is conform with the top-bottom viewing habit, it's a classi
|
||||
.site-layout-content {
|
||||
min-height: 280px;
|
||||
padding: 24px;
|
||||
background: #fff;
|
||||
}
|
||||
#components-layout-demo-top .logo {
|
||||
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;
|
||||
}
|
||||
```
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .site-layout-content {
|
||||
background: #141414;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,35 +1,43 @@
|
||||
import React from 'react';
|
||||
import { Breadcrumb, Layout, Menu } from 'antd';
|
||||
import { Breadcrumb, Layout, Menu, theme } from 'antd';
|
||||
|
||||
const { Header, Content, Footer } = Layout;
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Layout className="layout">
|
||||
<Header>
|
||||
<div className="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">Content</div>
|
||||
</Content>
|
||||
<Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
|
||||
</Layout>
|
||||
);
|
||||
const App: React.FC = () => {
|
||||
const {
|
||||
token: { colorBgContainer },
|
||||
} = theme.useToken();
|
||||
|
||||
return (
|
||||
<Layout className="layout">
|
||||
<Header>
|
||||
<div className="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 ©2018 Created by Ant UED</Footer>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
|
||||
@ -126,12 +126,3 @@ The sidebar.
|
||||
xxl: '1600px',
|
||||
}
|
||||
```
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .site-layout-background {
|
||||
background: #141414;
|
||||
}
|
||||
[data-theme="dark"] .site-layout-header-background {
|
||||
background: #1f1f1f;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -127,12 +127,3 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*4i58ToAcxaYAAAAAAA
|
||||
xxl: '1600px',
|
||||
}
|
||||
```
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .site-layout-background {
|
||||
background: #141414;
|
||||
}
|
||||
[data-theme="dark"] .site-layout-header-background {
|
||||
background: #1f1f1f;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user