设计概述 — 继承与覆盖
Navi+使用一个三级样式系统。理解这一点可以让您高效地为菜单设置样式,而无需重复设置。
三个层级
┌─────────────────────────────────────────────────────┐
│ LEVEL 1 (Design → Level 1) │
│ 适用于所有顶级菜单项 │
│ 这是整个菜单的全局默认值 │
└───────────────────┬─────────────────────────────────┘
│ Level 2-3 如果为空则继承
┌───────────────────▼─────────────────────────────────┐
│ LEVEL 2-3 (Design → Level 2-3) │
│ 适用于子菜单 / 下拉菜单 │
│ 为空 = 与Level 1相同 │
└───────────────────┬─────────────────────────────────┘
│ 每个项目覆盖所有
┌───────────────────▼─────────────────────────────────┐
│ PER-ITEM (Edit Item → Interface) │
│ 针对单个项目的每个项目设置 │
│ 完全覆盖Level 1和Level 2-3 │
└─────────────────────────────────────────────────────┘
继承规则
Level 2-3从Level 1继承所有空字段:
| Level 2-3字段 | 从Level 1继承 |
|---|---|
| 文本颜色 | 文本颜色 |
| 字体大小 | 字体大小 |
| 字体粗细 | 字体粗细 |
| 图标颜色 | 图标颜色 |
| 图标大小 | 图标大小 |
| 显示布局 | 显示布局 |
| 对齐 | 对齐 |
| 分隔符颜色 | 分隔符(全局) |
如果您只配置Level 1,子菜单会自动跟随。只有在您希望子菜单与主菜单看起来不同时,才转到Level 2-3。
每个项目覆盖
在Edit Item → Interface中应用于特定项目的设置(文本颜色、图标大小、背景等)仅覆盖该项目的Level 1和Level 2-3。其他项目不受影响。
要移除覆盖:在Edit Item中清除字段 — 项目将恢复到Level 1/2-3。
示例
目标: 所有5个项目的文本为白色,除了”Sale”为红色。
- Design → Level 1 → 文本颜色 =
#FFFFFF - Edit Item → “Sale” → Interface → 文本颜色 =
#FF0000
结果:4个项目保持白色,”Sale”变为红色。无需单独编辑每个项目。
移动 | 桌面语法
某些间距字段支持移动和桌面不同的值:
8 16 8 16 → 两个设备相同的值
8 8 8 8 | 12 24 12 24 → 左侧:移动,右侧:桌面
在|之前的部分适用于移动;之后的部分适用于桌面(≥768px)。