[ CARTE ] Bubble Card - Des pop-up et une collection de cartes minimalistes

[yeoh]

Bonjour à tous,

Désolé mais même avec les explications complémentaires dans ce fil je n’arrive pas à créer un popup. J’ai effectué de nombreux essais en ajoutant navigate vers le nom du popup mais cela ne fonctionne pas.
Quelqu’un pourrait il partager le code d’une carte complète svp ?
Merci par avance
J’ai déjà refait 80% de ma carte principale avec Bubble card et c’est vraiment top, les possibilités sont vraiment nombreuses et le rendu très adapté au téléphone.

Quelque exemple de ma carte en cours de MAJ :

[marmoul]

Désolé j’ai pas tout suivi mais c’est quoi exactement qui ne fonctionne pas??
Tu as bien crée ta pop-up avec le #name que tu ajoute dans ton bouton tap-action dans le navigate?
C’est plutôt bien expliqué dans la doc

GitHub - Clooos/Bubble-Card: Bubble Card is a minimalist card collection for...

[oli_34]

Bonjour
Il faut créer carte pile verticale et mettre la carte pop-up bubble card

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: '#lumieres'

Sur tes captures je ne vois pas le hash de renseigné

Voici un exemple d’un pop-un complet que j’ai

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: '#lumieres'
    entity: light.lumieres
    button_type: switch
    sub_button: []
    button_action:
      double_tap_action:
        action: none
      tap_action:
        action: call-service
        service: light.turn_off
        target:
          entity_id: light.lumieres
  - type: custom:decluttering-card
    template: bubble_light
    variables:
      - entity: light.variateur_salon
      - name: Spots Salon
      - icon: mdi:light-recessed
  - type: custom:decluttering-card
    template: bubble_light
    variables:
      - entity: light.variateur_sejour
      - name: Spots Séjour
      - icon: mdi:light-recessed
  - type: custom:decluttering-card
    template: bubble_light
    variables:
      - entity: light.suspension_sejour
      - name: Suspension Séjour
      - icon: mdi:light-recessed
  - type: custom:decluttering-card
    template: bubble_light
    variables:
      - entity: light.variateur_chambre_parents
      - name: Spots Parents
      - icon: mdi:light-recessed
  - type: custom:decluttering-card
    template: bubble_light
    variables:
      - entity: light.variateur_chambre_lissandro
      - name: Spots Lissandro
      - icon: mdi:light-recessed
  - type: custom:decluttering-card
    template: bubble_light
    variables:
      - entity: light.variateur_chambre_julia
      - name: Spots Julia
      - icon: mdi:light-recessed

[yeoh]

Merci pour vos retours,

Voici un exemple rapide qui ne fonctionne pas :

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: '#kitchen'
    name: Kitchen
    icon: mdi:fridge
    entity: light.kitchen
    margin_top_mobile: calc(100vh - 400px)
    margin_top_desktop: calc(100vh - 400px)
  - type: custom:bubble-card
    card_type: button
    entity: climate.salon
    tap_action:
      action: navigate
      navigation_path: '#kitchen'

Quand je sors de l’éditeur :

Invisible

[oli_34]

Oui car c’est le pop-up que tu as créé après il faut créer soit une chips ou autre carte qui pointe vers le hash du popup

Carte pour ouvrir le pop-up

type: custom:bubble-card
card_type: button
button_type: name
name: Kitchen
icon: mdi:fridge
button_action:
  tap_action:
    action: navigate
    navigation_path: '#kitchen'

Pop-up

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: '#kitchen'
    name: Kitchen
    icon: mdi:fridge
    entity: light.kitchen

[yeoh]

C’est le cas non ? :

J’ai ajouté un button bubble avec navigate vers #kitchen

[oli_34]

Tu dois créer deux cartes regarde le post au dessus je viens de l’éditer

[marmoul]

Le pb c’est que tu crée le button pour afficher ta pop-up à l’intérieur de la pop-up du coup tu verra jamais le button qui doit ouvrir ta pop-up

[yeoh]

Ouahhhhh alors la merci je n’avais effectivement rien compris je pensais que tout devait être dans la même carte, j’ai compris et mon test fonctionne merci encore

D’ailleurs je pensais que c’était le popup qui affichait l’autre carte alors que c’est la carte avec navigate qui ouvre le popup donc l’inverse d’où ma confusion

Merci encore

[selecus]

Pour ceux que ça intéresserait, j’ai reproduit le menu paramètre dans un pop-up

Et voici le code

en trois parties

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: '#param'
    name: Paramètres
    icon: mdi:cog
    button_action:
      tap_action:
        action: toggle
    show_state: false
    show_last_changed: false
    show_name: true
    sub_button:
      - show_background: false
        icon: mdi:dots-vertical
        tap_action:
          action: navigate
          navigation_path: '#param1'
    tap_action:
      action: none
    hold_action:
      action: none
    bg_color: ''
    bg_opacity: '88'
    styles: |-
      .bubble-button-card-container {
        background-color: rgba(0,0,0,0) !important;
      } 
      .bubble-sub-button {
        background-color: rgba(0,0,0,0.1) !important;
      }
      .bubble-sub-button:hover {
        background-color: rgba(0,0,0,0.5) !important;
      } 
    auto_close: '15000'
    double_tap_action:
      action: none
    background_update: false
    close_on_click: true
  - type: custom:bubble-card
    card_type: button
    tap_action:
      action: navigate
      navigation_path: /config/cloud/account
    name: Home Assistant Cloud
    icon: mdi:cloud-lock
    styles: |-
      .bubble-button-card-container {
        background-color: rgba(0,0,0,0) !important;
      } 
      .bubble-button-card-container:hover {
        background-color: rgba(0,0,0,0.5) !important;
      } 
      .bubble-icon-container {
        opacity: 1;
        background-color: rgb(59, 128, 142) !important;
      } .bubble-icon {
        opacity: 1;
        color: white !important;
      }
      ${card.querySelector('.bubble-state').innerText = "Identifié et connecté"}
    button_action:
      tap_action:
        action: navigate
        navigation_path: /config/cloud/account
      double_tap_action:
        action: none
      hold_action:
        action: none
    show_attribute: false
    show_last_changed: false
    show_state: true
    show_name: true
    force_icon: false
    button_type: state
    sub_button:
      - show_icon: true
        show_background: false
        icon: mdi:chevron-right
        tap_action:
          action: navigate
          navigation_path: /config/cloud/account
    entity: zone.home
  - type: custom:bubble-card
    card_type: button
    tap_action:
      action: navigate
      navigation_path: /config/integrations/dashboard
    name: Appareils et services
    icon: mdi:devices
    styles: >-
      .bubble-button-card-container {
        background-color: rgba(0,0,0,0) !important;
      } 

      .bubble-button-card-container:hover {
        background-color: rgba(0,0,0,0.5) !important;
      } 

      .bubble-icon-container {
        opacity: 1;
        background-color: rgb(13, 71, 161) !important;
      } .bubble-icon {
        opacity: 1;
        color: white !important;
      }

      ${card.querySelector('.bubble-state').innerText = "Intégrations,
      appareils, entités et entrées"}
    entity: zone.home
    button_action:
      tap_action:
        action: navigate
        navigation_path: /config/integrations/dashboard
      double_tap_action:
        action: none
      hold_action:
        action: none
    show_attribute: false
    show_last_changed: false
    show_state: true
    show_name: true
    force_icon: false
    button_type: state
    sub_button:
      - show_icon: true
        show_background: false
        icon: mdi:chevron-right
        tap_action:
          action: navigate
          navigation_path: /config/integrations/dashboard
  - type: custom:bubble-card
    card_type: button
    tap_action:
      action: navigate
      navigation_path: /config/automation/dashboard
    name: Automatisations et scènes
    icon: mdi:robot
    styles: >-
      .bubble-button-card-container {
        background-color: rgba(0,0,0,0) !important;
      } 

      .bubble-button-card-container:hover {
        background-color: rgba(0,0,0,0.5) !important;
      } 

      .bubble-icon-container {
        opacity: 1;
        background-color: rgb(81, 140, 67) !important;
      } .bubble-icon {
        opacity: 1;
        color: white !important;
      }

      ${card.querySelector('.bubble-state').innerText = "Automatisations,
      scènes, scripts et Blueprints"}
    entity: zone.home
    button_action:
      tap_action:
        action: navigate
        navigation_path: /config/automation/dashboard
      double_tap_action:
        action: none
      hold_action:
        action: none
    show_attribute: false
    show_last_changed: false
    show_state: true
    show_name: true
    force_icon: false
    button_type: state
    sub_button:
      - show_icon: true
        show_background: false
        icon: mdi:chevron-right
        tap_action:
          action: navigate
          navigation_path: /config/automation/dashboard
  - type: custom:bubble-card
    card_type: button
    tap_action:
      action: navigate
      navigation_path: /config/areas/dashboard
    name: Pièces. étiquettes et zones
    icon: mdi:sofa
    styles: >-
      .bubble-button-card-container {
        background-color: rgba(0,0,0,0) !important;
      } 

      .bubble-button-card-container:hover {
        background-color: rgba(0,0,0,0.5) !important;
      } 

      .bubble-icon-container {
        opacity: 1;
        background-color: rgb(228, 134, 41) !important;
      } .bubble-icon {
        opacity: 1;
        color: white !important;
      }

      ${card.querySelector('.bubble-state').innerText = "Gérer les zones dans et
      autour de votre maison"}
    entity: zone.home
    button_action:
      tap_action:
        action: navigate
        navigation_path: /config/areas/dashboard
      double_tap_action:
        action: none
      hold_action:
        action: none
    show_attribute: false
    show_last_changed: false
    show_state: true
    show_name: true
    force_icon: false
    button_type: state
    sub_button:
      - show_icon: true
        show_background: false
        icon: mdi:chevron-right
        tap_action:
          action: navigate
          navigation_path: /config/areas/dashboard
  - type: custom:bubble-card
    card_type: button
    tap_action:
      action: navigate
      navigation_path: /hassio/dashboard
    name: Modules complémentaires
    icon: mdi:puzzle
    styles: >-
      .bubble-button-card-container {
        background-color: rgba(0,0,0,0) !important;
      } 

      .bubble-button-card-container:hover {
        background-color: rgba(0,0,0,0.5) !important;
      } 

      .bubble-icon-container {
        opacity: 1;
        background-color: rgb(241, 196, 71) !important;
      } .bubble-icon {
        opacity: 1;
        color: white !important;
      }

      ${card.querySelector('.bubble-state').innerText = "Exécuter des
      applications supplémentaires à côté de Home Assistant"}
    entity: zone.home
    button_action:
      tap_action:
        action: navigate
        navigation_path: /hassio/dashboard
      double_tap_action:
        action: none
      hold_action:
        action: none
    show_attribute: false
    show_last_changed: false
    show_state: true
    show_name: true
    force_icon: false
    button_type: state
    sub_button:
      - show_icon: true
        show_background: false
        icon: mdi:chevron-right
        tap_action:
          action: navigate
          navigation_path: /hassio/dashboard
  - type: custom:bubble-card
    card_type: button
    tap_action:
      action: navigate
      navigation_path: /config/lovelace/dashboards
    name: Tableaux de bord
    icon: mdi:view-dashboard
    styles: >-
      .bubble-button-card-container {
        background-color: rgba(0,0,0,0) !important;
      } 

      .bubble-button-card-container:hover {
        background-color: rgba(0,0,0,0.5) !important;
      } 

      .bubble-icon-container {
        opacity: 1;
        background-color: rgb(177, 52, 92) !important;
      } .bubble-icon {
        opacity: 1;
        color: white !important;
      }

      ${card.querySelector('.bubble-state').innerText = "Organiser la façon dont
      vous interagissez avec votre maison"}
    entity: zone.home
    button_action:
      tap_action:
        action: navigate
        navigation_path: /config/lovelace/dashboards
      double_tap_action:
        action: none
      hold_action:
        action: none
    show_attribute: false
    show_last_changed: false
    show_state: true
    show_name: true
    force_icon: false
    button_type: state
    sub_button:
      - show_icon: true
        show_background: false
        icon: mdi:chevron-right
        tap_action:
          action: navigate
          navigation_path: /config/lovelace/dashboards
  - type: custom:bubble-card
    card_type: button
    tap_action:
      action: navigate
      navigation_path: /config/voice-assistants/assistants
    name: Assistants vocaux
    icon: mdi:microphone
    styles: >-
      .bubble-button-card-container {
        background-color: rgba(0,0,0,0) !important;
      } 

      .bubble-button-card-container:hover {
        background-color: rgba(0,0,0,0.5) !important;
      } 

      .bubble-icon-container {
        opacity: 1;
        background-color: rgb(50, 99, 195) !important;
      } .bubble-icon {
        opacity: 1;
        color: white !important;
      }

      ${card.querySelector('.bubble-state').innerText = "Gérer vos assistants
      vocaux"}
    entity: zone.home
    button_action:
      tap_action:
        action: navigate
        navigation_path: /config/voice-assistants/assistants
      double_tap_action:
        action: none
      hold_action:
        action: none
    show_attribute: false
    show_last_changed: false
    show_state: true
    show_name: true
    force_icon: false
    button_type: state
    sub_button:
      - show_icon: true
        show_background: false
        icon: mdi:chevron-right
        tap_action:
          action: navigate
          navigation_path: /config/voice-assistants/assistants
  - type: custom:bubble-card
    card_type: button
    tap_action:
      action: navigate
      navigation_path: /config/tags
    name: Étiquettes
    icon: mdi:nfc-variant
    styles: >-
      .bubble-button-card-container {
        background-color: rgba(0,0,0,0) !important;
      } 

      .bubble-button-card-container:hover {
        background-color: rgba(0,0,0,0.5) !important;
      } 

      .bubble-icon-container {
        opacity: 1;
        background-color: rgb(97, 97, 97) !important;
      } .bubble-icon {
        opacity: 1;
        color: white !important;
      }

      ${card.querySelector('.bubble-state').innerText = "Configurer des
      étiquettes NFC et des QR codes"}
    entity: zone.home
    button_action:
      tap_action:
        action: navigate
        navigation_path: /config/tags
      double_tap_action:
        action: none
      hold_action:
        action: none
    show_attribute: false
    show_last_changed: false
    show_state: true
    show_name: true
    force_icon: false
    button_type: state
    sub_button:
      - show_icon: true
        show_background: false
        icon: mdi:chevron-right
        tap_action:
          action: navigate
          navigation_path: /config/tags
  - type: custom:bubble-card
    card_type: button
    tap_action:
      action: navigate
      navigation_path: /config/person
    name: Personnes
    icon: mdi:account
    styles: >-
      .bubble-button-card-container {
        background-color: rgba(0,0,0,0) !important;
      } 

      .bubble-button-card-container:hover {
        background-color: rgba(0,0,0,0.5) !important;
      } 

      .bubble-icon-container {
        opacity: 1;
        background-color: rgb(90, 135, 250) !important;
      } .bubble-icon {
        opacity: 1;
        color: white !important;
      }

      ${card.querySelector('.bubble-state').innerText = "Gérer qui peut accéder
      à votre maison"}
    entity: zone.home
    button_action:
      tap_action:
        action: navigate
        navigation_path: /config/person
      double_tap_action:
        action: none
      hold_action:
        action: none
    show_attribute: false
    show_last_changed: false
    show_state: true
    show_name: true
    force_icon: false
    button_type: state
    sub_button:
      - show_icon: true
        show_background: false
        icon: mdi:chevron-right
        tap_action:
          action: navigate
          navigation_path: /config/person
  - type: custom:bubble-card
    card_type: button
    tap_action:
      action: navigate
      navigation_path: /config/system
    name: Système
    icon: mdi:cog
    styles: >-
      .bubble-button-card-container {
        background-color: rgba(0,0,0,0) !important;
      } 

      .bubble-button-card-container:hover {
        background-color: rgba(0,0,0,0.5) !important;
      } 

      .bubble-icon-container {
        opacity: 1;
        background-color: rgb(48, 26, 190) !important;
      } .bubble-icon {
        opacity: 1;
        color: white !important;
      }

      ${card.querySelector('.bubble-state').innerText = "Créer des sauvegardes,
      vérifier les journaux ou redémarrer votre système"}
    entity: zone.home
    button_action:
      tap_action:
        action: navigate
        navigation_path: /config/system
      double_tap_action:
        action: none
      hold_action:
        action: none
    show_attribute: false
    show_last_changed: false
    show_state: true
    show_name: true
    force_icon: false
    button_type: state
    sub_button:
      - show_icon: true
        show_background: false
        icon: mdi:chevron-right
        tap_action:
          action: navigate
          navigation_path: /config/system
  - type: custom:bubble-card
    card_type: button
    tap_action:
      action: navigate
      navigation_path: /config/info
    name: À propos
    icon: mdi:cog
    styles: >-
      .bubble-button-card-container {
        background-color: rgba(0,0,0,0) !important;
      } 

      .bubble-button-card-container:hover {
        background-color: rgba(0,0,0,0.5) !important;
      } 

      .bubble-icon-container {
        opacity: 1;
        background-color: rgb(74, 89, 99) !important;
      } .bubble-icon {
        opacity: 1;
        color: white !important;
      }

      ${card.querySelector('.bubble-state').innerText = "Informations sur la
      version, crédit, etc."}
    entity: zone.home
    button_action:
      tap_action:
        action: navigate
        navigation_path: /config/info
      double_tap_action:
        action: none
      hold_action:
        action: none
    show_attribute: false
    show_last_changed: false
    show_state: true
    show_name: true
    force_icon: false
    button_type: state
    sub_button:
      - show_icon: true
        show_background: false
        icon: mdi:chevron-right
        tap_action:
          action: navigate
          navigation_path: /config/info

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: '#param1'
    name: Redémarrer Home Assistant
    icon: mdi:power
    button_action:
      tap_action:
        action: toggle
    show_state: false
    show_last_changed: false
    show_name: true
    sub_button: []
    tap_action:
      action: none
    hold_action:
      action: none
    bg_color: ''
    bg_opacity: '88'
    styles: |-
      .bubble-button-card-container {
        background-color: rgba(0,0,0,0) !important;
      } 
    auto_close: '15000'
    double_tap_action:
      action: none
    background_update: false
    close_on_click: true
  - type: custom:bubble-card
    card_type: button
    tap_action:
      action: call-service
      navigation_path: /config/cloud/account
      service: homeassistant.reload_all
    name: Rechargement rapide
    icon: mdi:auto-fix
    styles: >-
      .bubble-button-card-container {
        background-color: rgba(0,0,0,0) !important;
      } 

      .bubble-button-card-container:hover {
        background-color: rgba(0,0,0,0.5) !important;
      } 

      .bubble-icon-container {
        opacity: 1;
        background-color: rgb(95, 138, 73) !important;
      } .bubble-icon {
        opacity: 1;
        color: white !important;
      }

      ${card.querySelector('.bubble-state').innerText = "Charge les nouvelles
      configurations YAML sans redémarrage."}
    button_action:
      tap_action:
        action: call-service
        navigation_path: /config/cloud/account
        service: homeassistant.reload_all
      double_tap_action:
        action: none
      hold_action:
        action: none
    show_attribute: false
    show_last_changed: false
    show_state: true
    show_name: true
    force_icon: false
    button_type: state
    sub_button: []
    entity: zone.home
  - type: custom:bubble-card
    card_type: button
    tap_action:
      action: call-service
      navigation_path: /config/integrations/dashboard
      service: homeassistant.restart
    name: Redémarrer Home Assistant
    icon: mdi:devices
    styles: >-
      .bubble-button-card-container {
        background-color: rgba(0,0,0,0) !important;
      } 

      .bubble-button-card-container:hover {
        background-color: rgba(0,0,0,0.5) !important;
      } 

      .bubble-icon-container {
        opacity: 1;
        background-color: rgb(255, 213, 0) !important;
      } .bubble-icon {
        opacity: 1;
        color: rgb(102, 85, 0) !important;
      }

      ${card.querySelector('.bubble-state').innerText = "Interrompt toutes les
      automatisations et tous les scripts en cours d'exécution."}
    entity: zone.home
    button_action:
      tap_action:
        action: call-service
        navigation_path: /config/integrations/dashboard
        service: homeassistant.restart
      double_tap_action:
        action: none
      hold_action:
        action: none
    show_attribute: false
    show_last_changed: false
    show_state: true
    show_name: true
    force_icon: false
    button_type: state
    sub_button: []
  - type: custom:bubble-card
    card_type: button
    sub_button:
      - tap_action:
          action: navigate
          navigation_path: '#param2'
        icon: mdi:chevron-down
    styles: |-

      .bubble-sub-button {
        background-color: rgba(0,0,0,0) !important;
      }
      .bubble-button-card-container {
        background-color: rgba(0,0,0,0) !important;
      } 
    icon: ''
    name: Options avancées
    button_type: name
    show_icon: false
    scrolling_effect: false
    button_action:
      tap_action:
        action: navigate
        navigation_path: '#param2'

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: '#param2'
    name: Redémarrer Home Assistant
    icon: mdi:power
    button_action:
      tap_action:
        action: toggle
    show_state: false
    show_last_changed: false
    show_name: true
    sub_button: []
    tap_action:
      action: none
    hold_action:
      action: none
    bg_color: ''
    bg_opacity: '88'
    styles: |-
      .bubble-button-card-container {
        background-color: rgba(0,0,0,0) !important;
      } 
    auto_close: '15000'
    double_tap_action:
      action: none
    background_update: false
    close_on_click: true
  - type: custom:bubble-card
    card_type: button
    tap_action:
      action: call-service
      navigation_path: /config/cloud/account
      service: homeassistant.reload_all
    name: Rechargement rapide
    icon: mdi:auto-fix
    styles: >-
      .bubble-button-card-container {
        background-color: rgba(0,0,0,0) !important;
      } 

      .bubble-button-card-container:hover {
        background-color: rgba(0,0,0,0.5) !important;
      } 

      .bubble-icon-container {
        opacity: 1;
        background-color: rgb(95, 138, 73) !important;
      } .bubble-icon {
        opacity: 1;
        color: white !important;
      }

      ${card.querySelector('.bubble-state').innerText = "Charge les nouvelles
      configurations YAML sans redémarrage."}
    button_action:
      tap_action:
        action: call-service
        navigation_path: /config/cloud/account
        service: homeassistant.reload_all
      double_tap_action:
        action: none
      hold_action:
        action: none
    show_attribute: false
    show_last_changed: false
    show_state: true
    show_name: true
    force_icon: false
    button_type: state
    sub_button: []
    entity: zone.home
  - type: custom:bubble-card
    card_type: button
    tap_action:
      action: call-service
      navigation_path: /config/integrations/dashboard
      service: homeassistant.restart
    name: Redémarrer Home Assistant
    icon: mdi:devices
    styles: >-
      .bubble-button-card-container {
        background-color: rgba(0,0,0,0) !important;
      } 

      .bubble-button-card-container:hover {
        background-color: rgba(0,0,0,0.5) !important;
      } 

      .bubble-icon-container {
        opacity: 1;
        background-color: rgb(255, 213, 0) !important;
      } .bubble-icon {
        opacity: 1;
        color: rgb(102, 85, 0) !important;
      }

      ${card.querySelector('.bubble-state').innerText = "Interrompt toutes les
      automatisations et tous les scripts en cours d'exécution."}
    entity: zone.home
    button_action:
      tap_action:
        action: call-service
        navigation_path: /config/integrations/dashboard
        service: homeassistant.restart
      double_tap_action:
        action: none
      hold_action:
        action: none
    show_attribute: false
    show_last_changed: false
    show_state: true
    show_name: true
    force_icon: false
    button_type: state
    sub_button: []
  - type: custom:bubble-card
    card_type: button
    sub_button:
      - tap_action:
          action: navigate
          navigation_path: '#param1'
        icon: mdi:chevron-up
    styles: |-

      .bubble-sub-button {
        background-color: rgba(0,0,0,0) !important;
      }
      .bubble-button-card-container {
        background-color: rgba(0,0,0,0.3) !important;
      } 
    icon: ''
    name: Options avancées
    button_type: name
    show_icon: false
    scrolling_effect: false
    button_action:
      tap_action:
        action: navigate
        navigation_path: '#param1'
  - type: custom:bubble-card
    card_type: button
    tap_action:
      action: call-service
      navigation_path: /config/integrations/dashboard
      service: hassio.host_reboot
      target: {}
    name: Redémarrer le système
    icon: mdi:power-cycle
    styles: >-
      .bubble-button-card-container {
        background-color: rgba(0,0,0,0) !important;
      } 

      .bubble-button-card-container:hover {
        background-color: rgba(0,0,0,0.5) !important;
      } 

      .bubble-icon-container {
        opacity: 1;
        background-color: rgb(186, 27, 27) !important;
      } .bubble-icon {
        opacity: 1;
        color: white !important;
      }

      ${card.querySelector('.bubble-state').innerText = "Redémarre le système
      exécutant Home Assistant et tous les modules complémentaires."}
    entity: zone.home
    button_action:
      tap_action:
        action: call-service
        navigation_path: /config/integrations/dashboard
        service: hassio.host_reboot
        target: {}
      double_tap_action:
        action: none
      hold_action:
        action: none
    show_attribute: false
    show_last_changed: false
    show_state: true
    show_name: true
    force_icon: false
    button_type: state
    sub_button: []
  - type: custom:bubble-card
    card_type: button
    tap_action:
      action: call-service
      navigation_path: /config/integrations/dashboard
      service: hassio.host_shutdown
      target: {}
    name: Arrêter le système
    icon: mdi:power
    styles: >-
      .bubble-button-card-container {
        background-color: rgba(0,0,0,0) !important;
      } 

      .bubble-button-card-container:hover {
        background-color: rgba(0,0,0,0.5) !important;
      } 

      .bubble-icon-container {
        opacity: 1;
        background-color: rgb(11, 29, 41) !important;
      } .bubble-icon {
        opacity: 1;
        color: white !important;
      }

      ${card.querySelector('.bubble-state').innerText = "Arrête le système
      exécutant Home Assistant et tous les modules complémentaires."}
    entity: zone.home
    button_action:
      tap_action:
        action: call-service
        navigation_path: /config/integrations/dashboard
        service: hassio.host_shutdown
        target: {}
      double_tap_action:
        action: none
      hold_action:
        action: none
    show_attribute: false
    show_last_changed: false
    show_state: true
    show_name: true
    force_icon: false
    button_type: state
    sub_button: []

edit1: j’ai modifié le menu « redémarrer » pour qu’il s’ouvre en deux temps
edit2: MAJ graphique : les flèches sont remplacés par des chevrons et le menu « redémarrer » peut maintenant se replier

[Clooos]

Salut tout le monde !

Désolé pour le manque de nouvelles ces derniers temps. J’ai pris quelques jours de pause dans le développement, principalement pour passer du temps de qualité avec ma femme et mon adorable fils, mais aussi pour effectuer un long test sur une nouvelle optimisation des pop-ups. Malheureusement, je ne suis pas encore satisfait des résultats

Mais je ne m’arrête pas là et j’ai une petite surprise pour vous tous ! Cela faisait un moment que je voulais lancer ma propre chaîne YouTube, axée sur des tutoriels autour de Home Assistant et Bubble Card, et c’était l’occasion parfaite. Il y a deux vidéos pour l’instant, une introduction expliquant le projet et un premier tutoriel sur comment créer votre première pop-up. Je comprends que certains d’entre vous n’ont plus besoin de ce genre d’aide, mais j’espère vraiment que vous les apprécierez. N’hésitez pas à vous abonner pour aider à donner plus de visibilité à ma chaîne. Merci d’avance ! En plus j’ai ajouté les sous-titres en FR

https://www.youtube.com/@cloooos

La prochaine vidéo portera sur les custom styles et les templates, car j’ai remarqué qu’il y a de plus en plus de questions à ce sujet. Et ne vous inquiétez pas, le développement de Bubble Card restera toujours ma priorité.

J’ai hâte d’avoir vos retours, je suis vraiment nouveau dans ce domaine !