Если у вас в Home Assistant слишком много карточек в интерфейсе Lovelace, вы наверняка сталкивались с проблемой перегруженности. Все устройства, датчики и светильники занимают драгоценное место на панели, и разобраться в этом “зоопарке” становится сложно.
Решение есть — lovelace-expander-card. Это кастомная карточка для Lovelace, которая позволяет сворачивать и разворачивать группы карточек по клику. В результате интерфейс становится компактным, чистым и удобным для работы.
Что такое Expander Card
Expander Card — это расширение для Home Assistant, добавляющее в Lovelace возможность создавать “скрытые секции”.
По сути, это контейнер для карточек, который в свернутом виде показывает только заголовок (и иконку), а при клике раскрывает вложенные карточки.
Преимущества
- Экономит место на панели.
- Делает интерфейс компактным и “чистым”.
- Поддерживает вложенные уровни (nested expanders).
- Можно задать заголовок как текст или полноценную карточку (например, часы или датчик).
- Работает с условиями (например, автоматически раскрывать на большом экране).
- Поддержка кастомизации через
card_mod(фон, цвета, стили при открытии/закрытии).
Установка
Через HACS
- Установите HACS, если он ещё не установлен.
- В HACS → Настройки → Custom Repositories добавьте репозиторий:
12https://github.com/MelleD/lovelace-expander-card - Найдите Expander Card в HACS и установите её.
- В меню Настройки → Dashboards → Resources добавьте ресурс:
123url: /hacsfiles/lovelace—expander—card/expander—card.jstype: module - Перезапустите интерфейс Lovelace.
Вручную
- Скачайте
expander-card.jsиз релиза. - Скопируйте его в папку
config/www. - В настройках Lovelace добавьте ресурс:
1234resources:— url: /local/expander—card.jstype: module - Перезагрузите Home Assistant.
Основные опции
Вот самые полезные параметры Expander Card:
- title — заголовок в свернутом виде.
- icon — иконка (по умолчанию стрелка).
- clear — убрать фон и рамки.
- expanded — стартовое состояние (раскрыт или нет).
- min-width-expanded / max-width-expanded — автораскрытие в зависимости от ширины экрана.
- title-card — использовать карточку вместо текста заголовка.
- storage-id — сохранять состояние (открыто/закрыто) для пользователя.
Примеры использования
1. Скрыть освещение в одну карточку
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
type: custom:expander—card title: Освещение icon: mdi:lightbulb—group expanded: false clear: true cards: — type: entities entities: — light.kitchen — light.living_room — light.bedroom — light.hallway |
👉 Теперь вместо пяти отдельных карточек вы видите лишь “Освещение”, которое раскрывается по клику.
2. Вложенные expander-карты (nested)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
— type: custom:expander—card title: Освещение icon: mdi:lightbulb—group cards: — type: custom:expander—card title: Кухня icon: mdi:stove cards: — type: entities entities: — light.kitchen_main — light.kitchen_worktop — type: custom:expander—card title: Спальня icon: mdi:bed cards: — type: entities entities: — light.bedroom — light.lamp_corner |
📌 Можно строить целую иерархию: “Освещение” → “Комната” → конкретные лампы.
3. Карточка-заголовок (title-card)
|
1 2 3 4 5 6 7 8 9 10 |
— type: custom:expander—card title—card: type: custom:digital—clock title—card—clickable: true title—card—button—overlay: true expanded: false cards: — type: custom:simple—weather—card entity: weather.home |
🔔 В качестве заголовка можно использовать любые другие карточки, например часы или датчик температуры.
4. Авторазворачивание на широком экране
|
1 2 3 4 5 6 7 8 9 |
type: custom:expander—card title: Освещение min—width—expanded: 800 cards: — type: entities entities: — light.kitchen — light.living_room |
💡 На мобильном телефоне список будет свёрнут, а на компьютере — открыт по умолчанию.
5. Разные настройки для разных пользователей
|
1 2 3 4 5 6 7 8 9 10 11 12 |
type: custom:expander—card title: Администрирование show—button—users: — user: admin start—expanded—users: — user: admin cards: — type: entities entities: — switch.reboot_server — switch.update_system |
👥 Только администратор увидит кнопку и сможет раскрыть карточку.
Стилизация (card_mod)
Можно менять цвет и фон в зависимости от состояния:
|
1 2 3 4 5 6 7 8 9 |
card_mod: style: | ha—card.open { background: #e0ffe0 !important; } ha—card.close { background: #f0f0f0 !important; } |
Где использовать Expander Card
- Для группировки освещения по комнатам.
- Для скрытия “редких” функций (например, администрирование, перезапуск).
- Для отображения графиков и статистики “по запросу”.
- Для организации панели с погодой, медиа, сценами.
- Для разных сценариев на мобильном и десктопе.
Итог
Expander Card — это простое, но мощное расширение для Home Assistant, которое позволяет:
- ✅ Сделать интерфейс аккуратным и компактным.
- ✅ Скрывать второстепенные элементы до момента, когда они нужны.
- ✅ Создавать вложенные структуры.
- ✅ Использовать любые карточки как заголовки.
- ✅ Автоматически раскрывать/скрывать в зависимости от экрана и пользователя.
Скачать и установить можно из репозитория:
👉 github.com/MelleD/lovelace-expander-card
Добавить комментарий