Propriétés CSS pour personnaliser le Kit UI Places

Sélectionnez une plate-forme : Android iOS JavaScript

Le kit UI pour Places accepte différents paramètres et propriétés CSS personnalisées pour configurer les éléments d'affichage. Utilisez ce tableau de référence des propriétés CSS pour voir comment ces propriétés peuvent être appliquées au kit d'interface utilisateur.

Utilisez l'outil de personnalisation pour visualiser l'impact de différents ensembles de propriétés sur l'apparence d'un élément Place Details et accéder au code en HTML/CSS, Kotlin/XML et Swift.

Propriétés CSS mappées aux éléments du Kit UI pour Places

Le kit UI pour Places propose une approche de système de conception pour la personnalisation visuelle, basée approximativement sur Material Design (avec quelques modifications spécifiques à Google Maps). Consultez la documentation de référence de Material Design sur les couleurs et la typographie. Par défaut, le style respecte le langage de conception visuelle de Google Maps.

Propriétés CSS

Propriété Élément compact de détails Élément Details Utilisation
Couleur (système)
--gmp-mat-color-surface ✔ ✔ Arrière-plan du conteneur et de la boîte de dialogue
--gmp-mat-color-on-surface ✔ ✔ Titres, contenu de la boîte de dialogue
--gmp-mat-color-on-surface-variant ✔ ✔ Informations sur le lieu
--gmp-mat-color-primary ✔ ✔ Liens, indicateur de chargement, icônes de présentation
--gmp-mat-color-disabled-surface ✔ Note (étoile vide)
--gmp-mat-color-positive ✔ ✔ Placer le libellé "Ouvert"
--gmp-mat-color-positive-container ✔ Badge "Borne pour véhicules électriques disponible"
--gmp-mat-color-on-positive-container ✔ Contenu du badge "Borne pour véhicules électriques disponible"
--gmp-mat-color-negative ✔ ✔ Libellé "Fermé" pour un lieu
--gmp-mat-color-info ✔ ✔ Icône Entrée accessible
--gmp-mat-color-secondary-container ✔ ✔ Arrière-plan du bouton
--gmp-mat-color-on-secondary-container ✔ ✔ Texte et icône du bouton
--gmp-mat-color-neutral-container ✔ ✔ Badge de date de l'avis, chargement des formes d'espace réservé
--gmp-mat-color-on-neutral-container ✔ ✔ Date de l'avis, erreur de chargement
--gmp-mat-color-outline-decorative ✔ ✔ Bordure du conteneur
--gmp-popular-times-bar-color ✔ Barres de l'histogramme des horaires d'affluence pour les heures non actuelles
--gmp-popular-times-bar-current-hour-color ✔ Barre de l'histogramme des horaires d'affluence pour l'heure actuelle
--gmp-popular-times-bar-current-hour-live-color ✔ Barre de l'histogramme des horaires d'affluence et texte d'état pour l'heure actuelle lorsque des données en direct sont disponibles
Typographie (système)
--gmp-mat-font-family ✔ ✔ Famille de polices de base pour toute la typographie
--gmp-mat-font-display-small ✔ Nom de lieu
--gmp-mat-font-headline-medium ✔ ✔ Titres de boîte de dialogue
--gmp-mat-font-title-small ✔ Nom de lieu
--gmp-mat-font-body-medium ✔ Informations sur le lieu, contenu de la boîte de dialogue
--gmp-mat-font-body-small ✔ Informations sur le lieu
--gmp-mat-font-label-large ✔ ✔ Contenu du bouton
--gmp-mat-font-label-medium ✔ Contenu du badge
Conteneur (composant)
border (sur :host) ✔ ✔ Conteneur
border-radius (sur :host) ✔ ✔ Conteneur

Jeu de couleurs par défaut

Par défaut, les composants du kit UI pour Places s'adaptent automatiquement au jeu de couleurs préféré de l'utilisateur, en détectant si le navigateur ou le système de l'utilisateur est défini sur le mode clair ou sombre. L'apparence du composant s'ajustera automatiquement en fonction des préférences de l'utilisateur.

Éléments du Kit UI pour Places en modes clair et sombre

Lorsque vous appliquez vos propres styles personnalisés, veillez à tester vos modifications en mode clair et en mode sombre pour éviter les incohérences visuelles. Si votre application utilise un seul thème fixe, le changement automatique de thème peut nuire à l'expérience utilisateur. Par exemple, un composant au thème sombre peut apparaître dans votre application au thème clair. Pour éviter cela, vous pouvez forcer le composant à toujours s'afficher dans un thème spécifique en définissant color-scheme en CSS.

Attribution de la marque Google Maps

Propriété Élément compact de détails Élément Details Utilisation
(black | white | gray) ✔ ✔ Attribution de la marque Google Maps,
Bouton de divulgation Google Maps

Les Conditions d'utilisation de Google Maps exigent que vous utilisiez l'une des trois couleurs de la marque pour l'attribution Google Maps. Cette attribution doit être visible et accessible lorsque des modifications de personnalisation ont été apportées. Pour en savoir plus, consultez les exigences d'attribution.

Nous proposons trois couleurs de marque qui peuvent être définies indépendamment pour les thèmes clair et sombre : 

<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>