カードビューボタンの色変数のサポート

  • リリースバージョン: Xanadu
  • 更新日 2024年08月01日
  • 所要時間：2分

    • 色変数を使用してモバイルカードビューボタンのテーマを変更する方法について説明します。

    カードテンプレート要素属性の色変数を使用して、モバイルカードのアイコンボタンの色値を制御します。

    次の色変数を使用できます。
    • 背景色の変数
    • BorderColorVariable
    • TextColorVariable

    これらの属性の詳細については、「 カードテンプレート要素の属性」を参照してください。

    		 カードビューテンプレート要素で使用される色変数

    ボタンのスタイルガイド

    色 例 変数
    プライマリ プライマリボタンの例
    バックグラウンド

    モバイル変数: プライマリ

    Web 変数: now-color--primary-1

    テキスト

    モバイル変数: Text Actionable

    Web 変数: now-color_text--primary-actionable
    セカンダリ セカンダリボタンの例
    バックグラウンド

    モバイル変数: 背景プライマリ

    Web 変数: now-color_background--primary

    テキスト

    モバイル変数: プライマリ

    Web 変数: now-color--primary-1

    境界線 (2px)

    モバイル変数: プライマリ

    Web 変数: now-color--primary-1
    好意的 ポジティブボタンの例
    バックグラウンド

    モバイル変数: 正

    Web 変数: now-color_alert--positive-3

    テキスト

    モバイル変数: Text Actionable

    Web 変数: now-color_text--primary-actionable
    破棄 破棄ボタンの例
    バックグラウンド

    モバイル変数: 破棄

    Web 変数: now-color_alert--critical-3

    テキスト

    モバイル変数: Text Actionable

    Web 変数: now-color_text--primary-actionable
    ベア ベアボタンの例
    バックグラウンド

    モバイル変数: プライマリ/ポジティブ/デストラクティブ

    Web 変数: now-color--primary-1/

    now-color_alert--positive-3/

    now-color_alert--critical-3

    テキスト

    モバイル変数: Text Actionable

    Web 変数: now-color_text--primary-actionable

    注:
    このボタンは、原色、正の色、または破壊色で構成できます。
    無効 無効なボタンの例

    このスタイルは、オフライン中にアクションを使用できない場合に使用します。

    プライマリ、セカンダリ、テキスト/アイコンのすべてのスタイルで使用できます。