React学习day13--antd组件：Layout布局
发布时间
阅读量：
阅读量
https://ant.design/components/layout-cn/
设计规则
尺寸
一级导航项偏左靠近 logo 放置，辅助菜单偏右放置。
- 顶部导航（大部分系统）：一级导航高度 64px，二级导航 48px。
- 顶部导航（展示类页面）：一级导航高度 80px，二级导航 56px。
- 顶部导航高度的范围计算公式为：48+8n。
- 侧边导航宽度的范围计算公式：200+8n。
交互
- 一级导航和末级的导航需要在可视化的层面被强调出来；
- 当前项应该在呈现上优先级最高；
- 当导航收起的时候，当前项的样式自动赋予给它的上一个层级；
- 左侧导航栏的收放交互同时支持手风琴和全展开的样式，根据业务的要求进行适当的选择。
视觉
导航样式上需要根据信息层级合理的选择样式：
* 大色块强调:建议用于底色为深色系时，当前页面父级的导航项。
* 高亮火柴棍:当导航栏底色为浅色系时使用，可用于当前页面对应导航项，建议尽量在导航路径的最终项使用。
* 字体高亮变色:从可视化层面，字体高亮的视觉强化力度低于大色块，通常在当前项的上一级使用。
* 字体放大：12px、14px 是导航的标准字号，14 号字体用在一、二级导航中。字号可以考虑导航项的等级做相应选择。组件概述
* Layout：布局容器，其下可嵌套 Header Sider Content Footer 或 Layout 本身，可以放在任何父容器中。 * Header：顶部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。 * Sider：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在 Layout 中。 * Content：内容部分，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。 * Footer：底部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。
样例
import './index.css';
import { Layout } from 'antd';
const { Header, Footer, Sider, Content } = Layout;
class App extends Component {
render() {
return (
<div>
<Layout>
<Header>Header</Header>
<Content>Content</Content>
<Footer>Footer</Footer>
</Layout>
</div>
);
}
}
export default App;
import React, {Component} from 'react';
import 'antd/dist/antd.css';
import './index.css';
import { Layout } from 'antd';
const { Header, Footer, Sider, Content } = Layout;
class App extends Component {
render() {
return (
<div>
<Layout>
<Header>Header</Header>
<Layout>
<Sider>Sider</Sider>
<Content>Content</Content>
</Layout>
<Footer>Footer</Footer>
</Layout>
</div>
);
}
}
export default App;
import React, {Component} from 'react';
import 'antd/dist/antd.css';
import './index.css';
import { Layout } from 'antd';
const { Header, Footer, Sider, Content } = Layout;
class App extends Component {
render() {
return (
<div>
<Layout>
<Header>Header</Header>
<Layout>
<Content>Content</Content>
<Sider>Sider</Sider>
</Layout>
<Footer>Footer</Footer>
</Layout>
</div>
);
}
}
export default App;
import React, {Component} from 'react';
import 'antd/dist/antd.css';
import './index.css';
import { Layout } from 'antd';
const { Header, Footer, Sider, Content } = Layout;
class App extends Component {
render() {
return (
<div>
<Layout>
<Sider>Sider</Sider>
<Layout>
<Header>Header</Header>
<Content>Content</Content>
<Footer>Footer</Footer>
</Layout>
</Layout>
</div>
);
}
}
export default App;
APP.js
import React, {Component} from 'react';
import 'antd/dist/antd.css';
import './index.css';
import { Layout, Menu, Breadcrumb } from 'antd';
const { Header, Content, Footer } = Layout;
class App extends Component {
render() {
return (
<div>
<Layout className="layout">
<Header>
<div className="logo" />
<Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
{new Array(15).fill(null).map((_, index) => {
const key = index + 1;
return <Menu.Item key={key}>{`nav ${key}`}</Menu.Item>;
})}
</Menu>
</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>
</div>
);
}
}
export default App;index.css
.site-layout-content {
min-height: 280px;
padding: 24px;
background: #fff;
}
.logo {
float: left;
width: 120px;
height: 31px;
margin: 16px 24px 16px 0;
background: rgba(255, 255, 255, 0.3);
}
.ant-row-rtl .logo {
float: right;
margin: 16px 0 16px 24px;
}
[data-theme="dark"] .site-layout-content {
background: #141414;
}
顶部-侧边布局-通栏
同样拥有顶部导航及侧边栏，区别是两边未留边距，多用于应用型的网站
js
import React, {Component} from 'react';
import 'antd/dist/antd.css';
import './index.css';
import { Layout, Menu, Breadcrumb } from 'antd';
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';
const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;
class App extends Component {
render() {
return (
<div>
<Layout>
<Header className="header">
<div className="logo" />
<Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
<Menu.Item key="1">nav 1</Menu.Item>
<Menu.Item key="2">nav 2</Menu.Item>
<Menu.Item key="3">nav 3</Menu.Item>
</Menu>
</Header>
<Layout>
<Sider width={200} className="site-layout-background">
<Menu
mode="inline"
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
style={{ height: '100%', borderRight: 0 }}
>
<SubMenu key="sub1" icon={<UserOutlined />} title="subnav 1">
<Menu.Item key="1">option1</Menu.Item>
<Menu.Item key="2">option2</Menu.Item>
<Menu.Item key="3">option3</Menu.Item>
<Menu.Item key="4">option4</Menu.Item>
</SubMenu>
<SubMenu key="sub2" icon={<LaptopOutlined />} title="subnav 2">
<Menu.Item key="5">option5</Menu.Item>
<Menu.Item key="6">option6</Menu.Item>
<Menu.Item key="7">option7</Menu.Item>
<Menu.Item key="8">option8</Menu.Item>
</SubMenu>
<SubMenu key="sub3" icon={<NotificationOutlined />} title="subnav 3">
<Menu.Item key="9">option9</Menu.Item>
<Menu.Item key="10">option10</Menu.Item>
<Menu.Item key="11">option11</Menu.Item>
<Menu.Item key="12">option12</Menu.Item>
</SubMenu>
</Menu>
</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>
</Layout>
</Layout>
</Layout>,
</div>
);
}
}
export default App;css
.logo {
float: left;
width: 120px;
height: 31px;
margin: 16px 24px 16px 0;
background: rgba(255, 255, 255, 0.3);
}
.ant-row-rtl .logo {
float: right;
margin: 16px 0 16px 24px;
}
.site-layout-background {
background: #fff;
}
全部评论 (0)
还没有任何评论哟~