Dostosowywanie elementów graficznych pakietu UI do Miejsc

Zestaw interfejsu Places obsługuje różne ustawienia i niestandardowe właściwości CSS, które umożliwiają konfigurowanie elementów wyświetlanych. Skorzystaj z narzędzia do dostosowywania i tabeli referencyjnej właściwości CSS poniżej, aby dowiedzieć się, jak zastosować te właściwości w zestawie UI Kit.

Właściwości CSS przypisane do elementów interfejsu Places UI Kit

Interfejs Places UI Kit oferuje podejście do wizualnego dostosowywania oparte na systemie projektowania, które jest w przybliżeniu oparte na Material Design (z pewnymi modyfikacjami specyficznymi dla Map Google). Więcej informacji znajdziesz w sekcjach Kolor i Typografia w dokumentacji interfejsu Material Design. Domyślnie styl jest zgodny z językiem wizualnym Map Google.

Narzędzie do dostosowywania

Użyj tego narzędzia, aby wizualizować niestandardowe konfiguracje w elemencie interfejsu Places UI Kit.

Właściwości CSS

Właściwość Szczegóły elementu kompaktowego Element szczegółów Wykorzystanie
Kolor (system)
--gmp-mat-color-surface ✔ ✔ Tło kontenera i okna
--gmp-mat-color-on-surface ✔ ✔ Nagłówki, zawartość okien
--gmp-mat-color-on-surface-variant ✔ ✔ Informacje o miejscu
--gmp-mat-color-primary ✔ ✔ Linki, wskaźnik ładowania, ikony przeglądu
--gmp-mat-color-disabled-surface ✔ Niepełna ocena w gwiazdkach
--gmp-mat-color-positive ✔ ✔ Etykieta „Otwarte”
--gmp-mat-color-positive-container ✔ Dostępna ładowarka EV
--gmp-mat-color-on-positive-container ✔ Treści związane z odznaką dostępnej ładowarki EV
--gmp-mat-color-negative ✔ ✔ Etykieta „Zamknięte”
--gmp-mat-color-info ✔ ✔ Ikona wejścia dostępnego dla osób z niepełnosprawnością
--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 daty, wczytywanie kształtów zastępczych
--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 okien
--gmp-mat-font-title-small ✔ Nazwa miejsca
--gmp-mat-font-body-medium ✔ Informacje o miejscu, zawartość 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ść Szczegóły elementu kompaktowego Element szczegółów Wykorzystanie
(czarny | biały | szary) ✔ ✔ Atrybucja marki w Mapach Google,
przycisk ujawniania informacji w Mapach Google

Warunki korzystania z usługi Map Google wymagają użycia jednego z 3 kolorów marki w przypadku atrybucji Map Google. Atrybucja 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 ustawić niezależnie dla 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>