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

  • リリースバージョン: Xanadu
  • 更新日 2024年08月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
    中 中程度のアイコン色 中アイコンの例
    モバイル変数
    alert--moderate-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--紫-2
    青緑 青緑色のアイコン色 青緑色のアイコンの例
    Web 変数
    --now-color_grouped--teal-2
    黄 黄色のアイコン色 黄色のアイコンの例
    Web 変数
    --now-color_grouped--yellow-2