Diseño personalizado del kit de IU de Places

El kit de IU de Places admite una variedad de parámetros de configuración y propiedades CSS personalizadas para configurar los elementos de visualización. Usa la herramienta de personalización y la tabla de referencia de propiedades CSS que aparece a continuación para ver cómo se pueden aplicar estas propiedades al kit de IU.

Propiedades CSS asignadas a los elementos del kit de IU de Places

El kit de IU de Places ofrece un enfoque de sistema de diseño para la personalización visual basado, en términos generales, en Material Design (con algunas modificaciones específicas de Google Maps). Consulta la referencia de Material Design para Color y Tipografía. De forma predeterminada, el estilo se adhiere al lenguaje de diseño visual de Google Maps.

Herramienta de personalización

Usa esta herramienta para visualizar configuraciones personalizadas en un elemento del kit de IU de Places.

Propiedades de CSS

Propiedad Elemento compacto de detalles Elemento de detalles Uso
Color (sistema)
--gmp-mat-color-surface ✔ ✔ Fondo del contenedor y del diálogo
--gmp-mat-color-on-surface ✔ ✔ Encabezados y contenido del diálogo
--gmp-mat-color-on-surface-variant ✔ ✔ Información del lugar
--gmp-mat-color-primary ✔ ✔ Vínculos, indicadores de carga y íconos de descripción general
--gmp-mat-color-disabled-surface ✔ Calificación por estrellas sin completar
--gmp-mat-color-positive ✔ ✔ Coloca la etiqueta "Abierto ahora"
--gmp-mat-color-positive-container ✔ Insignia de cargador de VE disponible
--gmp-mat-color-on-positive-container ✔ Contenido disponible de la insignia de cargador de VE
--gmp-mat-color-negative ✔ ✔ Ahora se etiqueta el lugar como "Cerrado"
--gmp-mat-color-info ✔ ✔ Ícono de entrada accesible
--gmp-mat-color-secondary-container ✔ ✔ Fondo del botón
--gmp-mat-color-on-secondary-container ✔ ✔ Texto y ícono del botón
--gmp-mat-color-neutral-container ✔ ✔ Insignia de fecha de revisión y formas de marcador de posición de carga
--gmp-mat-color-on-neutral-container ✔ ✔ Fecha de revisión, error de carga
--gmp-mat-color-outline-decorative ✔ ✔ Borde del contenedor
Tipografía (sistema)
--gmp-mat-font-family ✔ ✔ Familia de fuentes base para toda la tipografía
--gmp-mat-font-display-small ✔ Nombre del lugar
--gmp-mat-font-headline-medium ✔ ✔ Encabezados de diálogo
--gmp-mat-font-title-small ✔ Nombre del lugar
--gmp-mat-font-body-medium ✔ Información del lugar y contenido del diálogo
--gmp-mat-font-body-small ✔ Información del lugar
--gmp-mat-font-label-large ✔ ✔ Contenido del botón
--gmp-mat-font-label-medium ✔ Contenido de la insignia
Contenedor (componente)
border (en :host) ✔ ✔ Contenedor
border-radius (en :host) ✔ ✔ Contenedor

Atribución de la marca de Google Maps

Propiedad Elemento compacto de detalles Elemento de detalles Uso
(negro | blanco | gris) ✔ ✔ Atribución de la marca de Google Maps,
Botón de divulgación de Google Maps

Las Condiciones del Servicio de Google Maps requieren que uses uno de los tres colores de marca para la atribución de Google Maps. Esta atribución debe ser visible y accesible cuando se realicen cambios de personalización. Consulta los requisitos de atribución para obtener más información.

Ofrecemos tres colores de marca que se pueden configurar de forma independiente para los temas claros y oscuros: 

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