Vertikale Darstellung der Custom Bubble-Card in Home Assistant

Einleitung
Die Anpassung von Benutzeroberflächen in Smart-Home-Anwendungen wie Home Assistant ist entscheidend für eine benutzerfreundliche und ansprechende Erfahrung. Eine häufige Anforderung ist die Änderung der Layout-Orientierung von Karten, um den individuellen Bedürfnissen und Vorlieben der Nutzer gerecht zu werden. In diesem Artikel wird erläutert, wie eine custom:bubble-card vertikal anstelle von horizontal dargestellt werden kann.

Problem
Ein Benutzer möchte die Darstellung seiner custom:bubble-card in Home Assistant von horizontal auf vertikal ändern. Die Standardkonfiguration der Bubble-Card führt dazu, dass die Schaltflächen nebeneinander angeordnet sind, was nicht den gewünschten visuellen Effekt erzielt.

Lösung
Um die custom:bubble-card vertikal anzuzeigen, müssen einige Anpassungen im CSS-Stil der Karte vorgenommen werden. Die wichtigsten Änderungen betreffen die Container- und Button-Stile, um die vertikale Anordnung zu ermöglichen. Hier ist ein Beispiel für die angepasste Konfiguration:

type: custom:bubble-card
card_type: button
card_layout: large
button_type: name
show_icon: false
show_name: false
sub_button:
  - name: Home
    icon: mdi:home
    tap_action:
      action: navigate
      service: input_boolean.toggle
      navigation_path: /dashboard-dev/zuhause
    show_state: false
    show_name: false
    show_last_changed: false
    show_attribute: false
    show_background: false
  - name: Wohnzimmer
    show_background: false
    tap_action:
      action: navigate
      navigation_path: /dashboard-dev/wohnzimmer
    show_icon: true
    show_state: false
    icon: mdi:sofa-outline
  - name: Küche
    icon: mdi:countertop-outline
    show_background: false
    tap_action:
      action: navigate
      navigation_path: /dashboard-dev/kuche
  - name: Schlafzimmer
    icon: mdi:bed-king-outline
    show_background: false
    tap_action:
      action: navigate
      navigation_path: /dashboard-dev/schlafzimmer
  - tap_action:
      action: navigate
      navigation_path: /dashboard-dev/badezimmer
    name: Badezimmer
    icon: mdi:bathtub-outline
    show_background: false
  - name: Szenen
    icon: mdi:theater
    show_background: false
    tap_action:
      action: navigate
      navigation_path: /dashboard-dev/szenen
  - name: Settings
    icon: mdi:cog
    show_background: true
    tap_action:
      action: navigate
      navigation_path: /dashboard-dev/einstellungen
    hold_action:
      action: navigate
      navigation_path: /dashboard-dev/infos
styles: |
  .card-content {
    width: 100%;
    margin: 0 !important;
  }
  .bubble-button-card-container {
    background: none;
    flex-direction: column;  # Ändert die Richtung der Schaltflächen
  }
  .bubble-sub-button {
    height: 55px !important;
    width: 100% !important;  # Setzt die Breite auf 100% für vertikale Anordnung
  }
  .bubble-sub-button-container {
    width: 100%;
    justify-content: center !important;  # Zentriert die Schaltflächen
  }
  .bubble-sub-button-icon {
    --mdc-icon-size: inherit !important;
  }
  .bubble-name-container {
    margin-right: 0px !important;
  }
scrolling_effect: true

Schritte zur Umsetzung
1. Öffne die Konfigurationsdatei deiner Home Assistant Benutzeroberfläche. 2. Füge die oben angepasste YAML-Konfiguration für die custom:bubble-card ein. 3. Stelle sicher, dass die CSS-Stile entsprechend angepasst sind, um die vertikale Anordnung zu ermöglichen. 4. Speichere die Änderungen und lade die Benutzeroberfläche neu, um die Anpassungen zu sehen.

Hintergrundwissen
Die custom:bubble-card ist eine benutzerdefinierte Karte in Home Assistant, die es ermöglicht, verschiedene Schaltflächen und Aktionen in einer ansprechenden Bubble-Form darzustellen. Die Anpassung des Layouts erfolgt über CSS-Stile, die das Aussehen und Verhalten der Karte beeinflussen. Typische Fehler können durch falsche CSS-Eigenschaften oder unzureichende Containeranpassungen entstehen.

Zusätzliche Infos

Hinweise & Best Practices
- Teste die Änderungen in einer sicheren Umgebung, bevor du sie in deiner Hauptkonfiguration anwendest. - Achte darauf, dass die Icons und Texte in der vertikalen Anordnung gut lesbar sind. - Berücksichtige die Benutzerfreundlichkeit, insbesondere auf mobilen Geräten, wo der Platz begrenzt sein kann. - Halte die CSS-Stile so einfach wie möglich, um die Wartbarkeit zu erhöhen.