Expander/Collapsible card for HomeAssistant
Please ⭐️ or sponsor this repo if you find it useful.
You can even nest expanders!
Clear Background (default theme):
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 |
expanded | boolean | false | true|false | Start expanded |
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 |
Add this repository via HACS Custom repositories
https://github.com/Alia5/lovelace-expander-card
(How to add Custom Repositories)
Install the expander-card
card by copying expander-card.js
to <config directory>/www/expander-card.js
Bash:
wget https://github.com/Alia5/lovelace-expander-card/releases/download/latest/expander-card.js
mv expander-card.js /config/www/
Link expander-card
inside your ui-lovelace.yaml
resources:
- url: /local/expander-card.js
type: js