https://github.com/alia5/lovelace-expander-card

Expander card for HomeAssistant
https://github.com/alia5/lovelace-expander-card

assistant custom-card hacs home homeassistant lovelace lovelace-custom-card

Last synced: 6 months ago
JSON representation

Expander card for HomeAssistant

• Host: GitHub
• URL: https://github.com/alia5/lovelace-expander-card
• Owner: Alia5
• License: apache-2.0
• Created: 2022-12-23T23:18:28.000Z (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2024-09-30T10:50:42.000Z (about 1 year ago)
• Last Synced: 2025-04-01T18:22:31.482Z (7 months ago)
• Topics: assistant, custom-card, hacs, home, homeassistant, lovelace, lovelace-custom-card
• Language: Svelte
• Homepage:
• Size: 1.42 MB
• Stars: 346
• Watchers: 6
• Forks: 24
• Open Issues: 22
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: license.txt

Awesome Lists containing this project

README

          
# Expander Card for HomeAssistant

![GitHub tag (latest by date)](https://img.shields.io/github/v/tag/Alia5/lovelace-expander-card?color=green&label=release)

![GitHub all releases](https://img.shields.io/github/downloads/Alia5/lovelace-expander-card/total)

![GitHub Repo stars](https://img.shields.io/github/stars/Alia5/lovelace-expander-card)

Expander/Collapsible card for HomeAssistant  

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

## Demo

![Sample gif](examples/example.gif)

---

Expand button as overlay:

![Sample lights overlay](examples/lights_overlay_button.png)

---

You can even nest expanders!  

![Sample nesting](examples/nested.png)

---

Clear Background (default theme):  

![Sample clear router](examples/clear_router.png)

## Options

**Graphical config supported**

![Sample editor](examples/editor.png)

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](https://hacs.xyz/docs/faq/custom_repositories/))

### Manual

#### 1. Download the card

Install the `expander-card` card by copying `lovelace-expander-card.js` to `/www/lovelace-expander-card.js`

Bash:

```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`

```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.