Das Places UI Kit unterstützt eine Vielzahl von Einstellungen und benutzerdefinierten CSS-Eigenschaften, mit denen Sie die Anzeigeelemente konfigurieren können. In dieser Referenztabelle für CSS-Eigenschaften sehen Sie, wie diese Eigenschaften auf das UI-Kit angewendet werden können.
Mit dem Anpassungstool können Sie sich ansehen, wie sich verschiedene Gruppen von Eigenschaften auf das Erscheinungsbild eines Place Details-Elements auswirken, und auf den Code in HTML/CSS, Kotlin/XML und Swift zugreifen.
Das Places UI Kit bietet einen Designsystem-Ansatz für die visuelle Anpassung, der grob auf Material Design basiert (mit einigen Google Maps-spezifischen Änderungen). Weitere Informationen finden Sie in der Material Design-Referenz für Farbe und Typografie. Standardmäßig entspricht der Stil der visuellen Designsprache von Google Maps.
CSS-Eigenschaften
| Attribut | Kompaktes Element „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, Übersichtssymbole |
--gmp-mat-color-disabled-surface |
✔ | Nicht ausgefüllte Sternebewertung | |
--gmp-mat-color-positive |
✔ | ✔ | Label „Jetzt geöffnet“ platzieren |
--gmp-mat-color-positive-container |
✔ | Badge für verfügbare Ladestationen für Elektrofahrzeuge | |
--gmp-mat-color-on-positive-container |
✔ | Verfügbare Inhalte für das Badge „Ladestation für Elektrofahrzeuge“ | |
--gmp-mat-color-negative |
✔ | ✔ | Label „Jetzt geschlossen“ platzieren |
--gmp-mat-color-info |
✔ | ✔ | Symbol für barrierefreien Eingang |
--gmp-mat-color-secondary-container |
✔ | ✔ | Schaltflächenhintergrund |
--gmp-mat-color-on-secondary-container |
✔ | ✔ | Buttontext und ‑symbol |
--gmp-mat-color-neutral-container |
✔ | ✔ | Überprüfungsdatum, Platzhalterformen werden geladen |
--gmp-mat-color-on-neutral-container |
✔ | ✔ | Überprüfungsdatum, Fehler beim Laden |
--gmp-mat-color-outline-decorative |
✔ | ✔ | Containerrahmen |
--gmp-popular-times-bar-color |
✔ | Balken im Histogramm für Stoßzeiten für nicht aktuelle Stunden | |
--gmp-popular-times-bar-current-hour-color |
✔ | Histogrammbalken für die aktuelle Stunde im Diagramm „Stoßzeiten“ | |
--gmp-popular-times-bar-current-hour-live-color |
✔ | Balken im Histogramm für Stoßzeiten und Statustext für die aktuelle Stunde, wenn Live-Daten verfügbar sind | |
| Typografie (System) | |||
--gmp-mat-font-family |
✔ | ✔ | Basisschriftfamilie für alle 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 |
✔ | ✔ | Buttoninhalt |
--gmp-mat-font-label-medium |
✔ | Badge-Inhalt | |
| Container (Komponente) | |||
border (auf :host) |
✔ | ✔ | Container |
border-radius (auf :host) |
✔ | ✔ | Container |
Standardfarbschema
Standardmäßig passen sich die Komponenten des Places UI Kit automatisch an das bevorzugte Farbschema des Nutzers an. Dabei wird erkannt, ob der Browser oder das System des Nutzers auf den hellen oder dunklen Modus eingestellt ist. Das Erscheinungsbild der Komponente wird automatisch an die Einstellungen des Nutzers angepasst.
Wenn Sie eigene benutzerdefinierte Stile anwenden, sollten Sie Ihre Änderungen sowohl im hellen als auch im dunklen Modus testen, um visuelle Inkonsistenzen zu vermeiden. Wenn Ihre Anwendung ein einzelnes, festes Design verwendet, kann der automatische Designwechsel zu einer schlechten Nutzererfahrung führen. Beispielsweise kann eine Komponente mit dunklem Design in einer App mit hellem Design angezeigt werden. Um dies zu verhindern, können Sie erzwingen, dass die Komponente immer in einem bestimmten Design gerendert wird. Legen Sie dazu color-scheme in CSS fest.
Google Maps-Markenattribution
| Attribut | Kompaktes Element „Details“ | Details-Element | Nutzung |
|---|---|---|---|
| (black | white | gray) | ✔ | ✔ | Google Maps-Markenattribution, Google Maps-Offenlegungsschaltfläche |
Gemäß den Nutzungsbedingungen von Google Maps müssen Sie für die Google Maps-Quellenangabe eine von drei Markenfarben verwenden. Diese Quellenangabe muss sichtbar und zugänglich sein, wenn Anpassungen vorgenommen wurden. Weitere Informationen finden Sie in den Anforderungen an die Quellenangabe.
Wir bieten drei Markenfarben an, die unabhängig voneinander für helle und dunkle Designs festgelegt werden können:
- Helles Design:
PlaceAttributionElement.lightSchemeColormit Attributen für Weiß, Grau und Schwarz. - Dunkles Design:
PlaceAttributionElement.darkSchemeColormit Attributen für Weiß, Grau und Schwarz.
<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>