Benutzerdefiniertes Design für das UI-Kit für Places

Das Places UI Kit unterstützt eine Vielzahl von Einstellungen und benutzerdefinierten CSS-Eigenschaften, um die Anzeigeelemente zu konfigurieren. Im Anpassungstool und in der Referenztabelle unten mit den CSS-Eigenschaften sehen Sie, wie diese Eigenschaften auf das UI-Kit angewendet werden können.

CSS-Eigenschaften, die den UI Kit-Elementen für „Orte“ zugeordnet sind

Das Places UI Kit bietet einen Designsystemansatz für die visuelle Anpassung, der grob auf Material Design basiert (mit einigen Google Maps-spezifischen Modifikationen). Weitere Informationen finden Sie in der Material Design-Referenz zu Farbe und Typografie. Standardmäßig entspricht der Stil der visuellen Designsprache von Google Maps.

Tool zur Anpassung

Mit diesem Tool können Sie benutzerdefinierte Konfigurationen in einem UI-Kit-Element für Google Lokale Dienstleistungen visualisieren.

CSS-Properties

Attribut Kompaktelement für Details Details-Element Nutzung
Farbe (System)
--gmp-mat-color-surface ✔ ✔ Container- und Dialogfeldhintergrund
--gmp-mat-color-on-surface ✔ ✔ Überschriften, Dialoginhalt
--gmp-mat-color-on-surface-variant ✔ ✔ Informationen zum Ort
--gmp-mat-color-primary ✔ ✔ Links, Ladeanzeige, Symbole für die Übersicht
--gmp-mat-color-disabled-surface ✔ Bewertung ohne Sterne
--gmp-mat-color-positive ✔ ✔ Label „Jetzt geöffnet“ platzieren
--gmp-mat-color-positive-container ✔ Symbol für verfügbare Ladestation für Elektrofahrzeuge
--gmp-mat-color-on-positive-container ✔ Verfügbare Inhalte für das Symbol für Ladestationen für Elektrofahrzeuge
--gmp-mat-color-negative ✔ ✔ Label „Geschlossen“ jetzt angeben
--gmp-mat-color-info ✔ ✔ Symbol für barrierefreien Zugang
--gmp-mat-color-secondary-container ✔ ✔ Schaltflächenhintergrund
--gmp-mat-color-on-secondary-container ✔ ✔ Schaltflächentext und -symbol
--gmp-mat-color-neutral-container ✔ ✔ Symbol für das Datum der Überprüfung, Formen für den Ladevorgang
--gmp-mat-color-on-neutral-container ✔ ✔ Rezensionsdatum, Ladefehler
--gmp-mat-color-outline-decorative ✔ ✔ Containerrand
Typografie (System)
--gmp-mat-font-family ✔ ✔ Basisschriftfamilie für die gesamte Typografie
--gmp-mat-font-display-small ✔ Name
--gmp-mat-font-headline-medium ✔ ✔ Dialogüberschriften
--gmp-mat-font-title-small ✔ Name
--gmp-mat-font-body-medium ✔ Informationen zum Ort, Dialoginhalt
--gmp-mat-font-body-small ✔ Informationen zum Ort
--gmp-mat-font-label-large ✔ ✔ Schaltflächeninhalt
--gmp-mat-font-label-medium ✔ Logoinhalte
Container (Komponente)
border (auf :host) ✔ ✔ Container
border-radius (auf :host) ✔ ✔ Container

Google Maps-Markenattribution

Attribut Kompaktelement für Details Details-Element Nutzung
(black | white | gray) ✔ ✔ Google Maps-Markenbenennung,
Google Maps-Hinweisschaltfläche

Gemäß den Google Maps-Nutzungsbedingungen müssen Sie für die Google Maps-Attribution eine der drei Markenfarben verwenden. Diese Attribution muss sichtbar und zugänglich sein, wenn Anpassungsänderungen vorgenommen wurden. Weitere Informationen finden Sie in den Anforderungen an die Quellenangabe.

Wir bieten drei Markenfarben an, die unabhängig für helle und dunkle Designs festgelegt werden können: 

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