Bubble Card: un panel móvil con ventanas emergentes por habitación

Descripción general

Bubble Card es una colección de tarjetas minimalistas pensadas para el móvil: botones redondeados, deslizadores, separadores, cabeceras y, sobre todo, ventanas emergentes (pop-ups) que se abren desde abajo. Incluye una tienda de módulos con más de cien estilos y funciones creados por la comunidad.

Animación de presentación de Bubble Card con un botón redondeado — Presentación animada de Bubble Card.

Imagen: Bubble Card de Clooos, licencia MIT.

Requisitos

HACS → «Bubble Card» → Descargar y recarga el navegador.
Repositorio: Clooos/Bubble-Card.

Ideas de uso

Un panel de inicio con una burbuja por habitación que abre su ventana emergente. Es el ejemplo de abajo.
Barra inferior fija (horizontal buttons stack) con accesos a Salón, Cocina, Dormitorio y Exterior, como una app.
Deslizadores grandes para regular luces y persianas con el pulgar.
Ventana emergente de seguridad con la alarma, las cámaras y las cerraduras.
Botón de escena («Cine», «Cena», «Buenas noches») que muestre si la escena está activa.
Módulos de la tienda: tiempo animado, insignias de estado o menús desplegables sin escribir CSS.

Ejemplo de uso

La ventana emergente del salón. Ponla al final de la vista, en una pila vertical:

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: "#salon"
    name: Salón
    icon: mdi:sofa
  - type: custom:bubble-card
    card_type: button
    button_type: switch
    entity: light.salon
    name: Lámpara
  - type: custom:bubble-card
    card_type: button
    button_type: slider
    entity: light.tira_led_salon
    name: Tira LED

El botón que la abre, en la vista principal:

type: custom:bubble-card
card_type: button
button_type: name
name: Salón
icon: mdi:sofa
tap_action:
  action: navigate
  navigation_path: "#salon"

Cómo funciona:

Un pop-up se identifica por su hash. Cualquier botón que navegue a #salon lo abre deslizándose desde abajo.
button_type: switch (encender y apagar), slider (deslizar para regular), state (solo mostrar) o name (solo texto e icono).
Dentro del pop-up puedes poner cualquier tarjeta, no solo Bubble.

Acción

Tocas «Salón» en el móvil

Resultado

Se desliza la ventana del salón
con la lámpara y la tira LED