Chronologie
Affichage chronologique d'événements avec icônes, horodatages et emplacements de contenu. Le style vertical empile les événements avec une ligne de connexion pour les fils d'activité et les journaux de modifications. Le style horizontal défile de gauche à droite pour les jalons de projet et les feuilles de route.
Vertical
Événements empilés avec ligne de connexion verticale, points d'icônes et horodatages.
_timeline.html.erb
███
████████ █████████ █ ████████ █████ █████████
██████
███ ██████ ███████████████████████████████ ██████ █
█ ██████ █████████ ██████ ████████████ ███████████ ██████████ █████████████ ██████████ █████ █████ █████ ███████ ████████ ████████ ██
█ ██████ ███ ████████ ████████████ ████████ ██████ ██████ ████ ███████ ██████████ ██ █████ █████ █████ ██████ ████████ █████ ██
█ ██████ ██████ ████████ ████████████ ███ ████████ ██████ ██ ████ ████ ██████████ ████████████ █████ ███████ ████████ ██████ ██
█ ██████ ████████ █████████ ████████████ ████████ ██████ █████████ ██████████ ████ ██ ██████ █████ ██████ ████████ ████████ █
█ ██
timeline_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ █████████████ ███████████
██████ ██████ █ █
█████████ █ █████ ████████ ████████ █████ █
█
████████ █
██████████████████ █ ███████████████████
timeline_vertical_component.rb
█ ██████████████████████ ████
█████ █████████████████████████ █ ███████████████████
████████ █ █
████████ █ ████ █████████████ ███████████████████ █████ ███████████████ ████████████████████ ██
████████ █ ████ █████████████████ █████ ████████████████ █████████████████████████ ██
████████ █ ████ ███████████████ █████ ██████████████ ███████████████████████ ██
██████ █ ████ █████████████ █████ ████████████ █████████████████████ ██
█████ █ ████ ██████████████ █████ █████████████ ██████████████████████ █
████████
timeline_vertical_component.html.erb
████ ██████████ █████████████████ ███
██ ██ ████████████ ██
██████████████████████████
██ ███ ██
█
██ █████████████████████ ██ ██████ ██████ ██
██
███████ █ █████ ██ ████████████ █ █
████████████ █ ████████████ ██ █████ ██ ██████████████
██
timeline_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ █████████████ ███████████
██████ ██████ █ █
█████████ █ █████ ████████ ████████ █████ █
█
████████ █
██████████████████ █ ███████████████████
Horizontal
Chronologie défilable de gauche à droite pour les jalons et feuilles de route.
_timeline.html.erb
███
████████ █████████ █ ██████████ █████ █████████
██████
███ ██████ █████████████████████████████████ ██████ █
█ ██████ ███████████ ████████████ █████████████ ███████████ ██████████ ███ ██████ ████████ ████████ ██
█ ██████ █████████ ████████████ ██████ ███████ ███████████ ██████████ ███ ██████ ████████ ████████ ██
█ ██████ ██████████████ ████████████ █████ ████████ ██ ███████████ ██████████ ███ ██████ ████████ ████████ ██
█ ██████ ██████████ ████████████ ███ ███ ███ ████████ ██████████ ███ ██████ ████████ ████████ ██
█ ██████ █████████ ████████████ ███████ ██████████ ██████████ ███ ██████ ████████ ████████ █
timeline_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ █████████████ ███████████
██████ ██████ █ █
█████████ █ █████ ████████ ████████ █████ █
█
████████ █
██████████████████ █ ███████████████████
timeline_horizontal_component.rb
█ ██████████████████████ ████
█████ ███████████████████████████ █ ███████████████████
████████ █ █
████████ █ ████ █████████████ ███████████████████ █████ ███████████████ ████████████████████ ██
████████ █ ████ █████████████████ █████ ████████████████ █████████████████████████ ██
████████ █ ████ ███████████████ █████ ██████████████ ███████████████████████ ██
██████ █ ████ █████████████ █████ ████████████ █████████████████████ ██
█████ █ ████ ██████████████ █████ █████████████ ██████████████████████ █
████████
timeline_horizontal_component.html.erb
████ ██████████ █████████████████ ████
████ ███████████ ███████████ ███████████
███ ██████████ █████████ ████ ██
████ ███████████████ █████ ██████ ███████ █████ ████████████ █████████████████████████
██ ██████████ ██ ██████ ██
████ ███████████████ ████ ████████ ████████████ ████ ██████████
███ ███ ██
████ ██████████ ████████████████ ████
██ ██ █████████████ ██
timeline_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ █████████████ ███████████
██████ ██████ █ █
█████████ █ █████ ████████ ████████ █████ █
█
████████ █
██████████████████ █ ███████████████████
Journal des modifications
- v1.0.0: Initial release with vertical and horizontal styles
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