Proprietà CSS per personalizzare Places UI Kit

Seleziona la piattaforma: Android iOS JavaScript

Il Places UI Kit supporta una serie di impostazioni e proprietà CSS personalizzate per configurare gli elementi di visualizzazione. Utilizza questa tabella di riferimento delle proprietà CSS per vedere come queste proprietà possono essere applicate al UI Kit.

Utilizza lo strumento di personalizzazione per visualizzare in che modo i diversi insiemi di proprietà influiscono sull'aspetto di un elemento Place Details e accedi al codice in HTML/CSS, Kotlin/XML e Swift.

Proprietà CSS mappate agli elementi di Places UI Kit

Places UI Kit offre un approccio di sistema di progettazione alla personalizzazione visiva basato approssimativamente su Material Design (con alcune modifiche specifiche di Google Maps). Consulta i riferimenti di Material Design per Colore e Tipografia. Per impostazione predefinita, lo stile rispetta il linguaggio di progettazione visiva di Google Maps.

Proprietà CSS

Proprietà Elemento compatto Details Elemento Details Utilizzo
Colore (sistema)
--gmp-mat-color-surface ✔ ✔ Sfondo del container e della finestra di dialogo
--gmp-mat-color-on-surface ✔ ✔ Intestazioni, contenuti della finestra di dialogo
--gmp-mat-color-on-surface-variant ✔ ✔ Informazioni sul luogo
--gmp-mat-color-primary ✔ ✔ Link, indicatore di caricamento, icone di panoramica
--gmp-mat-color-disabled-surface ✔ Valutazione a stelle non compilata
--gmp-mat-color-positive ✔ ✔ Posiziona l'etichetta "Aperto" ora
--gmp-mat-color-positive-container ✔ Badge Caricabatterie EV disponibile
--gmp-mat-color-on-positive-container ✔ Contenuti del badge Caricabatterie EV disponibile
--gmp-mat-color-negative ✔ ✔ Etichetta "Chiuso" ora
--gmp-mat-color-info ✔ ✔ Icona Ingresso accessibile
--gmp-mat-color-secondary-container ✔ ✔ Sfondo pulsante
--gmp-mat-color-on-secondary-container ✔ ✔ Testo e icona del pulsante
--gmp-mat-color-neutral-container ✔ ✔ Badge della data della recensione, forme segnaposto di caricamento
--gmp-mat-color-on-neutral-container ✔ ✔ Data della recensione, errore di caricamento
--gmp-mat-color-outline-decorative ✔ ✔ Bordo del contenitore
--gmp-popular-times-bar-color ✔ Barre dell'istogramma degli orari di punta per le ore non correnti
--gmp-popular-times-bar-current-hour-color ✔ Barra dell'istogramma degli orari di punta per l'ora corrente
--gmp-popular-times-bar-current-hour-live-color ✔ Barra dell'istogramma degli orari di punta e testo dello stato per l'ora corrente quando sono disponibili dati in tempo reale
Tipografia (sistema)
--gmp-mat-font-family ✔ ✔ Famiglia di caratteri di base per tutta la tipografia
--gmp-mat-font-display-small ✔ Nome del luogo
--gmp-mat-font-headline-medium ✔ ✔ Intestazioni della finestra di dialogo
--gmp-mat-font-title-small ✔ Nome del luogo
--gmp-mat-font-body-medium ✔ Informazioni sul luogo, contenuti della finestra di dialogo
--gmp-mat-font-body-small ✔ Informazioni sul luogo
--gmp-mat-font-label-large ✔ ✔ Contenuto del pulsante
--gmp-mat-font-label-medium ✔ Contenuto del badge
Contenitore (componente)
border (on :host) ✔ ✔ Container
border-radius (on :host) ✔ ✔ Container

Combinazione di colori predefinita

Per impostazione predefinita, i componenti di Places UI Kit si adattano automaticamente alla combinazione di colori preferita dell'utente, rilevando se l'utente ha impostato il browser o il sistema in modalità Luce o Buio. L'aspetto del componente si adatterà automaticamente alle preferenze dell'utente.

Elementi di Places UI Kit in modalità Luce e Buio

Quando applichi i tuoi stili personalizzati, assicurati di testare le modifiche sia in modalità Luce che Buio per evitare incoerenze visive. Se la tua applicazione utilizza un unico tema fisso, il cambio automatico del tema può comportare un'esperienza utente scadente. Ad esempio, un componente con tema scuro potrebbe essere visualizzato nella tua app con tema chiaro. Per evitare che ciò accada, puoi forzare il componente a eseguire sempre il rendering in un tema specifico impostando color-scheme nel CSS.

Attribuzione del brand Google Maps

Proprietà Elemento compatto Details Elemento Details Utilizzo
(black | white | gray) ✔ ✔ Attribuzione del brand Google Maps,
Pulsante di informativa di Google Maps

I Termini di servizio di Google Maps richiedono l'utilizzo di uno dei tre colori del brand per l'attribuzione di Google Maps. Questa attribuzione deve essere visibile e accessibile quando vengono apportate modifiche di personalizzazione. Per saperne di più, consulta i requisiti di attribuzione.

Offriamo una scelta di tre colori del brand che possono essere impostati in modo indipendente per i temi chiaro e scuro: 

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