Expander Card для Home Assistant: компактная и удобная панель управления

457

Если у вас в Home Assistant слишком много карточек в интерфейсе Lovelace, вы наверняка сталкивались с проблемой перегруженности. Все устройства, датчики и светильники занимают драгоценное место на панели, и разобраться в этом “зоопарке” становится сложно.

Решение есть — lovelace-expander-card. Это кастомная карточка для Lovelace, которая позволяет сворачивать и разворачивать группы карточек по клику. В результате интерфейс становится компактным, чистым и удобным для работы.

Что такое Expander Card

Expander Card — это расширение для Home Assistant, добавляющее в Lovelace возможность создавать “скрытые секции”.

По сути, это контейнер для карточек, который в свернутом виде показывает только заголовок (и иконку), а при клике раскрывает вложенные карточки.

Преимущества

• Экономит место на панели.
• Делает интерфейс компактным и “чистым”.
• Поддерживает вложенные уровни (nested expanders).
• Можно задать заголовок как текст или полноценную карточку (например, часы или датчик).
• Работает с условиями (например, автоматически раскрывать на большом экране).
• Поддержка кастомизации через card_mod (фон, цвета, стили при открытии/закрытии).

---

Установка

Через HACS

1. Установите HACS, если он ещё не установлен.
2. В HACS → Настройки → Custom Repositories добавьте репозиторий:
   
   Default

   https://github.com/MelleD/lovelace-expander-card

   1 2	https://github.com/MelleD/lovelace-expander-card

3. Найдите Expander Card в HACS и установите её.
4. В меню Настройки → Dashboards → Resources добавьте ресурс:
   
   Default

   url: /hacsfiles/lovelace-expander-card/expander-card.js type: module

   1 2 3

   url: /hacsfiles/lovelace-expander-card/expander-card.js type: module

5. Перезапустите интерфейс Lovelace.

Вручную

1. Скачайте expander-card.js из релиза.
2. Скопируйте его в папку config/www.
3. В настройках Lovelace добавьте ресурс:
   
   Default

   resources: - url: /local/expander-card.js type: module

   1 2 3 4

   resources:   - url: /local/expander-card.js     type: module

4. Перезагрузите Home Assistant.

---

Основные опции

Вот самые полезные параметры Expander Card:

• title — заголовок в свернутом виде.
• icon — иконка (по умолчанию стрелка).
• clear — убрать фон и рамки.
• expanded — стартовое состояние (раскрыт или нет).
• min-width-expanded / max-width-expanded — автораскрытие в зависимости от ширины экрана.
• title-card — использовать карточку вместо текста заголовка.
• storage-id — сохранять состояние (открыто/закрыто) для пользователя.

---

Примеры использования

1. Скрыть освещение в одну карточку

👉 Теперь вместо пяти отдельных карточек вы видите лишь “Освещение”, которое раскрывается по клику.

---

2. Вложенные expander-карты (nested)

📌 Можно строить целую иерархию: “Освещение” → “Комната” → конкретные лампы.

---

3. Карточка-заголовок (title-card)

🔔 В качестве заголовка можно использовать любые другие карточки, например часы или датчик температуры.

---

4. Авторазворачивание на широком экране

💡 На мобильном телефоне список будет свёрнут, а на компьютере — открыт по умолчанию.

---

5. Разные настройки для разных пользователей

👥 Только администратор увидит кнопку и сможет раскрыть карточку.

---

Стилизация (card_mod)

Можно менять цвет и фон в зависимости от состояния:

---

Где использовать Expander Card

• Для группировки освещения по комнатам.
• Для скрытия “редких” функций (например, администрирование, перезапуск).
• Для отображения графиков и статистики “по запросу”.
• Для организации панели с погодой, медиа, сценами.
• Для разных сценариев на мобильном и десктопе.

---

Итог

Expander Card — это простое, но мощное расширение для Home Assistant, которое позволяет:

• ✅ Сделать интерфейс аккуратным и компактным.
• ✅ Скрывать второстепенные элементы до момента, когда они нужны.
• ✅ Создавать вложенные структуры.
• ✅ Использовать любые карточки как заголовки.
• ✅ Автоматически раскрывать/скрывать в зависимости от экрана и пользователя.

Скачать и установить можно из репозитория:
👉 github.com/MelleD/lovelace-expander-card

Даже просто подбор, перевод и оформление статей требуют времени. А самостоятельный обзор устройств требует еще и финансовых вложений. Если Вы хотите больше обзоров, Вы можете помочь автору.