Layout 布局

一、布局的意义

协助进行页面级整体布局。

二、设计规则

2.1 尺寸

一级导航项偏左靠近 logo 放置，辅助菜单偏右放置。

• 顶部导航（大部分系统）：一级导航高度 64px，二级导航 48px。
• 顶部导航（展示类页面）：一级导航高度 80px，二级导航 56px。
• 顶部导航高度的范围计算公式为：48+8n。
• 侧边导航宽度的范围计算公式：200+8n。

2.2 交互

导航样式上需要根据信息层级合理的选择样式：

• 大色块强调
  建议用于底色为深色系时，当前页面父级的导航项。
• 高亮火柴棍
  当导航栏底色为浅色系时使用，可用于当前页面对应导航项，建议尽量在导航路径的最终项使用。
• 字体高亮变色
  从可视化层面，字体高亮的视觉强化力度低于大色块，通常在当前项的上一级使用。

三、组件概述

• Layout：布局容器，其下可嵌套 Header Sider Content Footer 或 Layout 本身，可以放在任何父容器中。
• Header：顶部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。
• Sider：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在 Layout 中。
• Content：内容部分，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。
• Footer：底部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。

四、API

常用api除外

1. breakpoint="sm" // 触发响应式布局的断点 个人理解为：当前能够触发视图的大小 xs:'480px' | sm:'576px' | md:'768px' | lg:'992px' | xl:'1200px' | xxl:'1600px'
2. collapsed={collapsed} // 当前收起状态
3. collapsedWidth={0} // 收缩宽度默认是80，设置为 0 会出现特殊 trigger 触发器
4. collapsible // 是否可收起
5. defaultCollapsed={true} // 是否默认收起
6. reverseArrow={true} // 翻转折叠提示箭头的方向（自带触发器）
7. theme="dark" // 主题颜色
8. trigger={null} // 自定义触发器，设置为 null 时隐藏 trigger 触发器 原始的是箭头，固定在最下边
9. zeroWidthTriggerStyle={{ display:'none' }} // 指定当 collapsedWidth 为 0 时出现的特殊 trigger 的样式
10. onBreakpoint // 触发响应式布局断点时的回调
11. onCollapse // 展开-收起时的回调函数，有点击 trigger 以及响应式反馈两种方式可以触发
12. hasSider // 表示子元素里有 Sider，一般不用指定。可用于服务端渲染时避免样式闪动

五、代码演示

import { Layout, Menu, Breadcrumb } from 'antd'
import React, { useState } from 'react'
import {
	UserOutlined,
	FileOutlined,
	PieChartOutlined,
	DesktopOutlined,
	TeamOutlined,
	MenuUnfoldOutlined,
	MenuFoldOutlined,
} from '@ant-design/icons'
import './index.css'

const { Header, Footer, Sider, Content } = 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 />),
]

function MyLayout() {
	const [collapsed, setCollapsed] = useState(false)

	return (
		<div>
			<Layout hasSider style={{ minHeight: '100vh' }}>
				<Sider
					breakpoint="sm" // 个人理解为：当前能够触发视图的大小  xs:'480px' | sm:'576px' | md:'768px' | lg:'992px' | xl:'1200px' | xxl:'1600px'
					collapsed={collapsed} // 当前收起状态
					// collapsedWidth={0} // 收缩宽度默认是80，设置为 0 会出现特殊 trigger 触发器
					collapsible // 是否可收起
					// defaultCollapsed={true} // 是否默认收起
					// reverseArrow={true} // 翻转折叠提示箭头的方向（自带触发器）
					// theme="dark" //	主题颜色
					// trigger={null} //	自定义触发器，设置为 null 时隐藏 trigger 触发器   原始的是箭头，固定在最下边
					// zeroWidthTriggerStyle={{ display:'none' }} // 指定当 collapsedWidth 为 0 时出现的特殊 trigger 的样式
					onBreakpoint={(broken) => {
						// 个人理解为：根据当前视图大小触发是否展示    配合 breakpoint 来触发 onCollapse
						console.log('触发响应式布局断点时的回调', broken)
					}}
					onCollapse={(collapsed, type) => {
						console.log('展开-收起时的回调', collapsed, type)
						setCollapsed(collapsed)
					}}
				>
					<div
						style={{
							height: 32,
							margin: 16,
							background: 'rgba(255, 255, 255, 0.2)',
						}}
					/>
					<Menu
						theme="dark" //	主题颜色
						defaultSelectedKeys={['1']} // 初始选中的菜单项 key 数组
						mode="inline" // 菜单类型，现在支持垂直、水平、和内嵌模式三种
						items={items} // 菜单内容
					/>
				</Sider>
				<Layout className="site-layout">
					<Header style={{ padding: 0, background: '#fff' }}>
						{/* 自定义触发器 */}
						{React.createElement(
							collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
							{
								className: 'trigger',
								onClick: () => setCollapsed(!collapsed),
							}
						)}
					</Header>
					<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: '#fff',
							}}
						>
							Bill is a cat.
						</div>
					</Content>
					<Footer style={{ textAlign: 'center' }}>
						Ant Design ©2023 Created by Ant UED
					</Footer>
				</Layout>
			</Layout>
		</div>
	)
}
export default MyLayout