Places UI キットのカスタム スタイル設定

プラットフォームを選択: Android iOS JavaScript

Places UI Kit は、表示要素を構成するためのさまざまな設定とカスタム CSS プロパティをサポートしています。以下のカスタマイズ ツールと CSS プロパティのリファレンス表で、これらのプロパティを UI Kit に適用する方法を確認してください。

Places UI キットの要素にマッピングされた CSS プロパティ

Places UI キットは、マテリアル デザイン（Google マップ固有の変更あり）にほぼ基づいた、視覚的なカスタマイズに対するデザイン システム アプローチを提供します。マテリアル デザインの色とタイポグラフィのリファレンスをご覧ください。デフォルトでは、スタイルは Google マップのビジュアル デザイン言語に準拠しています。

カスタマイズ ツール

このツールを使用して、Places UI キット要素のカスタム構成を可視化します。

CSS プロパティ

プロパティ Details Compact 要素 Details 要素 用途
色（システム）
--gmp-mat-color-surface ✔ ✔ コンテナとダイアログの背景
--gmp-mat-color-on-surface ✔ ✔ 見出し、ダイアログのコンテンツ
--gmp-mat-color-on-surface-variant ✔ ✔ お店/スポット情報
--gmp-mat-color-primary ✔ ✔ リンク、読み込みインジケーター、概要アイコン
--gmp-mat-color-disabled-surface ✔ 星評価（塗りつぶされていない）
--gmp-mat-color-positive ✔ ✔ 「営業中」ラベルを配置
--gmp-mat-color-positive-container ✔ EV 充電器ありバッジ
--gmp-mat-color-on-positive-container ✔ 利用可能な EV 充電器バッジのコンテンツ
--gmp-mat-color-negative ✔ ✔ 閉店した場所のラベル
--gmp-mat-color-info ✔ ✔ 入口がバリアフリーのアイコン
--gmp-mat-color-secondary-container ✔ ✔ ボタンの背景
--gmp-mat-color-on-secondary-container ✔ ✔ ボタンのテキストとアイコン
--gmp-mat-color-neutral-container ✔ ✔ 日付バッジ、読み込みプレースホルダの形状を確認
--gmp-mat-color-on-neutral-container ✔ ✔ レビューの日付、読み込みエラー
--gmp-mat-color-outline-decorative ✔ ✔ コンテナの境界線
タイポグラフィ（システム）
--gmp-mat-font-family ✔ ✔ すべてのタイポグラフィの基本フォント ファミリー
--gmp-mat-font-display-small ✔ 場所の名前
--gmp-mat-font-headline-medium ✔ ✔ ダイアログの見出し
--gmp-mat-font-title-small ✔ 場所の名前
--gmp-mat-font-body-medium ✔ 場所の情報、ダイアログのコンテンツ
--gmp-mat-font-body-small ✔ お店/スポット情報
--gmp-mat-font-label-large ✔ ✔ ボタンのコンテンツ
--gmp-mat-font-label-medium ✔ バッジのコンテンツ
コンテナ（コンポーネント）
border（:host 上） ✔ ✔ コンテナ
border-radius（:host 上） ✔ ✔ コンテナ

デフォルトの配色

デフォルトでは、Places UI Kit コンポーネントはユーザーの優先する配色に自動的に適応し、ユーザーのブラウザまたはシステムがライトモードとダークモードのどちらに設定されているかを検出します。コンポーネントの外観は、ユーザーの設定に合わせて自動的に調整されます。

ライトモードとダークモードの Places UI キットの要素

独自のカスタム スタイルを適用する場合は、変更をライトモードとダークモードの両方でテストして、視覚的な不整合を防ぐようにしてください。アプリで単一の固定テーマを使用している場合、テーマが自動的に切り替わるとユーザー エクスペリエンスが低下する可能性があります。たとえば、ライトテーマのアプリにダークテーマのコンポーネントが表示されることがあります。これを防ぐには、CSS で color-scheme を設定して、コンポーネントが常に特定のテーマでレンダリングされるように強制できます。

Google マップのブランド アトリビューション

プロパティ Details Compact 要素 Details 要素 用途
（黒 | 白 | グレー） ✔ ✔ Google マップのブランド帰属、
Google マップの開示ボタン

Google マップの利用規約では、Google マップの帰属表示に 3 つのブランドカラーのうちの 1 つを使用することが求められています。この帰属情報は、カスタマイズの変更が行われたときに表示され、アクセス可能である必要があります。詳しくは、帰属表示の要件をご覧ください。

ライトテーマとダークテーマで個別に設定できる 3 つのブランドカラーから選択できます。

<gmp-place-content-config>
  <gmp-place-attribution
      light-scheme-color="black"
      dark-scheme-color="white"
  ></gmp-place-attribution>
</gmp-place-content-config>