<tyro-ui-bento-card>
Bento Card
Carte conteneur flexible pour les dashboards. Affiche un header optionnel (icône, label, titre) et projette n'importe quel contenu via
ng-content. Supporte les tailles, l'effet hover et la bordure gradient animée. Aperçu - tailles
size='small' | 'medium' | 'large'
PETIT
Carte compacte
Padding réduit pour les layouts denses.
MOYEN
Carte par défaut
Padding standard - taille par défaut.
GRAND
Carte spacieuse
Plus de padding pour du contenu aéré.
Aperçu - effets
[hoverable] | [gradient]
Hoverable
Survolez pour voir l'ombre + l'effet de soulèvement.
Bordure gradient
Survolez pour voir la bordure gradient animée.
Aperçu - slot action header
[tyro-header-action]
VUE D'ENSEMBLE
Analytiques
Le slot nommé [tyro-header-action] projette du contenu en haut à droite du header.
Inputs
Propriété | Type | Défaut | Description |
|---|---|---|---|
[title?] | string | - | Titre affiché dans le header de la carte |
[label?] | string | - | Surtitre affiché au-dessus du titre (en majuscules) |
[icon?] | string | - | Classe remix-icon affichée dans le header |
[iconImg?] | string | - | URL image remplaçant l'icône dans le header |
[size] | 'small' | 'medium' | 'large' | 'medium' | Taille de la carte - affecte le padding et les gaps internes |
[hoverable] | boolean | false | Active l'effet hover (ombre + léger translateY) |
[gradient] | boolean | false | Active la bordure gradient animée Tyrolium au survol |
Slots de contenu
Slot | Description |
|---|---|
ng-content (défaut) | Corps de la carte - accepte n'importe quel contenu |
[tyro-header-action] | Contenu projeté en haut à droite du header (bouton, badge, etc.) |