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

  • リリースバージョン: Washingtondc
  • 更新日 2024年02月01日
  • 読む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

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

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

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