Layout 布局
有关整体页面布局的设计原则 API文档 组件问题反馈和讨论设计规则
尺寸
- 顶部导航的高度尺寸计算范围:48+8n
- 左侧导航的宽度尺寸计算范围:200+8n
基础布局 #
<code>
Header
Content
Header
Side
Content
Side
Header
Content
侧边栏导航 #
将设置、搜索、用户信息等常用内容放置在左侧导航区,导航层级少于3级时可以使用此结构。同时如果需要深色的皮肤需要在最外层nv-layout 添加样式nv-layout-theme-dark,同时在za-nav的外层添加样式nv-nav-geekblue<code>
显示代码
顶部导航-侧边导航布局 #
将头部固定,将设置、搜索、用户信息等常用内容放置在头部,导航层级多于3级时建议使用<code>
- Nav 1
- Nav 2
User Info
-
Navigation 1
-
Navigation 2
-
Navigation 3
-
Option 11
-
Option 12
-
Option 13
这里是展示内容
顶部导航 #
将头部固定,将设置、搜索、用户信息等常用内容放置在头部,导航层级多于2级时不建议使用<code>
- Nav 1
- Nav 2
User Info
这里是展示内容
顶部—左侧导航深色背景 #
深色背景应用场景比较广泛<code>
- Nav 1
- Nav 2
User Info
-
Navigation 1
-
Navigation 2
-
Navigation 3
-
Option 11
-
Option 12
-
Option 13
这里是展示内容