🎴 Universal Card

Продвинутая Lovelace-карточка для Home Assistant
7 body modes • Grid layout • Header layouts • Badges • Footer • Lazy loading • Visual editor

---

Что это

Universal Card это гибкая карточка для Home Assistant, которая умеет быть:

• обычной expandable карточкой
• modal или fullscreen overlay
• tabs-контейнером
• carousel-контейнером
• subview launcher
• компактной header-only карточкой

В карточке есть:

• grid layout с colspan и rowspan
• header presets и badges
• footer с действиями
• visibility и section visibility
• root actions и swipe gestures
• themes, theme_tokens, state_styles, custom_css
• встроенный visual editor

Документация

Основные страницы:

• Feature Map
• Configuration
• Examples Gallery
• YAML Block Reference
• Field Matrix
• Grid Layout
• Footer
• Visibility
• Actions And Gestures
• Recipes by Use Case
• Modal Layout
• Body Modes Layout
• Header Layout
• Badges
• Theming Guide
• Loading Strategy
• Editor
• Release Notes

GitHub Pages:

• https://mesteriis.github.io/universal-card/

---

Установка

HACS

1. Откройте HACS → Frontend
2. Нажмите + и найдите Universal Card
3. Установите карточку
4. Дополнительные lazy-бандлы подхватятся автоматически из HACS-каталога установки
5. Обновите страницу Home Assistant

Ручная установка

1. Скачайте последний релиз из GitHub Releases
2. Скопируйте universal-card.js и папку lazy/ в /config/www/universal-card/
3. Добавьте resource в Lovelace:

url: /local/universal-card/universal-card.js
type: module

4. Обновите страницу Home Assistant

---

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

Минимальная карточка

type: custom:universal-card
title: Example
body:
  cards:
    - type: markdown
      content: Hello

Базовая expandable карточка

type: custom:universal-card
title: Living Room
subtitle: Lights and comfort
icon: mdi:sofa
entity: input_boolean.kitchen_light
theme: glass
body:
  cards:
    - type: entities
      entities:
        - entity: input_boolean.kitchen_light
        - entity: sensor.demo_temperature
        - entity: sensor.demo_humidity

Modal карточка

type: custom:universal-card
title: Security Controls
body_mode: modal
icon: mdi:shield-home
modal:
  width: auto
  max_width: 72rem
  max_height: 85vh
  loading_strategy: lazy
body:
  cards:
    - type: entities
      entities:
        - entity: input_boolean.security_armed
        - entity: sensor.security_status

Tabs карточка

type: custom:universal-card
title: Climate Tabs
body_mode: tabs
tabs:
  - label: Climate
    icon: mdi:home-thermometer
    cards:
      - type: entities
        entities:
          - entity: sensor.demo_temperature
          - entity: sensor.demo_humidity
  - label: Security
    icon: mdi:shield-lock
    cards:
      - type: entities
        entities:
          - entity: input_boolean.security_armed
          - entity: sensor.security_status

Header с badges

type: custom:universal-card
title: Kitchen
subtitle: Lights and scenes
header:
  layout:
    variant: stacked
    badges_position: below_content
badges:
  - type: state
    entity: input_boolean.kitchen_light
    icon: mdi:lightbulb
    label: Main
    color_rules:
      - operator: ==
        value: 'on'
        color: gold
      - operator: ==
        value: 'off'
        color: gray
body:
  cards:
    - type: entities
      entities:
        - entity: input_boolean.kitchen_light

Top 10 Recipes

Самые полезные стартовые точки:

1. Basic expandable card
2. Modal detail card
3. Fullscreen media card
4. Tabs card
5. Badge status row
6. Conditional UI
7. Theme override card
8. Stable wall panel
9. Security dashboard recipe
10. Mobile dashboard recipe

---

Быстрый docs map

Что открывать в зависимости от задачи:

• нужен старт и структура: Configuration
• нужен копируемый пример: Examples Gallery
• нужен быстрый lookup по полям: Field Matrix
• нужен полный блочный reference: YAML Block Reference
• нужен layout guide: Grid Layout, Header Layout, Footer
• нужны body modes: Modal Layout, Body Modes Layout
• нужны rules/actions: Badges, Visibility, Actions And Gestures
• нужен styling guide: Theming Guide, Custom CSS Recipes, Selector Catalog
• нужен editor coverage: Editor

Что есть в карточке

• 7 body modes: expand, modal, fullscreen, tabs, carousel, subview, none
• grid layout с colspan и rowspan
• configurable header layouts и badges
• footer slots и action rows
• visibility, section visibility, context menu и swipe
• themes, theme_tokens, state_styles, custom_css
• visual editor для основных сценариев

CSS overrides

Да, custom_css поддерживается.

Практический маршрут:

1. сначала theme
2. потом theme_tokens
3. потом state_styles
4. custom_css только для точечных override

Для новых override-сценариев лучше опираться на стабильные data-uc-* hooks из Selector Catalog.

Подробнее:

• Theming Guide
• Custom CSS Recipes
• Selector Catalog

Визуальный редактор

Editor лучше всего покрывает:

• shell fields
• header layout
• modal/fullscreen/tabs/carousel/subview settings
• badge visibility и color_rules
• visibility и section_visibility
• swipe
• theme_tokens
• state_styles

YAML остаётся лучшим вариантом для:

• сложных grid.columns строк
• advanced custom_css
• крупных action payloads
• badge tap_action и icon_tap_action

Подробнее: Editor

---

Troubleshooting

Карточка не обновилась после установки

• обновите страницу Home Assistant
• очистите браузерный cache
• проверьте путь к resource

Включить debug logging

Откройте консоль браузера и выполните:

enableUniversalCardDebug()

Выключить:

disableUniversalCardDebug()

---

FAQ

Нужен ли YAML, если есть editor?

Нет, для большинства карточек editor достаточно. YAML нужен в основном для сложных layout и styling сценариев.

Можно ли использовать nested cards?

Да. Внутри body.cards, tabs, grid cells, modal и fullscreen можно использовать вложенные Lovelace cards.

Можно ли использовать custom CSS?

Да. Для этого есть custom_css, но лучше сначала попробовать theme и theme_tokens.

Где посмотреть больше примеров?

• Examples Gallery
• YAML Block Reference
• Feature Map

---

Лицензия

MIT. См. LICENSE.

Вклад в проект

Issues и Pull Requests приветствуются. Если меняете user-facing поведение, синхронизируйте код, examples и docs вместе.