组件

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>
  • Navigation 1
    • Option 1
    • Option 2
    • Submenu2
      • Option 3
      • Option 4
  • Navigation 2
    • Option 5
    • Option 6
    • Option 7
  • Navigation 3
    • Option 8
    • Option 9
    • Option 10
  • Option 11
  • Option 12
  • Option 13

User Name

Home Page Subpage Other info
这里是展示内容
显示代码

顶部导航-侧边导航布局 #

将头部固定,将设置、搜索、用户信息等常用内容放置在头部,导航层级多于3级时建议使用
<code>
User Info
  • Navigation 1
    • Option 1
    • Option 2
    • Submenu2
      • Option 3
      • Option 4
  • Navigation 2
    • Option 5
    • Option 6
    • Option 7
  • Navigation 3
    • Option 8
    • Option 9
    • Option 10
  • Option 11
  • Option 12
  • Option 13
Home Page Subpage Other info
这里是展示内容
显示代码

顶部导航 #

将头部固定,将设置、搜索、用户信息等常用内容放置在头部,导航层级多于2级时不建议使用
<code>
User Info
Home Page Subpage Other info
这里是展示内容
显示代码

顶部—左侧导航深色背景 #

深色背景应用场景比较广泛
<code>
User Info
  • Navigation 1
    • Option 1
    • Option 2
    • Submenu2
      • Option 3
      • Option 4
  • Navigation 2
    • Option 5
    • Option 6
    • Option 7
  • Navigation 3
    • Option 8
    • Option 9
    • Option 10
  • Option 11
  • Option 12
  • Option 13
Home Page Subpage Other info
这里是展示内容
显示代码