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

  • リリースバージョン: Zurich
  • 更新日 2025年07月31日
  • 所要時間：2分

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

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

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

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

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

    ボタンスタイルガイド

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

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

    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

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

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

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