Navigation水平导航

2024-06-19 10:26:58首发，54年前更新

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是可选节点。

文本排列

导航文本默认是左排列，使用align参数实现文本左(left)中(center)右(right)排列。

自定义宽度

headWidth属性定义一级菜单的宽度，bodyWidth定义下拉菜单的宽度。

自由菜单

一级主菜单的宽度是可以自由伸缩的。

菜单间隔

使用marginLeft和marginRight属性定义下拉菜单之间的间隔。

鼠标经过展开

导航和menu一样默认click方式打开子菜单，可修改trigger属性为hover即实现：鼠标进入展开，离开自动关闭。