Línea de tiempo
Visualización cronológica de eventos con iconos, marcas de tiempo y espacios de contenido. El estilo vertical apila eventos con una línea conectora para feeds de actividad y registros de cambios. El estilo horizontal se desplaza de izquierda a derecha para hitos de proyectos y hojas de ruta.
Vertical
Eventos apilados con línea conectora vertical, puntos de iconos y marcas de tiempo.
_timeline.html.erb
███
████████ █████████ █ ████████ █████ █████████
██████
███ ██████ ███████████████████████████████ ██████ █
█ ██████ █████████ ██████ ████████████ ███████████ ██████████ █████████████ ██████████ █████ █████ █████ ███████ ████████ ████████ ██
█ ██████ ███ ████████ ████████████ ████████ ██████ ██████ ████ ███████ ██████████ ██ █████ █████ █████ ██████ ████████ █████ ██
█ ██████ ██████ ████████ ████████████ ███ ████████ ██████ ██ ████ ████ ██████████ ████████████ █████ ███████ ████████ ██████ ██
█ ██████ ████████ █████████ ████████████ ████████ ██████ █████████ ██████████ ████ ██ ██████ █████ ██████ ████████ ████████ █
█ ██
timeline_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ █████████████ ███████████
██████ ██████ █ █
█████████ █ █████ ████████ ████████ █████ █
█
████████ █
██████████████████ █ ███████████████████
timeline_vertical_component.rb
█ ██████████████████████ ████
█████ █████████████████████████ █ ███████████████████
████████ █ █
████████ █ ████ █████████████ ███████████████████ █████ ███████████████ ████████████████████ ██
████████ █ ████ █████████████████ █████ ████████████████ █████████████████████████ ██
████████ █ ████ ███████████████ █████ ██████████████ ███████████████████████ ██
██████ █ ████ █████████████ █████ ████████████ █████████████████████ ██
█████ █ ████ ██████████████ █████ █████████████ ██████████████████████ █
████████
timeline_vertical_component.html.erb
████ ██████████ █████████████████ ███
██ ██ ████████████ ██
██████████████████████████
██ ███ ██
█
██ █████████████████████ ██ ██████ ██████ ██
██
███████ █ █████ ██ ████████████ █ █
████████████ █ ████████████ ██ █████ ██ ██████████████
██
timeline_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ █████████████ ███████████
██████ ██████ █ █
█████████ █ █████ ████████ ████████ █████ █
█
████████ █
██████████████████ █ ███████████████████
Horizontal
Línea de tiempo desplazable de izquierda a derecha para hitos y hojas de ruta.
_timeline.html.erb
███
████████ █████████ █ ██████████ █████ █████████
██████
███ ██████ █████████████████████████████████ ██████ █
█ ██████ ███████████ ████████████ █████████████ ███████████ ██████████ ███ ██████ ████████ ████████ ██
█ ██████ █████████ ████████████ ██████ ███████ ███████████ ██████████ ███ ██████ ████████ ████████ ██
█ ██████ ██████████████ ████████████ █████ ████████ ██ ███████████ ██████████ ███ ██████ ████████ ████████ ██
█ ██████ ██████████ ████████████ ███ ███ ███ ████████ ██████████ ███ ██████ ████████ ████████ ██
█ ██████ █████████ ████████████ ███████ ██████████ ██████████ ███ ██████ ████████ ████████ █
timeline_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ █████████████ ███████████
██████ ██████ █ █
█████████ █ █████ ████████ ████████ █████ █
█
████████ █
██████████████████ █ ███████████████████
timeline_horizontal_component.rb
█ ██████████████████████ ████
█████ ███████████████████████████ █ ███████████████████
████████ █ █
████████ █ ████ █████████████ ███████████████████ █████ ███████████████ ████████████████████ ██
████████ █ ████ █████████████████ █████ ████████████████ █████████████████████████ ██
████████ █ ████ ███████████████ █████ ██████████████ ███████████████████████ ██
██████ █ ████ █████████████ █████ ████████████ █████████████████████ ██
█████ █ ████ ██████████████ █████ █████████████ ██████████████████████ █
████████
timeline_horizontal_component.html.erb
████ ██████████ █████████████████ ████
████ ███████████ ███████████ ███████████
███ ██████████ █████████ ████ ██
████ ███████████████ █████ ██████ ███████ █████ ████████████ █████████████████████████
██ ██████████ ██ ██████ ██
████ ███████████████ ████ ████████ ████████████ ████ ██████████
███ ███ ██
████ ██████████ ████████████████ ████
██ ██ █████████████ ██
timeline_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ █████████████ ███████████
██████ ██████ █ █
█████████ █ █████ ████████ ████████ █████ █
█
████████ █
██████████████████ █ ███████████████████
Registro de Cambios
- v1.0.0: Initial release with vertical and horizontal styles
Obtener Acceso Completo
Desbloquea el código fuente de este componente y todos los demás. Un solo pago para acceso de por vida.
Obtener Acceso