Skip to content

Alia5/lovelace-expander-card

Repository files navigation

Expander Card for HomeAssistant

GitHub tag (latest by date) GitHub all releases GitHub Repo stars

Expander/Collapsible card for HomeAssistant

Please ⭐️ or sponsor this repo if you find it useful.

Demo

Sample gif


Expand button as overlay: Sample lights overlay


You can even nest expanders!

Sample nesting


Clear Background (default theme):

Sample clear router

Options

Graphical config supported

Sample editor

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.