Linha do tempo
Exibição cronológica de eventos com ícones, timestamps e espaços de conteúdo. O estilo vertical empilha eventos com uma linha conectora para feeds de atividade e changelogs. O estilo horizontal rola da esquerda para a direita para marcos de projetos e roadmaps.
Vertical
Eventos empilhados com linha conectora vertical, pontos de ícones e timestamps.
_timeline.html.erb
███
████████ █████████ █ ████████ █████ █████████
██████
███ ██████ ███████████████████████████████ ██████ █
█ ██████ █████████ ██████ ████████████ ███████████ ██████████ █████████████ ██████████ █████ █████ █████ ███████ ████████ ████████ ██
█ ██████ ███ ████████ ████████████ ████████ ██████ ██████ ████ ███████ ██████████ ██ █████ █████ █████ ██████ ████████ █████ ██
█ ██████ ██████ ████████ ████████████ ███ ████████ ██████ ██ ████ ████ ██████████ ████████████ █████ ███████ ████████ ██████ ██
█ ██████ ████████ █████████ ████████████ ████████ ██████ █████████ ██████████ ████ ██ ██████ █████ ██████ ████████ ████████ █
█ ██
timeline_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ █████████████ ███████████
██████ ██████ █ █
█████████ █ █████ ████████ ████████ █████ █
█
████████ █
██████████████████ █ ███████████████████
timeline_vertical_component.rb
█ ██████████████████████ ████
█████ █████████████████████████ █ ███████████████████
████████ █ █
████████ █ ████ █████████████ ███████████████████ █████ ███████████████ ████████████████████ ██
████████ █ ████ █████████████████ █████ ████████████████ █████████████████████████ ██
████████ █ ████ ███████████████ █████ ██████████████ ███████████████████████ ██
██████ █ ████ █████████████ █████ ████████████ █████████████████████ ██
█████ █ ████ ██████████████ █████ █████████████ ██████████████████████ █
████████
timeline_vertical_component.html.erb
████ ██████████ █████████████████ ███
██ ██ ████████████ ██
██████████████████████████
██ ███ ██
█
██ █████████████████████ ██ ██████ ██████ ██
██
███████ █ █████ ██ ████████████ █ █
████████████ █ ████████████ ██ █████ ██ ██████████████
██
timeline_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ █████████████ ███████████
██████ ██████ █ █
█████████ █ █████ ████████ ████████ █████ █
█
████████ █
██████████████████ █ ███████████████████
Horizontal
Linha do tempo rolável da esquerda para a direita para marcos e roadmaps.
_timeline.html.erb
███
████████ █████████ █ ██████████ █████ █████████
██████
███ ██████ █████████████████████████████████ ██████ █
█ ██████ ███████████ ████████████ █████████████ ███████████ ██████████ ███ ██████ ████████ ████████ ██
█ ██████ █████████ ████████████ ██████ ███████ ███████████ ██████████ ███ ██████ ████████ ████████ ██
█ ██████ ██████████████ ████████████ █████ ████████ ██ ███████████ ██████████ ███ ██████ ████████ ████████ ██
█ ██████ ██████████ ████████████ ███ ███ ███ ████████ ██████████ ███ ██████ ████████ ████████ ██
█ ██████ █████████ ████████████ ███████ ██████████ ██████████ ███ ██████ ████████ ████████ █
timeline_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ █████████████ ███████████
██████ ██████ █ █
█████████ █ █████ ████████ ████████ █████ █
█
████████ █
██████████████████ █ ███████████████████
timeline_horizontal_component.rb
█ ██████████████████████ ████
█████ ███████████████████████████ █ ███████████████████
████████ █ █
████████ █ ████ █████████████ ███████████████████ █████ ███████████████ ████████████████████ ██
████████ █ ████ █████████████████ █████ ████████████████ █████████████████████████ ██
████████ █ ████ ███████████████ █████ ██████████████ ███████████████████████ ██
██████ █ ████ █████████████ █████ ████████████ █████████████████████ ██
█████ █ ████ ██████████████ █████ █████████████ ██████████████████████ █
████████
timeline_horizontal_component.html.erb
████ ██████████ █████████████████ ████
████ ███████████ ███████████ ███████████
███ ██████████ █████████ ████ ██
████ ███████████████ █████ ██████ ███████ █████ ████████████ █████████████████████████
██ ██████████ ██ ██████ ██
████ ███████████████ ████ ████████ ████████████ ████ ██████████
███ ███ ██
████ ██████████ ████████████████ ████
██ ██ █████████████ ██
timeline_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ █████████████ ███████████
██████ ██████ █ █
█████████ █ █████ ████████ ████████ █████ █
█
████████ █
██████████████████ █ ███████████████████
Changelog
- v1.0.0: Initial release with vertical and horizontal styles
Obter Acesso Completo
Desbloqueie o código-fonte deste componente e de todos os outros. Pagamento único para acesso vitalício.
Obter Acesso Agora