Propriedades do CSS para personalizar o Kit de Interface do Places

Selecione a plataforma: Android iOS JavaScript

O Kit de Interface do Places é compatível com várias configurações e propriedades CSS personalizadas para configurar os elementos de exibição. Use esta tabela de referência de propriedades CSS para ver como elas podem ser aplicadas ao kit de interface.

Use a ferramenta de personalização para conferir como diferentes conjuntos de propriedades afetam a aparência de um elemento do Place Details e acessar o código em HTML/CSS, Kotlin/XML e Swift.

Propriedades CSS mapeadas para os elementos do Kit de Interface do Places

O Kit de Interface do Places oferece uma abordagem de sistema de design para personalização visual baseada no Material Design (com algumas modificações específicas do Google Maps). Consulte a referência do Material Design para Cor e Tipografia. Por padrão, o estilo segue a linguagem de design visual do Google Maps.

Propriedades do CSS

Propriedade Elemento compacto de detalhes Elemento de detalhes Uso
Cor (sistema)
--gmp-mat-color-surface ✔ ✔ Plano de fundo do contêiner e da caixa de diálogo
--gmp-mat-color-on-surface ✔ ✔ Títulos, conteúdo da caixa de diálogo
--gmp-mat-color-on-surface-variant ✔ ✔ Informações sobre o lugar
--gmp-mat-color-primary ✔ ✔ Links, indicador de carregamento, ícones de visão geral
--gmp-mat-color-disabled-surface ✔ Classificação por estrelas não preenchida
--gmp-mat-color-positive ✔ ✔ Colocar o rótulo "Aberto" agora
--gmp-mat-color-positive-container ✔ Selo de carregador de VE disponível
--gmp-mat-color-on-positive-container ✔ Conteúdo do selo de carregador de VE disponível
--gmp-mat-color-negative ✔ ✔ Colocar o rótulo "Fechado" agora
--gmp-mat-color-info ✔ ✔ Ícone de entrada acessível
--gmp-mat-color-secondary-container ✔ ✔ Plano de fundo do botão
--gmp-mat-color-on-secondary-container ✔ ✔ Texto e ícone do botão
--gmp-mat-color-neutral-container ✔ ✔ Ícone de data da avaliação, carregando formas de marcador de posição
--gmp-mat-color-on-neutral-container ✔ ✔ Data da avaliação, erro de carregamento
--gmp-mat-color-outline-decorative ✔ ✔ Borda do contêiner
--gmp-popular-times-bar-color ✔ Barras do histograma de horários de pico para horas não atuais
--gmp-popular-times-bar-current-hour-color ✔ Barra do histograma de horários de pico para a hora atual
--gmp-popular-times-bar-current-hour-live-color ✔ Barra do histograma de horários de pico e texto de status da hora atual quando os dados em tempo real estão disponíveis
Tipografia (sistema)
--gmp-mat-font-family ✔ ✔ Família de fontes base para toda a tipografia
--gmp-mat-font-display-small ✔ Nome do lugar
--gmp-mat-font-headline-medium ✔ ✔ Títulos de caixas de diálogo
--gmp-mat-font-title-small ✔ Nome do lugar
--gmp-mat-font-body-medium ✔ Informações sobre o lugar, conteúdo da caixa de diálogo
--gmp-mat-font-body-small ✔ Informações sobre o lugar
--gmp-mat-font-label-large ✔ ✔ Conteúdo do botão
--gmp-mat-font-label-medium ✔ Conteúdo do selo
Contêiner (componente)
border (em :host) ✔ ✔ Contêiner
border-radius (em :host) ✔ ✔ Contêiner

Esquema de cores padrão

Por padrão, os componentes do Kit de Interface do Places se adaptam automaticamente ao esquema de cores preferido do usuário, detectando se o navegador ou sistema está configurado para o modo claro ou escuro. A aparência do componente será ajustada automaticamente para corresponder à preferência do usuário.

Elementos do Kit de Interface do Places nos modos claro e escuro

Ao aplicar seus próprios estilos personalizados, teste as mudanças nos modos claro e escuro para evitar inconsistências visuais. Se o aplicativo usa um único tema fixo, a mudança automática de tema pode prejudicar a experiência do usuário. Por exemplo, um componente com tema escuro pode aparecer no seu app com tema claro. Para evitar isso, force o componente a sempre renderizar em um tema específico definindo color-scheme no CSS.

Atribuição de marca do Google Maps

Propriedade Elemento compacto de detalhes Elemento de detalhes Uso
(preto | branco | cinza) ✔ ✔ Atribuição de marca do Google Maps,
botão de divulgação do Google Maps

Os Termos de Serviço do Google Maps exigem que você use uma das três cores da marca para a atribuição do Google Maps. Essa atribuição precisa estar visível e acessível quando as mudanças de personalização forem feitas. Para mais informações, consulte os requisitos de atribuição.

Oferecemos três opções de cores de marca que podem ser definidas de forma independente para os temas claro e escuro: 

<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>