アイコン UI セクションの色変数のサポート

  • リリースバージョン: Washingtondc
  • 更新日 2024年02月01日
  • 読む3読むのに数分

    • 色変数を使用してモバイルアイコン UI セクションのテーマを変更する方法について説明します。

    アイコン UI セクションには、要素の前景色と背景色を制御する 2 つのフィールドを持つ [色 ] セクションがあります。

    • 背景色変数
    • フォアグラウンド色変数
    これらの 2 つのフィールドは、次のテーブルにあります。
    • アイコンセクション宛先ランチャー [sys_sg_navigation_section_destination_applet_launcher]
    • アイコンセクション宛先機能 [sys_sg_navigation_section_destination_button]
    • アイコンセクション宛先画面 [sys_sg_navigation_section_destination_screen]

    これらのアクションの作成の詳細については、「」を参照してください アイコン UI セクションの構成。

    UX テーマプロパティ [sys_ux_theme_property] テーブルから任意の色変数を定義できます。使用可能な変数のリストについては、以下のカラーデザインガイドを参照してください。

    		 アイコン UI セクションで使用される色変数

    モバイルアイコン UI セクションカラーガイド

    色変数は以下に分けられます。 設計ガイドラインを使用して、ユースケースに適した色変数を特定します。

    アラートのカラーパレット
    アラートカラーパレットの色は、重要なステータス、ステータス、およびタスクを強調表示します。アラートの色は、装飾や整理のためではなく、特定の意味を伝えるために使用します。
    グループ化されたカラーパレット
    グループ化されたカラーパレットの色は、業種別の色の規則に従います。これらの色を使用して、色付きのアイテムが特定の業界または基幹業務に関連付けられていることを示します。各色の意味はコンテキストによって異なりますが、アプリ内では一貫している必要があります。

    アラートのカラーパレット

    色名 色 例 カラーバリエーション
    プライマリ プライマリアイコンの色 プライマリアイコンの例
    モバイル変数
    primary
    Web 変数
    --now-color--primary-1
    重大 重大アイコンの色 重大アイコンの例
    モバイル変数
    alert--critical-2
    Web 変数
    --now-color_alert--critical-2
    高 高アイコンの色 高アイコンの例
    モバイル変数
    alert--high-2
    Web 変数
    --now-color_alert--high-2
    訓告 警告アイコンの色 警告アイコンの例
    モバイル変数
    alert--warning-2
    Web 変数
    --now-color_alert--warning-2
    中 アイコンの色 (中) 中アイコンの例
    モバイル変数
    アラート --中-2
    Web 変数
    --now-color_alert--moderate-2
    情報 情報アイコンの色 情報アイコンの例
    モバイル変数
    alert--info-2
    Web 変数
    --now-color_alert--info-2
    好意的 正のアイコン色 ポジティブアイコンの例
    モバイル変数
    alert--positive-2
    Web 変数
    --now-color_alert--positive-2
    低 低いアイコンの色 低アイコンの例
    モバイル変数
    alert--low-2
    Web 変数
    --now-color_alert--low-2

    グループ化されたカラーパレット

    色名 色 例 カラーバリエーション
    青 青色のアイコン色 青色のアイコンの例
    Web 変数
    --now-color_grouped--blue-2
    茶色 茶色のアイコン色
    Web 変数
    --now-color_grouped--brown-2
    グレイ グレーのアイコン色 グレーのアイコンの例
    Web 変数
    --now-color_grouped--gray-2
    緑 緑色のアイコン色 緑のアイコンの例
    Web 変数
    --now-color_grouped--green-2
    緑黄 緑黄のアイコン色 緑と黄のアイコンの例
    Web 変数
    --now-color_grouped--green-yellow-2
    マゼンタ マゼンタのアイコンの色 マゼンタのアイコンの例
    Web 変数
    --now-color_grouped--magenta-2
    オレンジ オレンジ色のアイコン色 オレンジ色のアイコンの例
    Web 変数
    --now-color_grouped--orange-2
    ピンク ピンクのアイコンの色 ピンクのアイコンの例
    Web 変数
    --now-color_grouped--pink-2
    紫 紫のアイコン色 紫色のアイコンの例
    Web 変数
    --now-color_grouped--purple-2
    青緑 青緑色のアイコン色 青緑色のアイコンの例
    Web 変数
    --now-color_grouped--teal-2
    黄 黄色のアイコン色 黄色のアイコンの例
    Web 変数
    --now-color_grouped--yellow-2