デザイン概要 — 継承とオーバーライド

Navi+ は 3 レイヤーのスタイルシステムを使用します。

3 つのレイヤー

┌─────────────────────────────────────────────────────┐
│  レベル 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. デザイン → レベル 1 → Text Color = #FFFFFF
  2. 編集項目 → 「セール」 → インターフェース → Text Color = #FF0000

モバイル | デスクトップの構文

8 16 8 16 → 両デバイスで同じ 8 8 8 8 | 12 24 12 24 → 左：モバイル、右：デスクトップ