Expander/Collapsible card for HomeAssistant
Please ⭐️ or sponsor this repo if you find it useful.
Expand button as overlay:
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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent