Главная страница>Связанные с программированием>Другой исходный код
Скачать

карточный мод 3

Позволяет применять стили CSS к различным элементам интерфейса Home Assistant.

Установка

Установите с помощью HACS или просмотрите это руководство.

Улучшения производительности

Хотя card-mod можно установить как дополнительный ресурс, некоторые функции значительно выиграют от его установки в качестве внешнего модуля.

Для этого добавьте следующее в файл configuration.yaml и перезапустите Home Assistant: 

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

Вам нужно будет настроить этот путь в зависимости от того, где вы установили card-mod.js . Если вы установили через HACS, это, вероятно, /hacsfiles/lovelace-card-mod/card-mod.js .

Любые определения ресурсов, автоматически добавленные HACS, можно сохранить как есть даже после добавления extra_module_url .

Быстрый старт

  • Откройте свою карту в редакторе графического интерфейса.
  • Нажмите кнопку «ПОКАЗАТЬ РЕДАКТОР КОДА» внизу.
  • Добавьте следующее в конец кода: 
 card_mod :
  style : |
    ha-card {
      color: red;
    }

По мере ввода текст карточки должен становиться красным.
Вы также должны увидеть небольшой значок кисти рядом с кнопкой «ПОКАЗАТЬ ВИЗУАЛЬНЫЙ РЕДАКТОР». Это означает, что у этой карты есть код мода карты, который не будет отображаться в визуальном редакторе.

Быстрый старт

Использование

Стилизация карточек

Для оформления карточек в конфигурацию карты добавляются следующие элементы: 

 card_mod :
  style : <STYLES>

В простейшей форме <STYLES> представляет собой строку CSS, которая будет вставлена ​​в элемент <ha-card> карточки.

ПРИМЕЧАНИЕ. card-mod работает только с картами, содержащими элемент ha-card. Сюда входят почти все карты, которые можно увидеть , но не, например, conditional , entity_filter , vertical-stack , horizontal-stack , grid .

Однако обратите внимание, что эти карты часто включают в себя другие карты, с которыми может работать карточный мод.
См. руководство для каждой карты, чтобы узнать, как указать параметры для включенных карт.

Самый нижний элемент, которому можно стилизовать, — это <ha-card> .

Скриншот элемента ha-card в инспекторе Chrome DOM

га-карта

СОВЕТ: В темах Home Assistant используются переменные CSS. Их можно как установить, так и использовать в карточном моде, предваряя их двумя тире: 

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

Стилизация объектов, значков и элементов

В entities и карточках glance каждая сущность может иметь варианты. Этим элементам можно задать индивидуальный стиль, добавив параметр card_mod в конфигурацию объекта.

В этих случаях стили вводятся в ShadowRoot, и доступ к самому нижнему элементу осуществляется через :host .

Это также относится к просмотру значков и элементов на карточках 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;
        }

Изменение значков

При установленном card-mod элемент <ha-icon> , используемый, например, entities , glance и многими другими картами, установит для своего значка значение, найденное в переменной CSS --card-mod-icon (если она присутствует).

Он также установит цвет значка в значение, указанное в переменной CSS --card-mod-icon-color если она присутствует. Это игнорирует состояние объекта, но все равно будет затемнено, если вы также не установите --card-mod-icon-dim значение none . 

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

Шаблоны

Все стили могут содержать шаблоны jinja2, которые будут обрабатываться серверной частью Home Assistant.

card-mod также делает доступными для шаблонов следующие переменные:

  • config — вся конфигурация карты, объекта или бейджа — ( config.entity может представлять особый интерес)
  • user — имя пользователя, вошедшего в систему в данный момент.
  • browser — browser_id вашего браузера, если у вас установлен браузер_мод.
  • hash — все, что идет после # в текущем URL-адресе (это учитывается только при первой загрузке. Оно не обновляется динамически)

DOM-навигация

Home Assistant широко использует так называемый теневой DOM. Это позволяет легко повторно использовать компоненты (такие как ha-card или ha-icon ), но вызывает некоторые проблемы при попытке применить стили CSS к вещам.

Изучая карточки в инспекторе элементов вашего браузера, вы, возможно, наткнулись на строку, содержащую что-то вроде « #shadow-root (open) » (именно то, что она говорит, зависит от вашего браузера) и заметили, что элементы внутри, которые не наследуют стили извне.

Чтобы стилизовать элементы внутри теневого корня, вам нужно будет создать свой style: словарь, а не строку.

Для каждой словарной записи ключ будет использоваться для выбора одного или нескольких элементов с помощью модифицированной функции querySelector() . Значение записи затем будет введено в эти элементы.

ПРИМЕЧАНИЕ. Модифицированная функция querySelector() заменит знак доллара ( $ ) на #shadow-root в селекторе.

Процесс рекурсивный, поэтому значение также может быть словарем. Клавиша « . » (точка) выберет текущий элемент.

Пример:

Давайте изменим цвет всех заголовков третьего уровня ( ### like this ) на карточке уценки, а также изменим ее фон.

Если мы посмотрим на карточку в инспекторе элементов Chrome, она будет выглядеть так:

уценка-карточка-дом

Элемент <ha-card> является базовым, и отсюда мы видим, что нам нужно пройти через один #shadow-root чтобы добраться до <h3> . Этот #shadow-root находится внутри элемента <ha-markdown> , поэтому наш селектор будет таким: 

 ha-markdown$

который найдет первый элемент <ha-markdown> , а затем все #shadow-root внутри него.

Чтобы добавить фон к <ha-card> , мы хотим применить стили непосредственно к базовому элементу, который имеет ключ 

 .

Это дает окончательный стиль: 

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

DOM-навигация

ПРИМЕЧАНИЕ. Цепочка селектора очереди будет искать по одному элементу, разделенному пробелами или « $ ».
Для каждого шага будет выбрано только первое совпадение.
Но для окончательного селектора цепочки (т.е. по заданному ключу словаря) будут выбраны все совпадающие элементы. Цепочки, оканчивающиеся на $ представляют собой особый случай для удобства выбора теневых корней всех элементов.

Например, следующее выберет элементы div в первом маркере на карте карты: 

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

Но следующий код выберет элементы div во всех маркерах карты на карте (поскольку мы завершаем первый ключ в селекторе ha-entity-marker $ и начинаем новый поиск в каждом результате для div ): 

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

ПРИМЕЧАНИЕ 2. В соответствии с примечанием выше; из-за высокого уровня оптимизации порядка загрузки, используемого в Home Assistant, не гарантируется, что элементы ha-entity-marker существуют в тот момент, когда card-mod ищет их. Если разорвать цепочку еще раз: 

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

тогда card-mod сможет повторить поиск из точки ha-map $ позже, что может привести к более стабильным результатам.

Суммируя; если кажется, что что-то работает с перебоями – попробуйте разбить цепочку на несколько этапов.

Советы по отладке

Первые несколько раз разобраться с навигацией по DOM может быть непросто, но со временем вы освоитесь.

Чтобы помочь вам, вы можете использовать инспектор элементов вашего браузера, чтобы увидеть, какие шаги выполняет card-mod.

  • Откройте инспектор элементов и найдите базовый элемент (например, <ha-card> ). Он должен содержать элемент <card-mod> независимо от того, указали ли вы стиль или нет.
  • Убедитесь, что выбран элемент <card-mod> .
  • Откройте консоль браузера (в Chrome вы можете нажать Esc, чтобы одновременно открыть консоль и инспектор).
  • Введите $0.card_mod_input и нажмите Enter.
    Это информация о стиле, указанная на шаге цепочки. Если это строка, вы находитесь в конце цепочки. Если это объект, вы можете перейти к следующему шагу.
  • Введите $0.card_mod_children и нажмите Enter.
    Это набор любых элементов <card-mod> на следующем этапе любой цепочки. Нажав «card-mod» в value: набора элементов, вы перейдете к этому элементу <card-mod> в инспекторе, и вы сможете продолжить проверку остальной части цепочки.
  • Вы также можете использовать $0.card_mod_parent , чтобы найти родителя любого элемента <card-mod> в цепочке.

Для получения дополнительной информации вы можете использовать следующее в конфигурации карты, с которой у вас возникли проблемы. Это может вам помочь, а может и не помочь. 

 card_mod :
  debug : true

Стилизация карточек без элемента <ha-card>

Карты, у которых нет <ha-element> , все равно можно стилизовать с помощью прилагаемой карты custom:mod-card .

Это необходимо лишь в очень немногих случаях и, скорее всего, создаст больше проблем, чем решит.

Скорее всего, ваша карточка содержит другую карточку, и в этом случае вам следует применить стили именно к ней.

Хватит предупреждений.

Я знаю, что делаю 
 type : custom:mod-card
card :
  type : vertical-stack # for example
  ...
card_mod :
  style : |
    ha-card {
      ...
    }

Мод-карта создаст элемент <ha-card> — с удаленным фоном и рамкой — и поместит в него вашу карту.

Больше примеров

Все мои тестовые примеры доступны в каталоге test/views .

Вы можете просмотреть демо-версию в Docker, перейдя в test каталог и выполнив: 

 docker-compose up

Затем перейдите по адресу http://localhost:8125 и войдите в систему с именем пользователя dev и паролем dev .

Или вы можете использовать контейнер разработчика vscode и запустить задачу « Run hass ».

Темы

Инструкции по разработке темы карточного мода см. в README-themes.md.

Разработка

Чтобы добавить возможности оформления карточных модов к вашей пользовательской карте, см. README-developers.md.

Расширять
Дополнительная информация
Связанные приложения
Рекомендуем вам
Связанные новости Все