横向导航组件使用指南_多端低代码开发平台魔笔(Mobi)-阿里云帮助中心

简介

横向导航组件是以水平排列的方式展示导航选项，便于用户快速访问网站或应用中的主要页面和功能。

配置项

分类	配置	示例	说明

分类	配置	示例	说明
内容	模式		导航项模式，支持可视化和数据源。
	导航项		当模式为可视化时生效，可以通过直观操作实现数据的新增、删除和修改。
	数据源		当模式为数据源时生效、动态的可以支持多级、可以通过`children`属性来定义子菜单项，详情参见导航数据源使用指南
	Logo 图片来源		Logo 图片资源的三种模式。
	Logo 图片地址		当 Logo 图片来源为 URL 时生效，值为 Logo 图片的链接。
	系统文件		当 Logo 图片来源为系统文件时生效，可以选择在内置资源文件中上传的图片，也可以点击下方选框直接上传。
	内存对象		当 Logo 图片来源为内存对象时生效，可以与上传组件关联使用，例如：`upload1.values?.[0]`，用于一些不需要发生实际上传行为的场景。
交互	隐藏		控制导航的默认展示状态，为`true` 时将隐藏展示导航。
交互	禁用		控制导航的禁用状态，为`true` 时将禁止点击导航。
样式	外边距		导航组件的外边距，详情参见通用属性。
样式	主题		导航组件的主题，默认为亮色。
CSS 样式	文字大小		导航项文字的字体大小。
	背景颜色		导航组件的背景颜色。
	子菜单背景颜色		导航组件的子级菜单背景颜色。
	菜单项文字颜色		导航项的文字颜色。
	菜单项文字禁用颜色		菜单项被禁用时的文字颜色
	子菜单悬浮态背景色		鼠标指针悬停在菜单项上时的背景颜色，仅对子菜单生效。
	菜单项文字悬浮颜色		鼠标指针悬停在菜单项时的文字颜色
	子菜单选中态背景色		当前菜单项被选中时的背景颜色，仅对子菜单生效。
	菜单项文字选中颜色		当前菜单项被选中时的文字颜色。
	子菜单激活态背景色		用于反馈用户点击菜单项瞬间的背景颜色变化，仅对子菜单生效
	暗色模式下的背景色		暗色模式下，导航组件的背景颜色。
	暗色模式下的子菜单背景颜色		暗色模式下，导航组件的子级菜单背景颜色。
	暗色模式下的菜单项文字颜色		暗色模式下，导航项的文字颜色。
	暗色模式下的菜单项文字禁用颜色		暗色模式下，菜单项被禁用时的文字颜色。
	暗色模式下的子菜单项悬浮态背景色		暗色模式下，鼠标指针悬停在菜单项上时的背景颜色，仅对子菜单生效。
	暗色模式下的菜单项文字悬浮颜色		暗色模式下，鼠标指针悬停在菜单项时的文字颜色
	暗色模式下的子菜单项选中态背景色		暗色模式下，当前菜单项被选中时的背景颜色，仅对子菜单生效。
	暗色模式下的菜单项文字选中颜色		暗色模式下，当前菜单项被选中时的文字颜色。

属性与方法

名称	类型	示例	说明

名称	类型	示例	说明
items	array	`horizontalNavigation1.items`	只读，可视化模式下的导航数据
dataSource	array	`horizontalNavigation1.dataSource`	只读，数据源模式下的导航数据
disabled	boolean	`horizontalNavigation1.disabled`	导航的禁用状态
setDisabled	func	`horizontalNavigation1.setDisabled(true)`	设置当前导航组件的禁用状态，为`true` 时将禁止点击导航
clearDisabled	func	`horizontalNavigation1.clearDisabled()`	清除当前导航组件的禁用状态