网站源码模板,wordpress 迁移 hexo,政务网站建设 发言,深圳自建网站文章目录 一、Layout二、Menu三、Grid栅格 布局组件涉及项目框架的搭建#xff0c;往往被忽略和低关注#xff0c;毕竟不是经常用到#xff0c;但是在调整项目结构的时候往往又需要重新设计布局#xff0c;所以有必要提前归纳分析#xff1b; 一、Layout Layout导出Sider,… 文章目录 一、Layout二、Menu三、Grid栅格 布局组件涉及项目框架的搭建往往被忽略和低关注毕竟不是经常用到但是在调整项目结构的时候往往又需要重新设计布局所以有必要提前归纳分析 一、Layout Layout导出Sider, Content, HeaderSider, Content, Header也只能被Layout包裹可以写嵌套LayoutReact.createElement语法const element createElement(type, props, …children) import { DesktopOutlined, MailOutlined, MenuFoldOutlined,
MenuUnfoldOutlined, UserOutlined } from ant-design/icons;
import { Layout, Menu } from antd;
import React, { useState } from react;const { Sider, Content, Header } Layout;
export default function LayoutPage() {const [collapsed, setCollapsed] useState(false);const items [// title缩进以后悬浮子菜单一级菜单不会出现{ label: 菜单项一, key: item-1, title: 菜单项一 悬浮, icon: MailOutlined / }, // 菜单项务必填写 key{label: 菜单项二,key: item-2,title: 菜单项二 悬浮,icon: MailOutlined /,children: [{ label: 子菜单项1, key: submenu-item-1, title: 子菜单项1 悬浮 }],},{label: 菜单项3,key: submenu,children: [{ label: 子菜单项2, key: submenu-item-1 },{ label: 子菜单项3, key: submenu-item-2 },],},];return (div classNameLayoutLayout{/* 左侧菜单 collapsed控制是否缩进菜单 */}Sider collapsed{collapsed}divclassNamelogostyle{{ height: 64px, display: flex, alignItems: center, justifyContent: center }}DesktopOutlined style{{ fontSize: 32px, color: white }} //divMenu// themedarkitems{items}modeinline/Menu/SiderLayoutHeader style{{ display: flex, justifyContent: space-between }}{React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {className: trigger,style: { color: white },onClick: () setCollapsed(!collapsed),})}UserOutlined style{{ color: white }} //HeaderContentContent/Content/Layout/Layout/div);
}二、Menu 菜单栏一般为树型结构可以点收起菜单栏设置只展开一个一级菜单子菜单单选 import { DesktopOutlined, MailOutlined, MenuFoldOutlined,
MenuUnfoldOutlined, UserOutlined } from ant-design/icons;
import { Layout, Menu } from antd;
import React, { useState } from react;const { Sider, Content, Header } Layout;
export default function LayoutPage() {const [collapsed, setCollapsed] useState(false);const [selectedKeys, setSelectedKeys] useState([]); // 当前选中的子菜单项const [openKeys, setOpenKeys] useState([]); // 当前展开的一级菜单项const items [// title缩进以后悬浮子菜单名一级菜单不会出现{ label: 菜单项一, key: item-1, title: 菜单项一 悬浮, icon: MailOutlined / }, // 菜单项务必填写 key{label: 菜单项二,key: item-2,title: 菜单项二 悬浮,icon: MailOutlined /,children: [{ label: 子菜单项1, key: submenu-item-1, title: 子菜单项1 悬浮 }],},{label: 菜单项3,key: submenu,children: [{ label: 子菜单项2, key: submenu-item-1 },{ label: 子菜单项3, key: submenu-item-2 },],},];// 一级菜单的keyconst openKeysArray items.map((item) item.key);const onOpenChange (keys) {console.log(onOpenChange, keys);// 找到最新打开的那个菜单项const latestOpenKey keys.find((key) !openKeys.includes(key));// 只允许出现一个展开的一级菜单if (openKeysArray.includes(latestOpenKey)) {setOpenKeys([latestOpenKey]);} else {// latestOpenKey不存在说明关闭最后一个展开菜单setOpenKeys(latestOpenKey ? [latestOpenKey] : []);}};return (div classNameLayout{/* h1Layout/h1 */}LayoutSider trigger{null} collapsible collapsed{collapsed}divclassNamelogostyle{{ height: 64px, display: flex, alignItems: center, justifyContent: center }}DesktopOutlined style{{ fontSize: 32px, color: white }} //divMenuitems{items}// modeinline 一级菜单竖着排列子菜单隐藏// modevertical 一级菜单竖着排列子菜单隐藏横着排列hover时子菜单展开// modehorizontal一级菜单横着排列hover时子菜单竖着展开modeinlineopenKeys{openKeys}onOpenChange{onOpenChange}selectedKeys{selectedKeys}onClick{(e) setSelectedKeys([e.key])}/Menu/SiderLayoutHeader style{{ display: flex, justifyContent: space-between }}{React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {className: trigger,style: { color: white },onClick: () setCollapsed(!collapsed),})}UserOutlined style{{ color: white }} //HeaderContentContent: {selectedKeys.join(-)}/Content/Layout/Layout/div);
}
三、Grid栅格 24等分Grid栅格Row表示一行Col表示一列 import { Col, Divider, Row } from antd;
export default function GridPage() {return (div classNamegrid-page{/* gutter{[number, number]} [水平间隔, 垂直间隔] */}{/* 注意水平间隔是左右均分模式number 16 代表 padding: 0 8px */}{/* 垂直间隔在该行下面 16px; 最后一行除外 */}{/* align类似于 flex中的align-items属性; top | middle | bottom */}{/* justify类似于 flex中的justify-content属性; 多了一个space-evenly在space-between基础上即均分剩余空间 */}{/* 注意考虑多行情况每个item高度不定align如何设置 */}{/* 注意考虑多列情况有一行排不满justify如何设置 */}Row gutter{[16, 16]} aligntop justifyspace-evenlyCol span{12}Col1/ColCol span{6}Col2/ColCol span{6}Col3/ColCol span{6}Col3/ColCol span{6}Col3/Col/RowDivider orientationleftHorizontal/Divider{/* gutter{number} 水平间隔 */}{/* wrap{boolean} 是否换行 */}Rowgutter{{xl: 16, // xl 1200px 以上不同的宽度下的独立设置}}wrap{true}{/* Col span{number} 占比 */}{/* offset{number} 左侧偏移, 占据空间但不显示 */}{/* order{number} 排序越小越靠前默认0其中一个写了order其他不写容易乱 */}{/* pull{number} 左侧偏移, 偏移类似于transform, 本体占据空间 */}{/* push{number} 右侧偏移, */}Col span{12} order{2}Col1/Col{/* pull push 同时设置时只显示push */}Col span{6} order{1} offset{6} pull{6} push{1}Col2/ColCol span{6} order{3}Col3/Col{/* xl 1200px 以上不同的宽度下的独立设置 */}Col span{6} order{4} xl{{ span: 12, offset: 6 }}Col4/Col/Row/div);
}
