Navigation水平导航
nav导航模块来自Menu模块的水平布局,本质还是Menu模块,主要使用Menu模块原有参数中的row参数,其若干属性适合于设置水平导航的风格。
前言
本页导航模块来源于Menu
模块的水平布局,与水平导航相关的参数有:
- row:设置导航的视觉效果,设置
row.enable=true
或者row=true
可按默认值启用 - trigger:显示子菜单的触发方式,可设为
hover
参数属性
与水平导航相关的row参数的属性如下:
属性名(prop) | 值类型 | 默认值 | 说明 |
---|---|---|---|
enable | boolean | false | 是否启用水平菜单 |
headWidth | string | '' | 导航头宽度,例如300px |
bodyWidth | string | '' | 导航内容宽度,例如300px |
marginLeft | string | '' | 导航左边距,例如28px |
marginRight | string | '' | 导航右边距,例如28px |
align | 'left'/'center'/'right' | 'left' | 子导航文本排序 |
简单使用
直接设置row:true
便可将垂直菜单转为水平导航。
标准多级菜单
使用ul + li + div + role="label" + role="arrow"
节点创建标准多级菜单。
使用完整的结构
role=icon
、role=disk
、role=cube
、role=tips
和ax-badge
是可选节点。
- 输出
- HTML
文本排列
导航文本默认是左排列,使用align
参数实现文本左(left
)中(center
)右(right
)排列。
- 输出
- HTML
自定义宽度
headWidth
属性定义一级菜单的宽度,bodyWidth
定义下拉菜单的宽度。
自由菜单
一级主菜单的宽度是可以自由伸缩的。
菜单间隔
使用marginLeft
和marginRight
属性定义下拉菜单之间的间隔。
鼠标经过展开
导航和menu一样默认click
方式打开子菜单,可修改trigger
属性为hover
即实现:鼠标进入展开,离开自动关闭。