Propiedades de CSS para personalizar el kit de IU de Places

Selecciona la plataforma: Android iOS JavaScript

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

Usa la herramienta de personalización para visualizar cómo los diferentes conjuntos de propiedades afectarán la apariencia de un elemento de Place Details y acceder al código en HTML/CSS, Kotlin/XML y Swift.

Propiedades de 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 que se basa, 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 ajusta al lenguaje de diseño visual de Google Maps.

Propiedades de CSS

Propiedad Elemento compacto de detalles Elemento de detalles Uso
Color (sistema)
--gmp-mat-color-surface ✔ ✔ Fondo de contenedor y diálogo
--gmp-mat-color-on-surface ✔ ✔ Encabezados, contenido de diálogos
--gmp-mat-color-on-surface-variant ✔ ✔ Información del lugar
--gmp-mat-color-primary ✔ ✔ Vínculos, indicador de carga, í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 de la insignia de cargador de VE disponible
--gmp-mat-color-negative ✔ ✔ Coloca la etiqueta "Cerrado" ahora
--gmp-mat-color-info ✔ ✔ Ícono de entrada accesible
--gmp-mat-color-secondary-container ✔ ✔ Fondo del botón
--gmp-mat-color-on-secondary-container ✔ ✔ Texto e ícono del botón
--gmp-mat-color-neutral-container ✔ ✔ Insignia de fecha de la opinión, formas de marcador de posición de carga
--gmp-mat-color-on-neutral-container ✔ ✔ Fecha de la opinión, error de carga
--gmp-mat-color-outline-decorative ✔ ✔ Borde del contenedor
--gmp-popular-times-bar-color ✔ Barras del histograma de horarios populares para las horas que no son las actuales
--gmp-popular-times-bar-current-hour-color ✔ Barra del histograma de horarios populares para la hora actual
--gmp-popular-times-bar-current-hour-live-color ✔ Barra del histograma de horarios populares y texto de estado de la hora actual cuando hay datos en tiempo real disponibles
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, 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 del distintivo
Contenedor (componente)
border (en :host) ✔ ✔ Contenedor
border-radius (en :host) ✔ ✔ Contenedor

Esquema de colores predeterminado

De forma predeterminada, los componentes del kit de IU de Places se adaptan automáticamente al esquema de colores preferido del usuario, ya que detectan si el usuario tiene el navegador o el sistema configurado en modo claro o en modo oscuro. La apariencia del componente se ajustará automáticamente para que coincida con la preferencia del usuario.

Elementos del kit de IU de Places en los modos claro y oscuro

Cuando apliques tus propios estilos personalizados, asegúrate de probar los cambios en los modos claro y oscuro para evitar inconsistencias visuales. Si tu aplicación usa un solo tema fijo, el cambio automático de tema puede generar una mala experiencia del usuario. Por ejemplo, un componente con tema oscuro podría aparecer en tu app con tema claro. Para evitarlo, puedes forzar al componente a renderizarse siempre en un tema específico configurando color-scheme en CSS.

Atribución de marca de Google Maps

Propiedad Elemento compacto de detalles Elemento de detalles Uso
(black | white | gray) ✔ ✔ Atribución de la marca de Google Maps,
Botón de divulgación de Google Maps

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

Ofrecemos una selección de tres colores de marca que se pueden configurar de forma independiente para los temas claro y oscuro: 

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