Places UI キット は、表示要素を構成するためのさまざまな設定とカスタム CSS プロパティをサポートしています。これらのプロパティを UI キットに適用する方法については、こちらの CSS プロパティのリファレンス表をご覧ください。
カスタマイズ ツールを使用すると、さまざまなプロパティのセットが Place Details 要素の外観にどのように影響するかを視覚化し、HTML/CSS、Kotlin/XML、Swift のコードにアクセスできます。
Places UI キットは、マテリアル デザイン（Google マップ固有の変更がいくつか加えられています）に大まかに基づいた、ビジュアル カスタマイズのデザイン システム アプローチを提供します。マテリアル デザインの色とタイポグラフィのリファレンスをご覧ください。デフォルトでは、スタイルは Google マップのビジュアル デザイン ランゲージに準拠しています。
CSS プロパティ
| プロパティ | 詳細コンパクト要素 | 詳細要素 | 用途 |
|---|---|---|---|
| 色（システム） | |||
--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-popular-times-bar-color |
✔ | 現在の時間帯以外の混雑する時間帯のヒストグラム バー | |
--gmp-popular-times-bar-current-hour-color |
✔ | 現在の時間帯の混雑する時間帯のヒストグラム バー | |
--gmp-popular-times-bar-current-hour-live-color |
✔ | 混雑する時間帯のヒストグラム バーと、現在の時間帯のステータス テキスト（ライブデータが利用可能な場合） | |
| タイポグラフィ（システム） | |||
--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 キット コンポーネントは、ユーザーがブラウザまたはシステムをライトモードまたはダークモードに設定しているかどうかを検出し、ユーザーが好むカラーパターンに自動的に適応します。コンポーネントの外観は、ユーザーの設定に合わせて自動調整されます。
独自のカスタム スタイルを適用する場合は、視覚的な不整合を防ぐために、ライトモードとダークモードの両方で変更をテストしてください。アプリで単一の固定テーマを使用している場合、テーマの自動切り替えによってユーザー エクスペリエンスが低下する可能性があります。たとえば、ライトモードのアプリにダークモードのコンポーネントが表示されることがあります。これを防ぐには、CSS で color-scheme を設定して、コンポーネントが常に特定のテーマでレンダリングされるようにします。
Google マップのブランド帰属表示
| プロパティ | 詳細コンパクト要素 | 詳細要素 | 用途 |
|---|---|---|---|
| (black | white | gray) | ✔ | ✔ | Google マップのブランド帰属表示、 Google マップの開示ボタン |
Google マップの利用規約により、Google マップの帰属表示には 3 つのブランドカラーのいずれかを使用する必要があります。この帰属表示は、カスタマイズの変更が行われたときに表示され、アクセス可能である必要があります。 詳しくは、帰属表示の要件をご覧ください。
ライトモードとダークモードで個別に設定できる 3 つのブランドカラーが用意されています。
- ライトモード:
PlaceAttributionElement.lightSchemeColor。白、グレー、黒の属性があります。 - ダークモード:
PlaceAttributionElement.darkSchemeColor。白、グレー、黒の属性があります。
<gmp-place-details-compact>
<gmp-place-details-place-request place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
<gmp-place-name></gmp-place-name>
<gmp-place-rating></gmp-place-rating>
<gmp-place-attribution
light-scheme-color="black"
dark-scheme-color="white"
></gmp-place-attribution>
</gmp-place-details-compact>