Personnaliser ses cartes avec Card-mod

Entraide Home Assistant
89

Bonjour,

Pour les mushroom chips, il y a deux possibilités

  1. Au niveau du template chip avec .content
  2. au niveau de le carte custom:mushroom-chips-card avec mushroom-template-chip:nth-child(n)$: ou n est la position dans la liste
type: custom:mushroom-chips-card
chips:
  - type: template
    icon_color: red
    icon: mdi:heart-pulse
    card_mod:
      style: |
        .content {
          animation: beat 1.3s ease-out infinite both;
        }
        @keyframes beat {
          0%, 60% { transform: scale(0.8); }
          5%, 17%, 57% { transform: scale(1.1); }
          10%, 20%, 51% { transform: scale(1); }
          25%, 45% { transform: scale(0.9); }
          30%, 39% { transform: scale(1.1); }
          33% { transform: scale(1.2); }
        }
  - type: template
    icon_color: red
    icon: mdi:heart-pulse
card_mod:
  style: 
    mushroom-template-chip:nth-child(2)$: |
      ha-icon {
        animation: pulse 3s linear infinite; 
        transform-origin: 50% 60%;
      }
      @keyframes pulse {
        0% { transform: scale(1); }
        10% { transform: scale(1.1); }
        17% { transform: scale(1.05); }
        33% { transform: scale(1.25); }
        60% { transform: scale(1); }
      }

Resultat du code ci-dessus
2023-06-21_18-20-25

L’icône devrait clignoter en fonction de la position avec cette modification.

    card_mod:
      style: |
        .content {
          {% if state_attr('cover.screenlinks','current_position')|int(default=-1) > 0 and state_attr('cover.screenlinks','current_position')|int(default=-1) < 78 %}
            animation: blink 2s linear infinite; 
          {% endif %}
        } @keyframes blink {
          0% { opacity: 1; }
          50% { opacity: 0; }
          100% { opacity: 1; }
        }

Cordialement
Abel

1 « J'aime »