Liste descriptive
Liste descriptive sémantique pour l'affichage de paires clé-valeur. Disponible en styles empilé, horizontal et rayé. Utilise les éléments HTML dl/dt/dd pour l'accessibilité.
Empilé
Libellé empilé au-dessus de la valeur, séparé par des diviseurs
_description_list.html.erb
███
███████████ ████ █████████ █ ███████ █████ █████████
██████
███ ██████ ██████████████████████████████████████ ██████ █
█ ██████ █████ ██████ ██████ █████ ████ ██
█ ██████ ████████ ██████ ██████████████████ ██
█ ██████ ███████ ██████ ███████████████ █
█ ██
██
description_list_stacked_component.html.erb
███ ██████████ █████████████████ ████
██ ██████████ ██ ██████ ██
████ █████████████
███ ██████████ █████████████ ████
███ ████████████ ██
█████
███ ██████████ █████████████ ████
███ ████████████ ██
█████
██████
description_list_stacked_component.rb
█ ██████████████████████ ████
█████ ███████████████████████████████ █ ███████████████████
███ ██████████████████ ████████████████
██████ █ █████
██████████████ █ █████████████████████ ██ ██
███
███████████ ██████
Horizontal
Libellé à gauche, valeur à droite dans une disposition côte à côte
_description_list.html.erb
███
███████████ ████ █████████ █ ██████████ █████ █████████
██████
███ ██████ █████████████████████████████████████████ ██████ █
█ ██████ █████ ██████ ██████ █████ ████ ██
█ ██████ ████████ ██████ ██████████████████ ██
█ ██████ ███████ ██████ ███████████████ █
██ ████████████ ███████ ██
██
description_list_horizontal_component.rb
█ ██████████████████████ ████
█████ ██████████████████████████████████ █ ███████████████████
███ ██████████████████ ████████████ ████████ ████████████████
██████ █ █████
████████████ █ ███████████
██████████████ █ █████████████████████ ██ ██
███
███████████ ██████
description_list_horizontal_component.html.erb
███ ██████████ █████████████████ ████
██ ██████████ ██ ██████ ██
████ ███████████ ██████
███ ██████████ █████████████ ████
███ ████████████ ██
█████
███ ██████████ █████████████ ████
███ ████████████ ██
█████
██████
Rayé
Arrière-plans de lignes alternés pour une meilleure lisibilité
_description_list.html.erb
███
███████████ ████ █████████ █ ███████ █████ █████████
██████
███ ██████ ██████████████████████████████████████ ██████ █
█ ██████ █████ ██████ ██████ █████ ████ ██
█ ██████ ████████ ██████ ██████████████████ ██
█ ██████ ███████ ██████ ███████████████ █
██ ████████████ ███████ ██
██
description_list_striped_component.html.erb
███ ██████████ █████████████████ ████
██ █████████████████████ ██ ██████ ██████ ██
████ ██████████ ██████████████████ ████
███ ██████████ █████████████ ████
███ ████████████ ██
█████
███ ██████████ █████████████ ████
███ ████████████ ██
█████
██████
description_list_striped_component.rb
█ ██████████████████████ ████
█████ ███████████████████████████████ █ ███████████████████
███ ██████████████████ ████████████ ████████ ████████████████
██████ █ █████
████████████ █ ███████████
██████████████ █ █████████████████████ ██ ██
███
███████████ ██████
Journal des modifications
- Initial release with stacked, horizontal, and striped styles
- Semantic dl/dt/dd HTML
- Dark mode support
Obtenir l'accès complet
Débloquez le code source de ce composant et de tous les autres. Paiement unique pour un accès à vie.
Obtenir l'accès maintenant