Interfejs Places UI Kit obsługuje różne ustawienia i niestandardowe właściwości CSS do konfigurowania elementów wyświetlania. Skorzystaj z tej tabeli referencyjnej właściwości CSS, aby zobaczyć, jak można je zastosować do UI Kit.
Użyj narzędzia do dostosowywania, aby zobaczyć, jak różne zestawy właściwości wpłyną na wygląd elementu informacji o miejscu, i uzyskać dostęp do kodu w językach HTML/CSS, Kotlin/XML i Swift.
Interfejs Places UI Kit oferuje podejście do dostosowywania wizualnego oparte na systemie projektowania, które jest w dużej mierze oparte na Material Design (z pewnymi modyfikacjami specyficznymi dla Map Google). Zapoznaj się z dokumentacją Material Design dotyczącą kolorów i typografii. Domyślnie styl jest zgodny z językiem projektowania wizualnego Map Google.
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, treść okna |
--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 |
✔ | Ocena w gwiazdkach (niewypełniona) | |
--gmp-mat-color-positive |
✔ | ✔ | Etykieta „Otwarte” miejsca |
--gmp-mat-color-positive-container |
✔ | Plakietka dostępnej ładowarki EV | |
--gmp-mat-color-on-positive-container |
✔ | Treść plakietki 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 |
✔ | ✔ | Plakietka z datą opinii, wczytywanie kształtów obiektów zastępczych |
--gmp-mat-color-on-neutral-container |
✔ | ✔ | Data opinii, błąd wczytywania |
--gmp-mat-color-outline-decorative |
✔ | ✔ | Obramowanie kontenera |
--gmp-popular-times-bar-color |
✔ | Słupki histogramu popularnych godzin dla godzin innych niż bieżąca | |
--gmp-popular-times-bar-current-hour-color |
✔ | Słupek histogramu popularnych godzin dla bieżącej godziny | |
--gmp-popular-times-bar-current-hour-live-color |
✔ | Słupek histogramu popularnych godzin i tekst stanu dla bieżącej godziny, gdy dostępne są dane bieżące | |
| 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, 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 hoście) |
✔ | ✔ | Kontener |
Domyślny schemat kolorów
Domyślnie komponenty Places UI Kit automatycznie dostosowują się do preferowanego przez użytkownika schematu kolorów, wykrywając, czy użytkownik ma ustawiony tryb jasny czy ciemny w przeglądarce lub systemie. Wygląd komponentu automatycznie dostosuje się do preferencji użytkownika.
Podczas stosowania własnych stylów niestandardowych przetestuj zmiany zarówno w trybie jasnym, jak i ciemnym, aby uniknąć niespójności wizualnych. Jeśli aplikacja używa jednego, stałego motywu, automatyczne przełączanie motywów może pogorszyć wrażenia użytkownika. Na przykład w aplikacji z jasnym motywem może pojawić się komponent z ciemnym motywem. Aby temu zapobiec, możesz wymusić, aby komponent zawsze renderował się w określonym motywie, ustawiając color-scheme w CSS.
Atrybucja marki w Mapach Google
| Właściwość | Element kompaktowy szczegółów | Element szczegółów | Wykorzystanie |
|---|---|---|---|
| (black | white | gray) | ✔ | ✔ | Atrybucja marki Map Google, Przycisk ujawniania Map Google |
Warunki korzystania z usługi Mapy 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 podawania źródła.
Oferujemy 3 kolory marki, które można ustawić niezależnie dla jasnego i ciemnego motywu:
- Jasny motyw:
PlaceAttributionElement.lightSchemeColorz atrybutami bieli, szarości i czerni. - Ciemny motyw:
PlaceAttributionElement.darkSchemeColorz atrybutami dla bieli, szarości i czerni.
<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>