Skip to content

Latest commit

 

History

History
112 lines (73 loc) · 6.09 KB

README.md

File metadata and controls

112 lines (73 loc) · 6.09 KB
Raw

Expander Card for HomeAssistant

release downloads build

PayPal.Me MelleDennis

Buy Me A Coffee

Expander/Collapsible card for HomeAssistant

Introduction

First a few words to start with. A big thank you goes to @Alia5 (https://github.com/Alia5/lovelace-expander-card), who initially launched the card. I forked this card for my own HomeAssistant to make a few improvements. I give no guarantee for the functionality and no promise of lifelong maintenance, as I do the whole thing in my free time. Of course, I am happy about every contribution and PR

Please ⭐️ or sponsor this repo when you like it.

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 Empty * Title (Not displayed if using Title-Card)
clear boolean false true|false Remove Background
expanded boolean false true|false Start expanded
expander-card-background string ha-card-background, card-background-color,#fff css-color Expander Card Background
header-color string primary-text-color,#fff css-color Color of expand button
button-background string transparent css-color Background color of expand button
arrow-color string primary-text-color,#fff css-color Color of ico expand button
gap string 0.0em css-size gap between cards when expander closed
expanded-gap string 0.6em css-size gap between child cards when expander open
padding string 1em css-size padding of all card content
child-padding string 0.0em 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 0.0em css-size Margin from top right of expander button (if overlay)
cards object[] optional LovelaceCardConfig[] Child cards to show when expanded

Installation

HACS

Expander-Card is not available in HACS (Home Assistant Community Store) by default, but you can add it as custom repositories.

  1. Install HACS if you don't have it already
  2. Open HACS in Home Assistant
  3. Add this repository (https://github.com/MelleD/lovelace-expander-card) via HACS Custom repositories (How to add Custom Repositories)

Open your Home Assistant instance and open a repository inside the Home Assistant Community Store.

Manual

  1. Download expander-card.js file from the latest release.
  2. Put expander-card.js file into your config/www folder.
  3. Add reference to expander-card.js in Dashboard. There's two way to do that:
    • Using UI: Settings → Dashboards → More Options icon → Resources → Add Resource → Set Url as /local/expander-card.js → Set Resource type as JavaScript Module. Note: If you do not see the Resources menu, you will need to enable Advanced Mode in your User Profile
    • Using YAML: Add following code to lovelace section. 
      resources:
    - url: /local/expander-card.js
      type: module