ZUI 3导航
基础用法
使用组件类 .nav 来获得导航外观 通常搭配 <ul>、<menu> 和 <li> 标签来使用。
带标题的导航
可以通过 CSS 类 nav-heading 给导航项设置标题样式。
html
<menu class="nav">
<li class="nav-heading">导航标题</li>
...
</menu>导航样式
除了默认样式，还可以通过修饰类为导航应用不同的样式。
主要导航 .nav-primary
次要导航 .nav-secondary
圆点导航 .nav-pills
标签导航 .nav-tabs
步骤条 .nav-steps
垂直排列
使用修饰类 nav-stacked 使导航获得垂直排列样式，可搭配其他各种样式的导航使用。
.nav-primary.nav-secondary.nav-pills.nav-tabs自适应宽度的导航
使用修饰类 nav-justified 使导航获得自适应宽度样式，可搭配其他各种样式的导航使用。
提示
自适应宽度修饰类不能和垂直排列修饰类混用。
CSS 类
导航提供了如下 CSS 类
| 类 | 类型 | 作用 |
|---|---|---|
nav | 实体类 | 元素导航组件 |
nav-item | 实体类 | 元素导航条目组件 |
nav-heading | 实体类 | 导航标题组件 |
nav-divider | 实体类 | 导航分割线组件 |
active | 修饰类 | 为导航元素启用选中态样式 |
nav-simple | 修饰类 | 为导航元素启用简单样式 |
nav-primary | 修饰类 | 为导航元素启用主要导航样式 |
nav-secondary | 修饰类 | 为导航元素启用次要导航样式 |
nav-tabs | 修饰类 | 为导航元素启用标签风格导航样式 |
nav-pills | 修饰类 | 为导航元素启用标签风格导航样式 |
nav-stacked | 修饰类 | 为导航元素启用垂直排列导航样式 |
nav-justified | 修饰类 | 为导航元素启用自适应宽度导航样式 |
CSS 变量
| 变量名称 | 变量含义 |
|---|---|
| --nav-heading-color | 导航标题字体颜色 |