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

  • リリースバージョン: Australia
  • 更新日 2026年03月12日
  • 所要時間:2分
  • 色変数を使用してモバイルカードビューボタンのテーマを変更する方法について説明します。

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

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

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

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

    ボタンスタイルガイド

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

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

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

    テキスト

    モバイル変数: テキストアクション可能

    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

    テキスト

    モバイル変数: テキストアクション可能

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

    破棄 破棄ボタンの例
    バックグラウンド

    モバイル変数: 破棄

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

    テキスト

    モバイル変数: テキストアクション可能

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

    ベア ベアボタンの例
    バックグラウンド

    モバイル変数: プライマリ/ポジティブ/破棄

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

    now-color_alert--positive-3/

    now-color_alert--critical-3

    テキスト

    モバイル変数: テキストアクション可能

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

    注:
    このボタンは、プライマリ、ポジティブ、または破棄の色で設定できます。
    無効 無効なボタンの例

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

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