Inicio>Relacionado con la programación>Otro código fuente
Descargar

tarjeta-mod 3

Le permite aplicar estilos CSS a varios elementos de la interfaz de Home Assistant.

Instalación

Instale usando HACS o consulte esta guía.

Mejoras de rendimiento

Si bien card-mod se puede instalar como un recurso lovelace, algunas funciones se beneficiarán enormemente si se instala como un módulo de interfaz.

Para hacer eso, agregue lo siguiente a su archivo configuration.yaml y reinicie Home Assistant: 

 frontend :
  extra_module_url :
    - /local/card-mod.js

Deberá ajustar esa ruta según dónde haya instalado card-mod.js . Si lo instaló a través de HACS, probablemente sea /hacsfiles/lovelace-card-mod/card-mod.js .

Cualquier definición de recurso agregada automáticamente por HACS se puede mantener tal como está incluso después de agregar extra_module_url .

Inicio rápido

  • Abra su tarjeta en el editor GUI
  • Haga clic en el botón "MOSTRAR EDITOR DE CÓDIGOS" en la parte inferior
  • Agregue lo siguiente al final del código: 
 card_mod :
  style : |
    ha-card {
      color: red;
    }

Deberías ver que el texto de la tarjeta se vuelve rojo a medida que escribes.
También deberías ver un pequeño ícono de pincel apareciendo cerca del botón "MOSTRAR EDITOR VISUAL". Esto indica que esta tarjeta tiene un código de modificación de tarjeta que no se mostrará en el editor visual.

Inicio rápido

Uso

Tarjetas de estilo

Las tarjetas se diseñan agregando lo siguiente a la configuración de la tarjeta: 

 card_mod :
  style : <STYLES>

Si es la forma más simple, <STYLES> es una cadena de CSS que se inyectará en el elemento <ha-card> de la tarjeta.

NOTA: card-mod solo funciona en tarjetas que contienen un elemento ha-card. Esto incluye casi todas las tarjetas que se pueden ver , pero no, por ejemplo, conditional , entity_filter , vertical-stack , horizontal-stack , grid .

Sin embargo, tenga en cuenta que esas tarjetas a menudo incluyen otras tarjetas en las que puede funcionar el mod de tarjeta.
Consulte el manual de cada tarjeta para ver cómo especificar los parámetros de las tarjetas incluidas.

El elemento más inferior al que se le puede aplicar estilo es <ha-card> .

Captura de pantalla del elemento ha-card en el inspector DOM de Chrome

ha-tarjeta

SUGERENCIA: Los temas de Home Assistant utilizan variables CSS. Estos pueden configurarse y usarse en card-mod, precedidos por dos guiones: 

 card_mod :
  style : |
    ha-card {
      --ha-card-background: teal;
      color: var(--primary-color);
    }

Diseñar entidades, insignias y elementos

En entities y tarjetas glance , cada entidad puede tener opciones. A esos elementos se les puede aplicar estilo individualmente agregando un parámetro card_mod a la configuración de la entidad.

Para esos casos, los estilos se inyectan en un shadowRoot y, por lo tanto, se accede al elemento inferior a través de :host .

Esto también se aplica a las insignias de visualización y a los elementos de las tarjetas picture-elements . 

 type : entities
entities :
  - entity : light.bed_light
    card_mod :
      style : |
        :host {
          color: red;
          }
  - entity : light.ceiling_lights
    card_mod :
      style : |
        :host {
          color: green;
        }
  - entity : light.kitchen_lights
    card_mod :
      style : |
        :host {
          color: blue;
        }

Cambiar iconos

Con card-mod instalado, el elemento <ha-icon> (utilizado, por ejemplo, por entities , glance y muchas más tarjetas) establecerá su icono en el valor que se encuentra en la variable CSS --card-mod-icon (si está presente).

También establecerá el color del icono al valor que se encuentra en la variable CSS --card-mod-icon-color si está presente. Esto ignora el estado de la entidad, pero aún se atenuará a menos que también establezca --card-mod-icon-dim en none . 

- entity : light.bed_light
  card_mod :
    style : |
      :host {
        --card-mod-icon: mdi:bed;
      }

Plantillas

Todos los estilos pueden contener plantillas jinja2 que serán procesadas por el backend de Home Assistant.

card-mod también pone a disposición las siguientes variables para las plantillas:

  • config - Toda la configuración de la tarjeta, entidad o distintivo - ( config.entity puede ser de especial interés)
  • user : el nombre del usuario que ha iniciado sesión actualmente
  • browser : el browser_id de su navegador, si tiene browser_mod instalado
  • hash : lo que viene después de # en la URL actual (esto solo se considera en la primera carga. No se actualiza dinámicamente)

navegación DOM

Home Assistant hace un uso extensivo de algo llamado DOM en la sombra. Esto permite una fácil reutilización de componentes (como ha-card o ha-icon ), pero causa algunos problemas al intentar aplicar estilos CSS a las cosas.

Al explorar las tarjetas en el inspector de elementos de su navegador, es posible que haya encontrado una línea que dice algo como " #shadow-root (open) " (exactamente lo que dice depende de su navegador) y haya notado que los elementos dentro que no heredan el Estilos desde fuera.

Para aplicar estilo a elementos dentro de una raíz de sombra, necesitará crear su style: un diccionario en lugar de una cadena.

Para cada entrada del diccionario, la clave se utilizará para seleccionar uno o varios elementos mediante una función querySelector() modificada. Luego, el valor de la entrada se inyectará en esos elementos.

NOTA: La función querySelector() modificada reemplazará un signo de dólar ( $ ) con #shadow-root en el selector.

El proceso es recursivo, por lo que el valor también puede ser un diccionario. Una tecla de " . " (un punto) seleccionará el elemento actual.

Ejemplo:

Cambiemos el color de todos los títulos de tercer nivel ( ### like this ) en una tarjeta de rebajas y también cambiemos su fondo.

Si miramos la tarjeta en el inspector de elementos de Chrome, se ve así:

tarjeta-de-rebaja-dom

El elemento <ha-card> es la base, y desde allí vemos que necesitamos pasar por un #shadow-root para llegar al <h3> . Ese #shadow-root está dentro de un elemento <ha-markdown> , por lo que nuestro selector será: 

 ha-markdown$

que encontrará el primer elemento <ha-markdown> y luego todos #shadow-root dentro de él.

Para agregar el fondo al <ha-card> , queremos aplicar los estilos al elemento base directamente, que tiene la clave 

 .

Esto le da el estilo final: 

 card_mod :
  style :
    ha-markdown$ : |
      h3 {
        color: purple;
      }
    . : |
      ha-card {
        background: teal;
      }

Navegación DOM

NOTA: La cadena selectora de la cola buscará un elemento a la vez separado por espacios o " $ ".
Para cada paso, solo se seleccionará la primera coincidencia.
Pero para el selector final de la cadena (es decir, en una clave de diccionario determinada), se seleccionarán todos los elementos coincidentes. Las cadenas que terminan en $ son un caso especial por conveniencia, seleccionando las raíces de sombra de todos los elementos.

Por ejemplo, lo siguiente seleccionará los elementos div en el primer marcador de una tarjeta de mapa: 

 "ha-map $ ha-entity-marker $ div" : |

Pero lo siguiente seleccionará los elementos div en todos los marcadores de mapa en una tarjeta de mapa (porque finalizamos la primera clave en el selector ha-entity-marker $ y comenzamos una nueva búsqueda dentro de cada resultado para div ): 

 " ha-map $ ha-entity-marker $ " :
  "div" : |

NOTA 2: Siguiendo la nota anterior; Debido al alto nivel de optimización del orden de carga utilizado en Home Assistant, no se garantiza que los elementos ha-entity-marker existan en el momento en que card-mod los busca. Si rompes la cadena una vez más: 

 " ha-map $ " :
  " ha-entity-marker $ " :
    "div" : |

entonces card-mod podrá volver a intentar buscar desde el punto ha-map $ más adelante, lo que puede conducir a resultados más estables.

En breve; Si todo parece funcionar de forma intermitente, intente dividir la cadena en varios pasos.

Consejos de depuración

La navegación DOM puede ser difícil de lograr las primeras veces, pero eventualmente la dominarás.

Para ayudarle, puede utilizar el inspector de elementos de su navegador para ver qué pasos sigue card-mod.

  • Abra el inspector de elementos y busque el elemento base (por ejemplo, <ha-card> ). Esto debe contener un elemento <card-mod> ya sea que haya especificado un estilo o no.
  • Asegúrese de que el elemento <card-mod> esté seleccionado.
  • Abra la consola del navegador (en Chrome puede presionar Esc para abrir la consola y el inspector al mismo tiempo).
  • Escribe $0.card_mod_input y presiona enter.
    Esta es la información de estilo que se proporcionó en ese paso de la cadena. Si se trata de una cadena, estás al final de la cadena. Si es un objeto, puedes pasar al siguiente paso.
  • Escribe $0.card_mod_children y presiona enter.
    Este es un conjunto de elementos <card-mod> en el siguiente paso de cualquier cadena. Al hacer clic en "card-mod" en el value: de los elementos establecidos, accederá a ese elemento <card-mod> en el inspector y podrá seguir inspeccionando el resto de la cadena.
  • También puedes usar $0.card_mod_parent para encontrar el padre de cualquier elemento <card-mod> en una cadena.

Para obtener un poco más de información, puedes utilizar lo siguiente en la configuración de la tarjeta con la que tienes problemas. Puede que te ayude o no. 

 card_mod :
  debug : true

Diseñar tarjetas sin un elemento <ha-card>

Las tarjetas que no tienen un <ha-element> aún se pueden diseñar usando la tarjeta custom:mod-card suministrada.

Esto sólo es necesario en muy pocos casos y probablemente traerá más problemas de los que resuelve.

Lo más probable es que su tarjeta contenga otra tarjeta, en cuyo caso debe aplicar los estilos a esa tarjeta.

Basta de advertencias.

se lo que estoy haciendo 
 type : custom:mod-card
card :
  type : vertical-stack # for example
  ...
card_mod :
  style : |
    ha-card {
      ...
    }

La tarjeta mod creará un elemento <ha-card> (sin fondo y borde) y colocará su tarjeta dentro de él.

Más ejemplos

Todos mis casos de prueba están disponibles en el directorio test/views .

Puede realizar una demostración en la ventana acoplable yendo al directorio test y ejecutando: 

 docker-compose up

Luego vaya a http://localhost:8125 e inicie sesión con el nombre de usuario dev y la contraseña dev .

O puede usar el contenedor de desarrollo vscode y ejecutar la tarea " Run hass ".

Temas

Para obtener instrucciones sobre cómo desarrollar un tema de modificación de tarjetas, consulte README-themes.md.

Desarrollo

Para agregar poderes de estilo de mods de tarjeta a su tarjeta personalizada, consulte README-developers.md.

Expandir
Información adicional
Aplicaciones relacionadas
Recomendado para ti
Información relacionada Todo