Animation Badges

Home Assistant - Tutoriels & Partages Interface / Lovelace / Thème / Custom Card
41

Salut @Loic69,

Une base pour commencer :

      - entity: binary_sensor.herbs_pc
        card_mod:
          style:
            ha-state-label-badge $ ha-label-badge $: |
              {% if is_state('binary_sensor.herbs_pc', 'on') %}
              .badge-container .label-badge .value::after {
                content: "{{ state_attr('binary_sensor.herbs_pc', 'round_trip_time_avg') }}";
                background-color: var(--ha-label-badge-color, var(--primary-color));
                color: var(--ha-label-badge-label-color, white);
                border-radius: 1em;
                padding: 9% 16% 8%;
                font-weight: 500;
                overflow: hidden;
                position: absolute;
                bottom: -1em;
                left: -0.2em;
                right: -0.2em;
                line-height: 1.05em;
                font-size: 0.5em;
              }
              {% endif %}
            .: |
              :host {
                {% if is_state('binary_sensor.herbs_pc', 'on') %}
                  --label-badge-text-color: aqua;
                {% else %}
                  --label-badge-text-color: white;
                {% endif %}
              }

En image :

peek

A toi d’affiner :wink:

N’hésites pas à aller faire un tour là, il y a plein d’exemples :

Et pour faire suite à une màj récente de card-mod, ne pas oublier de prendre en compte :