设计概述 — 继承与覆盖
Navi+ 使用三层样式系统。
三层结构
┌─────────────────────────────────────────────────────┐
│ 第 1 级 (设计 → 第 1 级) │
│ 应用于所有顶级菜单项 │
└───────────────────┬─────────────────────────────────┘
│ 为空时第 2-3 级继承
┌───────────────────▼─────────────────────────────────┐
│ 第 2-3 级 (设计 → 第 2-3 级) │
│ 应用于子菜单 / 下拉菜单 │
│ 空 = 与第 1 级相同 │
└───────────────────┬─────────────────────────────────┘
│ 单项覆盖所有内容
┌───────────────────▼─────────────────────────────────┐
│ 单项 (编辑项 → 界面) │
│ 完全覆盖第 1 级和第 2-3 级 │
└─────────────────────────────────────────────────────┘
继承规则
第 2-3 级对所有空字段从第 1 级继承:
| 第 2-3 级字段 | 从第 1 级继承 |
|---|---|
| Text Color | Text Color |
| Font Size | Font Size |
| Font Weight | Font Weight |
| Icon Color | Icon Color |
| Icon Size | Icon Size |
| Display Layout | Display Layout |
| Align | Align |
| Divider Color | Divider(全局) |
单项覆盖
编辑项 → 界面中的设置仅对该项覆盖第 1 级和第 2-3 级。清除字段可移除覆盖。
示例
目标:所有 5 个项目白色文本,”促销”除外 = 红色。
- 设计 → 第 1 级 → Text Color = #FFFFFF
- 编辑项 → “促销” → 界面 → Text Color = #FF0000
移动端 | 桌面端语法
8 16 8 16 → 两个设备相同 8 8 8 8 | 12 24 12 24 → 左:移动端,右:桌面端