Página Inicial>Relacionado com a programação>Outro código-fonte
Baixar

cartão-mod 3

Permite aplicar estilos CSS a vários elementos da interface do Home Assistant.

Instalando

Instale usando HACS ou consulte este guia.

Melhorias de desempenho

Embora o card-mod possa ser instalado como um recurso lovelace, algumas funcionalidades serão muito beneficiadas se ele for instalado como um módulo frontend.

Para fazer isso, adicione o seguinte ao seu arquivo configuration.yaml e reinicie o Home Assistant: 

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

Você precisará ajustar esse caminho de acordo com onde instalou card-mod.js . Se você instalou através do HACS, provavelmente é /hacsfiles/lovelace-card-mod/card-mod.js .

Quaisquer definições de recursos incluídas automaticamente pelo HACS podem ser mantidas como estão mesmo após a inclusão de extra_module_url .

Início rápido

  • Abra seu cartão no editor GUI
  • Clique no botão "MOSTRAR EDITOR DE CÓDIGO" na parte inferior
  • Adicione o seguinte na parte inferior do código: 
 card_mod :
  style : |
    ha-card {
      color: red;
    }

Você deverá ver o texto do cartão ficar vermelho enquanto você digita.
Você também deverá ver um pequeno ícone de pincel aparecendo próximo ao botão "MOSTRAR EDITOR VISUAL". Isso indica que este cartão possui um código card-mod que não será mostrado no editor visual.

Início rápido

Uso

Cartões de estilo

Os cartões são estilizados adicionando o seguinte à configuração do cartão: 

 card_mod :
  style : <STYLES>

Na forma mais simples, <STYLES> é uma string de CSS que será injetada no elemento <ha-card> do cartão.

NOTA: card-mod só funciona em cartões que contêm um elemento ha-card. Isso inclui quase todos os cartões que podem ser vistos , mas não, por exemplo, conditional , entity_filter , vertical-stack , horizontal-stack , grid .

Observe, porém, que esses cartões geralmente incluem outros cartões, nos quais o card-mod pode funcionar.
Consulte o manual de cada placa para ver como especificar parâmetros para as placas incluídas.

O elemento mais inferior que pode ser estilizado é o <ha-card> .

Captura de tela do elemento ha-card no inspetor Chrome DOM

ha-cartão

DICA: os temas do Home Assistant usam variáveis ​​CSS. Eles podem ser definidos e usados ​​​​no card-mod - precedidos por dois travessões: 

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

Estilizando entidades, emblemas e elementos

Em entities e cartões glance , cada entidade pode ter opções. Esses elementos podem ser estilizados individualmente adicionando um parâmetro card_mod à configuração da entidade.

Para esses casos, os estilos são injetados em shadowRoot e o elemento mais inferior é acessado por meio de :host .

Isso também se aplica à visualização de emblemas e elementos em cartões 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;
        }

Alterando ícones

Com o card-mod instalado, o elemento <ha-icon> - usado, por exemplo, por entities , glance e muitos outros cartões - definirá seu ícone com o valor encontrado na variável CSS --card-mod-icon (se presente).

Ele também definirá a cor do ícone com o valor encontrado na variável CSS --card-mod-icon-color se presente. Isso ignora o estado da entidade, mas ainda diminuirá, a menos que você também defina --card-mod-icon-dim como none . 

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

Modelos

Todos os estilos podem conter modelos jinja2 que serão processados ​​pelo backend do Home Assistant.

card-mod também disponibiliza as seguintes variáveis ​​para modelos:

  • config - Toda a configuração do cartão, entidade ou crachá - ( config.entity pode ser de interesse especial)
  • user - O nome do usuário conectado no momento
  • browser - O browser_id do seu navegador, se você tiver o browser_mod instalado
  • hash - O que vem depois de # na URL atual (Isso só é considerado no primeiro carregamento. Não é atualizado dinamicamente)

Navegação DOM

O Home Assistant faz uso extensivo de algo chamado shadow DOM. Isso permite a reutilização fácil de componentes (como ha-card ou ha-icon ), mas causa alguns problemas ao tentar aplicar estilos CSS às coisas.

Ao explorar os cartões no inspetor de elementos do seu navegador, você pode ter se deparado com uma linha que diz algo como " #shadow-root (open) " (exatamente o que diz depende do seu navegador) e notado que os elementos internos que não herdam o estilos de fora.

Para estilizar elementos dentro de uma shadow-root, você precisará criar seu style: um dicionário em vez de uma string.

Para cada entrada do dicionário a chave será usada para selecionar um ou vários elementos através de uma função querySelector() modificada. O valor da entrada será então injetado nesses elementos.

NOTA: A função querySelector() modificada substituirá um cifrão ( $ ) por uma #shadow-root no seletor.

O processo é recursivo, portanto o valor também pode ser um dicionário. Uma chave de " . " (um ponto final) selecionará o elemento atual.

Exemplo:

Vamos mudar a cor de todos os títulos de terceiro nível ( ### like this ) em um cartão de desconto e também mudar seu plano de fundo.

Se olharmos o cartão no inspetor de elementos do Chrome, ele ficará assim:

markdown-card-dom

O elemento <ha-card> é a base, e a partir daí vemos que precisamos passar por um #shadow-root para chegar ao <h3> . Esse #shadow-root está dentro de um elemento <ha-markdown> , então nosso seletor será: 

 ha-markdown$

que encontrará o primeiro elemento <ha-markdown> e depois todos #shadow-root s dentro dele.

Para adicionar o plano de fundo ao <ha-card> , queremos aplicar os estilos diretamente ao elemento base, que possui a chave 

 .

Isso dá o estilo final: 

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

Navegação DOM

NOTA: A cadeia seletora da fila procurará um elemento por vez separado por espaços ou " $ ".
Para cada etapa, apenas a primeira correspondência será selecionada.
Mas para o seletor final da cadeia (ou seja, em uma determinada chave do dicionário) todos os elementos correspondentes serão selecionados. As cadeias que terminam com $ são um caso especial por conveniência, selecionando as shadowroots de todos os elementos.

Por exemplo, o seguinte irá selecionar os elementos div no primeiro marcador em um cartão de mapa: 

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

Mas o seguinte irá selecionar os elementos div em todos os marcadores de mapa em um cartão de mapa (porque finalizamos a primeira chave no seletor ha-entity-marker $ e iniciamos uma nova pesquisa dentro de cada resultado para div ): 

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

NOTA 2: Seguindo a nota acima; devido ao alto nível de otimização da ordem de carregamento usado no Home Assistant, não é garantido que os elementos ha-entity-marker existam no momento em que o card-mod os procura. Se você quebrar a corrente mais uma vez: 

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

então o card-mod poderá tentar novamente a visualização do ponto ha-map $ posteriormente, o que pode levar a resultados mais estáveis.

Resumidamente; se as coisas parecem estar funcionando de forma intermitente - tente dividir a cadeia em várias etapas.

Dicas de depuração

A navegação no DOM pode ser complicada de acertar nas primeiras vezes, mas você acabará pegando o jeito.

Para ajudá-lo, você pode usar o Element inspector do seu navegador para ver quais etapas o card-mod executa.

  • Abra o inspetor de elementos e encontre o elemento base (por exemplo, <ha-card> ). Deve conter um elemento <card-mod> , independentemente de você ter especificado um estilo ou não.
  • Certifique-se de que o elemento <card-mod> esteja selecionado.
  • Abra o console do navegador (no Chrome você pode pressionar Esc para abrir o console e o inspetor ao mesmo tempo).
  • Digite $0.card_mod_input e pressione Enter.
    Esta é a informação de estilo que foi dada a essa etapa da cadeia. Se for uma string, você está no final da cadeia. Se for um objeto, você pode passar para a próxima etapa.
  • Digite $0.card_mod_children e pressione Enter.
    Este é um conjunto de quaisquer elementos <card-mod> na próxima etapa de qualquer cadeia. Clicar em "card-mod" no value: dos itens definidos o levará ao elemento <card-mod> no inspetor, e você poderá continuar inspecionando o resto da cadeia.
  • Você também pode usar $0.card_mod_parent para encontrar o pai de qualquer elemento <card-mod> em uma cadeia.

Para obter mais informações, você pode usar o seguinte na configuração da placa com a qual está tendo problemas. Isso pode ou não ajudá-lo. 

 card_mod :
  debug : true

Estilizando cartões sem um elemento <ha-card>

Cartões que não possuem um <ha-element> ainda podem ser estilizados usando o cartão custom:mod-card fornecido.

Isto só é necessário em muito poucos casos e provavelmente trará mais problemas do que soluções.

Muito provavelmente o seu cartão contém outro cartão e, nesse caso , é aquele ao qual você deve aplicar os estilos.

Chega de avisos.

Eu sei o que estou fazendo 
 type : custom:mod-card
card :
  type : vertical-stack # for example
  ...
card_mod :
  style : |
    ha-card {
      ...
    }

O mod-card criará um elemento <ha-card> - com fundo e borda removidos - e colocará seu cartão dentro dele.

Mais exemplos

Todos os meus casos de teste estão disponíveis no diretório test/views .

Você pode fazer uma demonstração no docker acessando o diretório test e executando: 

 docker-compose up

Em seguida, acesse http://localhost:8125 e faça login com nome de usuário dev e senha dev .

Ou você pode usar o vscode devcontainer e executar a tarefa " Run hass ".

Temas

Para obter instruções sobre como desenvolver um tema card-mod, consulte README-themes.md.

Desenvolvimento

Para adicionar poderes de estilo de mods de cartão ao seu cartão personalizado, consulte README-developers.md.

Expandir
Informações adicionais
Aplicativos Relacionados
Recomendado para você
Informações Relacionadas Todos