Awesome
Expander Card for HomeAssistant
Expander/Collapsible card for HomeAssistant
Please ⭐️ or sponsor this repo if you find it useful.
Demo
Expand button as overlay:
You can even nest expanders!
Clear Background (default theme):
Options
Graphical config supported
Yaml:
| Name | Type | Default | Supported options | Description |
|---|---|---|---|---|
| type | string | Required | custom:expander-card | Type of the card. |
| title | string | Expander | * | Title (Not displayed if using Title-Card) |
| clear | boolean | false | true|false | Remove Background |
| clear-children | boolean | false | true|false | Remove Backgrounds/Borders of child cards |
| expanded | boolean | false | true|false | Start expanded |
| expand-id | string | optional | string | Unique ID to use for JS LocalStorage. Will save expanded state |
| button-background | string | transparent | css-color | Background color of expand button |
| gap | string | 0.6em | css-size | gap between child cards |
| padding | string | 1em | css-size | padding of all card content |
| child-padding | string | 0.5em | css-size | padding of child cards |
| title-card | object | optional | LovelaceCardConfig | Replace Title with card |
| title-card-padding | string | 0px | css-size | padding of title-card |
| title-card-button-overlay | boolean | false | true|false | Overlay expand button over title-card |
| overlay-margin | string | 2em | css-size | Margin from top right of expander button (if overlay) |
| cards | object[] | optional | LovelaceCardConfig[] | Child cards to show when expanded |
Installation
Hacs
Add this repository via HACS Custom repositories
https://github.com/Alia5/lovelace-expander-card
(How to add Custom Repositories)
Manual
1. Download the card
Install the expander-card card by copying lovelace-expander-card.js to <config directory>/www/lovelace-expander-card.js
Bash:
wget https://github.com/Alia5/lovelace-expander-card/releases/download/latest/lovelace-expander-card.js
mv lovelace-expander-card.js /config/www/
2. Link the card to your lovelace ui
The manual way:
Link expander-card inside your ui-lovelace.yaml
resources:
- url: /local/lovelace-expander-card.js
type: js
Note on closing the issue tracker
FOSS is broken. People suck
I don't care anymore.