Affichage des données

Detail list item

Ligne de liste combinant une icône ou un avatar de début, un titre et une description, ainsi qu'une action de fin, pour les listes de notifications, les menus ou les lignes de paramètres.

Payment failedThe card ending in 4421 was declined while renewing the Growth plan.

New comment from Priya Shah“Can we split this into a separate hook before merging?” on Refactor auth middleware.

New sign-in from Chrome on WindowsCiudad de México, MX · 2 minutes ago

Weekly report is readySignups are up 12% from last week, driven mostly by referral links.

Select a notification to preview it.

Utiliser Detail list item

Ligne de liste combinant une icône ou un avatar de début, un titre et une description, ainsi qu'une action de fin, pour les listes de notifications, les menus ou les lignes de paramètres.

Testez l’aperçu avec la souris et le clavier, puis vérifiez la visibilité du focus et la mise en page sur un écran étroit. Indiquez le numéro ou l’identifiant du composant à votre agent de programmation.

Propriétés: variant, size, mediaVariant, accent

Quels frameworks sont disponibles ?

Le catalogue propose ces versions : react, vue, svelte, astro, html. L’aperçu de cette page utilise React.

Comment accéder à l’implémentation ?

Le code, les versions et les commandes d’installation sont disponibles dans le panneau ci-dessus.

Connectez votre agent

Composants proches

2052Spring Push CollapsibleAffichage des donnéesUne ligne de paramètres qui ouvre un panneau de détails et pousse les lignes situées en dessous vers le bas sur un ressort partagé au lieu d'un saut en hauteur.

2299Animated metric counterAffichage des donnéesUn grand chiffre nu qui jaillit d'une valeur de départ jusqu'à sa valeur cible au moment où il défile, dépassant légèrement avant de se stabiliser, avec des milliers de séparateurs et un suffixe facultatif.

2302Auto-Scroll Message ListAffichage des donnéesUn panneau de discussion déroulant qui reste épinglé sur le message le plus récent à moins que le lecteur ne fasse défiler vers le haut, auquel cas un bouton flottant jump-to-latest apparaît.

1917Avatar Lineup HoverAffichage des donnéesUne rangée de cercles d'avatar qui se chevauchent où le survol de l'un d'entre eux le soulève au-dessus de ses voisins et révèle une info-bulle de nom.

1918Avatar StackAffichage des donnéesUne rangée d'avatars circulaires superposés qui sépare et soulève celui sous le pointeur, révélant une info-bulle de nom au-dessus.

2113Before/After Code DiffAffichage des donnéesDeux panneaux de code côte à côte, étiquetés avant et après, avec des lignes ajoutées et supprimées teintées et un effet de mise au point en survol.