Dostosowywanie elementów graficznych pakietu UI do Miejsc

Zestaw interfejsu użytkownika Miejsca obsługuje różne ustawienia i niestandardowe właściwości CSS, które umożliwiają konfigurowanie elementów wyświetlania. Aby dowiedzieć się, jak te właściwości można stosować w pakiecie interfejsu użytkownika, użyj narzędzia do personalizacji i tabeli referencyjnej właściwości CSS.

Właściwości CSS zmapowane na elementy interfejsu użytkownika zestawu miejsc

Zestaw interfejsu użytkownika Miejsca oferuje system projektowania do dostosowywania wizualnego, który jest w przybliżeniu oparty na projektowaniu materialnym (z pewnymi modyfikacjami dostosowanymi do Map Google). Informacje o kolorach i typografii znajdziesz w dokumentacji Material Design. Domyślnie styl jest zgodny z językiem wizualnym Map Google.

Narzędzie do personalizacji

Użyj tego narzędzia, aby zwizualizować niestandardowe konfiguracje w elemencie interfejsu użytkownika w pakiecie UI miejsc.

Właściwości CSS

Właściwość Element kompaktowy szczegółów Element szczegółów Wykorzystanie
Kolor (system)
--gmp-mat-color-surface ✔ ✔ Tło kontenera i okna
--gmp-mat-color-on-surface ✔ ✔ nagłówki,
--gmp-mat-color-on-surface-variant ✔ ✔ Informacje o miejscu
--gmp-mat-color-primary ✔ ✔ Linki, wskaźnik wczytywania, ikony przeglądu
--gmp-mat-color-disabled-surface ✔ Niewypełniona ocena w gwiazdkach
--gmp-mat-color-positive ✔ ✔ Umieść etykietę „Otwórz teraz”.
--gmp-mat-color-positive-container ✔ Plakietka „Dostępna ładowarka EV”
--gmp-mat-color-on-positive-container ✔ Dostępne treści plakietki ładowarki EV
--gmp-mat-color-negative ✔ ✔ Umieść etykietę „Zamknięte”
--gmp-mat-color-info ✔ ✔ Ikona wejścia dostępnego dla niepełnosprawnych
--gmp-mat-color-secondary-container ✔ ✔ Tło przycisku
--gmp-mat-color-on-secondary-container ✔ ✔ Tekst i ikona przycisku
--gmp-mat-color-neutral-container ✔ ✔ Sprawdzanie plakietki z datą i kształtów ładujących się okienek
--gmp-mat-color-on-neutral-container ✔ ✔ Data weryfikacji, błąd wczytywania
--gmp-mat-color-outline-decorative ✔ ✔ Obramowanie kontenera
Typografia (system)
--gmp-mat-font-family ✔ ✔ Podstawowa rodzina czcionek dla całej typografii
--gmp-mat-font-display-small ✔ Nazwa miejsca
--gmp-mat-font-headline-medium ✔ ✔ nagłówki dialogów,
--gmp-mat-font-title-small ✔ Nazwa miejsca
--gmp-mat-font-body-medium ✔ Informacje o miejscu, treść okna
--gmp-mat-font-body-small ✔ Informacje o miejscu
--gmp-mat-font-label-large ✔ ✔ Treść przycisku
--gmp-mat-font-label-medium ✔ Treść plakietki
Kontener (komponent)
border (na :host) ✔ ✔ Kontener
border-radius (na :host) ✔ ✔ Kontener

Atrybucja marki w Mapach Google

Właściwość Element kompaktowy szczegółów Element szczegółów Wykorzystanie
(czarny | biały | szary) ✔ ✔ informacja o marce Mapy Google,
przycisk informacji o Mapach Google

Warunki korzystania z usługi Mapy Google wymagają użycia jednego z 3 kolorów marki w przypadku informacji o Mapach Google. Ta informacja musi być widoczna i dostępna po wprowadzeniu zmian w dostosowaniu. Więcej informacji znajdziesz w wymaganiach dotyczących atrybucji.

Oferujemy 3 kolory marki, które można niezależnie ustawiać w przypadku motywów jasnych i ciemnych: 

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