Accordion Card?

Hallo zusammen,
ich bin auf der Suche eine oder mehrere Cards auf bzw. zuzuklappen? Bisher habe ich es über einen input_boolean-Helfer und eine Bedingungskarte gelöst. Ich fände allerdings eine Accordion-Funktion oder ähnliches besser. Kennt von euch jemand sowas, was auch noch aktuell gehalten wird? Gefunden habe ich in HACS nämlich schon fold-entity-row und lovelace-expander-card. Aber beide scheinen nicht mehr wirklich aktiv/aktuell.

Ich habe beide ausprobiert und die expander card hat derart genervt mit all ihren bugs (haben auch die meisten forks), dass ich nur noch die fold-entity-row von thomasloven (Thomas Lovén) · GitHub nutze. Seine cards finde ich eigentlich alle sehr gelungen.

Sie funktioniert und mit einer stack-in-card oder dem custom:hui-element kann man sie sogar ausserhalb einer Entitätenkarte verwenden. Auch wenn Thomas selbst schreibt, man solle sie nur dort drin verwenden.

Edit: und da ich vieles von Thomas nutze, scheint er, wenn es nötig wird, seine Repositories auch zu aktualisieren.

1 „Gefällt mir“

Ich habe es getestet. Leider ist man bei der Expander Card zu eingeschränkt, welche Karten man nutzen kann. Ich habe jetzt mal auf popup-card umgestellt und eine bereits vorhandene Entität (input_boolean) genommen. Das klappt auch ganz gut.

Vielleicht gibt es ja noch andere Ideen.

Was‘n das ?
Bubble card ?

Gehört zu browser_mod

Dann hast du eine popup-card
https://www.reddit.com/r/homeassistant/comments/xassjl/browser_mod_20_popup_card_opens_moreinfo_behind/

Die expander-card(s) ist/sind meiner Meinung nach kaputt und echt nicht mehr zu empfehlen.

Fold-entity-row ist nichts für dich? Hat zwar keinen UI-Mode und man muss alles in YAML konfigurieren, aber ich konnte alles was ich wollte damit umsetzen. Zusammengeklappt ist sie bei mir wie eine tile-card für eine Leuchte. Ausgeklappt dann zusätzlich der Helligkeitsregler (Slider) der tile-card und ein paper-buttons-row mit overflow-x: scroll (vertikales scrollen). Das funktioniert bestens.

Andere Karten habe ich noch nicht ausprobiert. Was für Karten möchtest du denn einbetten?

Mehrere verschachtelte Karten, unter anderem Mushroom und vertical stack

Also ich könnte mir vorstellen, dass das geht. Hier mal mein Beispiel:

IMB_WNbpv7

Ich benutze die expander-card(fork). Was geht denn bei euch nicht? Ich benutze Sie allerdings auch nur zum gruppieren und ein und ausklappen wie Sie gedacht ist. Bisher gingen alle Karten vor allem die mushroom Karten.
Beim Aufklappen kommen dann halt die einzel Rolladen.

Das sieht mal fein aus. Kannst du den Code teilen?

Ich würde gerne sowas in der Art abbilden können. Das habe ich zumindest jetzt mit der Popup-Card realisiert.

type: custom:popup-card
title: Personen
dismissable: true
card:
  type: custom:stack-in-card
  title: ''
  mode: vertical
  cards:
    - type: custom:stack-in-card
      mode: horizontal
      cards:
        - type: custom:mushroom-person-card
          entity: person.xyz
          secondary_info: last-changed
          icon_type: entity-picture
          card_mod:
            style: |
              ha-card {
                border: none;
              }
        - type: tile
          entity: sensor.sm_s926b_battery_level
          name: Phone
          card_mod:
            style: |
              ha-card {
                border: none;
              }
        - type: tile
          entity: sensor.galaxy_watch5_pro_d40z_battery_level
          name: Watch
          card_mod:
            style: |
              ha-card {
                border: none;
              }
      card_mod:
        style: |
          ha-card {
            border: none;
          }
    - type: custom:mushroom-template-card
      primary: ''
      secondary: |
        {{ states('sensor.sm_s926b_geocoded_location') }}
      icon: ''
      tap_action:
        action: fire-dom-event
        browser_mod:
          service: browser_mod.popup
          data:
            content:
              type: map
              entities:
                - entity: person.xyz
              auto_fit: true
              dark_mode: false
              default_zoom: 12
              hours_to_show: 24
      hold_action:
        action: none
      card_mod:
        style: |
          ha-card {
            border: none;
            margin-top: -20px;
            margin-left: 50px;
          }
    - type: custom:stack-in-card
      mode: horizontal
      cards:
        - type: custom:mushroom-person-card
          entity: person.wife
          secondary_info: last-changed
          icon_type: entity-picture
          card_mod:
            style: |
              ha-card {
                border: none;
              }
        - type: tile
          entity: sensor.wife_sm_a546b_battery_level
          name: Phone
          card_mod:
            style: |
              ha-card {
                border: none;
              }
        - type: markdown
          content: ' '
          card_mod:
            style: |
              ha-card {
                border: none;
              }
      card_mod:
        style: |
          ha-card {
            border: none;
          }
    - type: custom:mushroom-template-card
      primary: ''
      secondary: |
        {{ states('sensor.wife_sm_a546b_geocoded_location') }}
      icon: ''
      tap_action:
        action: fire-dom-event
        browser_mod:
          service: browser_mod.popup
          data:
            content:
              type: map
              entities:
                - entity: person.wife
              auto_fit: true
              dark_mode: false
              default_zoom: 12
              hours_to_show: 24
      hold_action:
        action: none
      card_mod:
        style: |
          ha-card {
            border: none;
            margin-top: -20px;
            margin-left: 50px;
          }
    - type: custom:stack-in-card
      mode: horizontal
      cards:
        - type: custom:mushroom-person-card
          entity: person.son
          icon_type: entity-picture
          secondary_info: last-changed
          card_mod:
            style: |
              ha-card {
                border: none;
              }
        - type: tile
          entity: sensor.moto_g54_5g_battery_level
          name: Phone
          card_mod:
            style: |
              ha-card {
                border: none;
              }
        - type: custom:mushroom-entity-card
          entity: device_tracker.kidswatch
          name: Kidswatch
          icon: mdi:clock
          card_mod:
            style: |
              ha-card {
                border: none;
              }
      card_mod:
        style: |
          ha-card {
            border: none;
          }
    - type: custom:mushroom-template-card
      primary: ''
      secondary: |
        {{ states('sensor.moto_g54_5g_geocoded_location') }}
      icon: ''
      tap_action:
        action: fire-dom-event
        browser_mod:
          service: browser_mod.popup
          data:
            content:
              type: map
              entities:
                - entity: person.son
              auto_fit: true
              dark_mode: false
              default_zoom: 12
              hours_to_show: 24
      hold_action:
        action: none
      card_mod:
        style: |
          ha-card {
            border: none;
            margin-top: -20px;
            margin-left: 50px;
          }
    - type: custom:stack-in-card
      mode: horizontal
      cards:
        - type: custom:mushroom-person-card
          entity: person.abc
          secondary_info: last-changed
          icon_type: entity-picture
          card_mod:
            style: |
              ha-card {
                border: none;
                border-top: 1px dashed;
                border-color: var(--ha-card-border-color,var(--divider-color,#e0e0e0));
              }
      card_mod:
        style: |
          ha-card {
            border: none;
          }
    - type: custom:mushroom-template-card
      primary: ''
      secondary: |
        {{ states('sensor.abc_sm_s928b_geocoded_location') }}
      icon: ''
      tap_action:
        action: fire-dom-event
        browser_mod:
          service: browser_mod.popup
          data:
            content:
              type: map
              entities:
                - entity: person.abc
              auto_fit: true
              dark_mode: false
              default_zoom: 12
              hours_to_show: 24
      hold_action:
        action: none
      card_mod:
        style: |
          ha-card {
            border: none;
            margin-top: -25px;
            margin-left: 50px;
          }
entity: input_boolean.somebody_is_home

Ich wüsste nicht wie ich das mit der Expander-Card machen soll. Ist halt stack-in-card kombiniert mit mushroom- und tile-cards

@Chrizzz ja klar, gerne:


type: custom:stack-in-card
cards:
  - type: custom:fold-entity-row
    head:
      type: custom:hui-element
      card_type: tile
      name: Kugelleuchte
      entity: light.kuche_kugelleuchte
      card_mod:
        style: |
          ha-card {
            background: none;
            border: none;
            box-shadow: none;
          }
    padding: 0
    entities:
      - type: custom:hui-element
        card_type: tile
        entity: light.kuche_kugelleuchte
        features:
          - type: light-brightness
        card_mod:
          style: |
            .content {
              display: none !important;
            }
            hui-card-features {
              padding-top: 12px;
            }
            ha-card {
              background: none;
              border: none;
              box-shadow: none;
            }
      - type: divider
        style:
          margin-top: '-4px'
          margin-left: 14px
          margin-right: 12px
          opacity: 0.7
      - type: custom:paper-buttons-row
        styles:
          justify-content: flex-start
          padding: 0px 0px 6px 0px
          margin-left: 6px
          margin-right: 12px
          overflow-x: scroll
        base_config:
          name: false
          layout: icon
          ripple: none
          styles:
            icon:
              height: 40px
              width: 40px
            button:
              filter: |-
                {% if is_state('light.kuche_kugelleuchte','off') %}
                  saturate(10%)
                {% endif %}
          state_styles:
            'on':
              icon:
                outline: 2px solid rgba(128, 128, 128, 0.7)
                outline-offset: 2px
        buttons:
          - entity: scene.kuche_kugelleuchte_0_nachtlicht
            image: >
              {{
              state_attr('scene.kuche_kugelleuchte_0_nachtlicht','entity_picture')
              }}
          - entity: scene.kuche_kugelleuchte_1_abendlicht
            image: >
              {{
              state_attr('scene.kuche_kugelleuchte_1_abendlicht','entity_picture')
              }} 
          - entity: scene.kuche_kugelleuchte_2_warm
            image: >
              {{ state_attr('scene.kuche_kugelleuchte_2_warm','entity_picture')
              }}
          - entity: scene.kuche_kugelleuchte_3_hell
            image: >
              {{ state_attr('scene.kuche_kugelleuchte_3_hell','entity_picture')
              }}
          - entity: scene.kuche_kugelleuchte_4_strahlend
            image: >
              {{
              state_attr('scene.kuche_kugelleuchte_4_strahlend','entity_picture')
              }}
          - entity: scene.kuche_kugelleuchte_5_neutral
            image: >
              {{
              state_attr('scene.kuche_kugelleuchte_5_neutral','entity_picture')
              }}
          - entity: scene.kuche_kugelleuchte_6_kalt
            image: >
              {{ state_attr('scene.kuche_kugelleuchte_6_kalt','entity_picture')
              }}

Du brauchst dafür:
stack-in-card
hui-element
fold-entity-row
paper-buttons-row
card_mod

Und die icon-Bilder für die Szenen habe ich hier her: hue-scene-icons/icons at main · mattmon/hue-scene-icons · GitHub

Klasse, herzlichen Dank.

Hab mir jetzt nicht alles angeschaut, aber eine Beschreibung oder Bild wäre sicherlich leichter dein Vorhaben zu verstehen

Ok, der Code steht ja schon weiter oben, hier noch ein Screenshot


Das würde ich gerne komplett zuklappen/verstecken können. Ist eine custom:stack-in-card mit mehreren verschachtelten custom:stack-in-card und custom:mushroom-template-card. Bisher hatte ich es über eine Conditional-Card gemacht, habe aber jetzt auf Popup-Card umgeschwenkt.

Und was passiert mit der expander Card?
Seh jetzt kein Element was nicht tun sollte

Es passt irgendwie nicht richtig rein. Habe schon alle Padding-Werte auf 0 gesetzt
image
Sieht halt etwas unschön aus, aber ich teste noch. Und je nach Auflösung wird es noch schlimmer
image

Ok sieht echt komisch aus. Muss ich doch mal nachbauen

1 „Gefällt mir“

Das Problem scheint, dass sich die Expand-Card von der Größe her nicht am Inhalt orientiert.

Ich habe ein bisschen rumgespielt. Bei mir geht es.
Schick mal dein Code mit der expander card