Skip to content

IIIdefconIII/lovelace-expander-card

 
 

Repository files navigation

Expander Card for HomeAssistant

release downloads build Quality Gate Status PayPal.Me BuyMeCoffee

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

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 Editor is currently not supported. Contribution welcome!

Yaml Options:

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
min-width-expanded number 0 number Min screen width (px) to be expanded on start (use with start expanded above)
max-width-expanded number 0 number Max screen width (px) to be expanded on start (use with start expanded above)
expander-card-background string ha-card-background, card-background-color,#fff css-color Expander Card Background
expander-card-background-expanded string Empty css-color Expander Card Background when card is opened/expanded
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
child-margin-top string 0.0em css-size Margin top 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
title-card-clickable boolean false true|false Should the complete diff clickable?
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
expander-card-display string block css-display Layout/Display of the card

Examples

Here are a few examples of usage.

Title card

Example title card that is clickable and has 2 nested cards, which is directly expanded

    - type: custom:expander-card
      child-margin-top: 0.6em
      padding: 0
      clear: true
      title-card-button-overlay: true
      title-card-clickable: true
      expanded: true
      title-card:
        type: "custom:digital-clock"
        dateFormat:
          weekday: "long"
          day: "2-digit"
          month: "short"
        timeFormat:
          hour: "2-digit"
          minute: "2-digit"
      cards:
        - type: custom:simple-weather-card
          entity: weather.openweathermap
          primary_info:
            - wind_speed
            - wind_bearing
          secondary_info:
            - precipitation
            - precipitation_probability
        - type: custom:hourly-weather
          entity: weather.openweathermap
          icons: true
          show_precipitation_probability: true
          show_precipitation_amounts: true
          forecast_type: "hourly"
          num_segments: 10"
          label_spacing: "1"
          name: null
          show_wind: speed

Title

Example with title that is clickable and has 2 nested cards.

      - type: custom:expander-card
        child-margin-top: 0.6em
        padding: 0
        title: "Test"
        title-card-button-overlay: true
        title-card-clickable: true
        cards:
          - type: custom:simple-weather-card
            entity: weather.openweathermap
            primary_info:
              - wind_speed
              - wind_bearing
            secondary_info:
              - precipitation
              - precipitation_probability
          - type: custom:hourly-weather
            entity: weather.openweathermap
            icons: true
            show_precipitation_probability: true
            show_precipitation_amounts: true
            forecast_type: "hourly"
            num_segments: 10"
            label_spacing: "1"
            name: null
            show_wind: speed

Title with min-width-expanded

Example with title that is clickable and has 2 nested cards with are automatically expanded when the screen is more than 300px.

      - type: custom:expander-card
        child-margin-top: 0.6em
        padding: 0
        title: "Test"
        title-card-button-overlay: true
        title-card-clickable: true
        min-width-expanded: 300
        cards:
          - type: custom:simple-weather-card
            entity: weather.openweathermap
            primary_info:
              - wind_speed
              - wind_bearing
            secondary_info:
              - precipitation
              - precipitation_probability
            name: in Gärtringen
          - type: custom:hourly-weather
            entity: weather.openweathermap
            icons: true
            show_precipitation_probability: true
            show_precipitation_amounts: true
            forecast_type: "hourly"
            num_segments: 10"
            label_spacing: "1"
            show_wind: speed

Card Mod

With the help of the integration card mod, the card can be flexibly adapted. This is also possible based on the card status. A CSS class “open” or “close” is always set.

Using an example to set the background based on the status

        card_mod:
          style: |
            ha-card.open {
              background: red !important;
            }
            ha-card.close {
              background: #C8A2C8 !important;
            }

Only the background of the button

        card_mod:
          style: |
            button.open {
              background: red !important;
            }
            button.close {
              background: #C8A2C8 !important;
            }

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: SettingsDashboardsMore Options iconResourcesAdd 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

Support

Clone and create a PR to help make the card even better.

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

Sponsor ❤️

PayPal.Me MelleDennis

Buy Me A Coffee

About

Expander card for HomeAssistant

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Svelte 45.9%
  • JavaScript 39.1%
  • TypeScript 15.0%