Exemples issus du forum

Ces exemples proviennent de la publication Styling the card d’Ildar_Gabdullin sur le forum de la communauté Home Assistant. Les images sont stockées localement dans cette documentation ; le code est associé à l’exemple correspondant du forum.

Exemples externes

Ces exemples sont extraits du forum et peuvent nécessiter des ajustements en fonction de la version de Home Assistant, de la version de flex-table-card, ou d'autres cartes utilisées, telles que auto-entities et card_mod.

Versions UIX

La troisième colonne propose une variante UIX du code. Dans ces versions, seul le composant de style est remplacé : card_mod: devient uix:, tandis que la configuration native css: de la carte flex-table-card demeure inchangée. ::: :::

1. Remplissage par des zéros (zero padding) et bordure de tableau colorée

Image

Code

`

Version UIX

`

`

2. Sans bordures internes

Image

Code

`

Version UIX

`

`

3. Cadres internes personnalisés : En-têtes et cellules

Image

Code

`

Version UIX

`

`

4. Cadres internes personnalisés : cellules de tableau uniquement

Image

Code

`

Version UIX

`

`

5. Cadres internes personnalisés : Bord supérieur de la ligne

Image

Code

`

Version UIX

`

`

6. Cadres internes personnalisés : Séparateurs de colonnes

Image

Code

`

Version UIX

`

`

7. Rétablir le remplissage (padding) via card_mod

Image

Code

`

Version UIX

`

`

8. Barre de défilement horizontale

Image

Code

`

Version UIX

`

`

9. Barre de défilement horizontale et verticale

Image

Code

`

Version UIX

`

`

10. En-tête : différents styles

Image

Code

`

Version UIX

`

`

11. Masquer les en-têtes

Image

Code

`

Version UIX

`

`

12. Masquer partiellement l'en-tête

Image

Code

`

Version UIX

`

`

13. Résumer visuellement les en-têtes

Image

Code

`

Version UIX

`

`

14. Lignes : couleur d'arrière-plan uniforme

Image

Code

`

Version UIX

`

`

15. Lignes : styles alternés et individuels

Image

Code

`

Version UIX

`

`

16. Lignes : Style au survol

Image

Code

`

Version UIX

`

`

17. Colonnes : différents styles

Image

Code

`

Version UIX

`

`

18. Ajustement de la largeur des colonnes

Image

Code

`

Version UIX

`

`

19. Cellules : définition du style d'une ligne et d'une cellule individuelles

Image

Code

`

Version UIX

`

`

20. Style dynamique basé sur l'état de l'entité, variante 1

Image

Code

`

Version UIX

`

`

21. Style dynamique via l'état de l'entité, variante 2

Image

Code

`

Version UIX

`

`

22. Contenu de cellule conditionnel avec « modify », « div » et « span »

Image

Code

`

Version UIX

`

`

23. Rendre le texte des cellules de tableau sélectionnable

Image

Code

`

Version UIX

`

`