Vertikal

Gestapelte Ereignisse mit vertikaler Verbindungslinie, Icon-Punkten und Zeitstempeln.

_timeline.html.erb

███
  ████████ █████████ █ ████████ █████ █████████

  ██████
    ███ ██████ ███████████████████████████████ ██████ █
      █ ██████ █████████ ██████ ████████████ ███████████ ██████████ █████████████ ██████████ █████ █████ █████ ███████ ████████ ████████ ██
      █ ██████ ███ ████████ ████████████ ████████ ██████ ██████ ████ ███████ ██████████ ██ █████ █████ █████ ██████ ████████ █████ ██
      █ ██████ ██████ ████████ ████████████ ███ ████████ ██████ ██ ████ ████ ██████████ ████████████ █████ ███████ ████████ ██████ ██
      █ ██████ ████████ █████████ ████████████ ████████ ██████ █████████ ██████████ ████ ██ ██████ █████ ██████ ████████ ████████ █
    █ ██

Get Access to View Code

timeline_controller.js

██████ █ ██████████ █ ████ ████████████████████

██████ ███████ █████ ███████ ██████████ █
  ██████ ███████ █ █████████████ ███████████
  ██████ ██████ █ █
    █████████ █ █████ ████████ ████████ █████ █
  █

  ████████ █
    ██████████████████ █ ███████████████████

Get Access to View Code

timeline_vertical_component.rb

█ ██████████████████████ ████

█████ █████████████████████████ █ ███████████████████
  ████████ █ █
    ████████ █ ████ █████████████ ███████████████████ █████ ███████████████ ████████████████████ ██
    ████████ █ ████ █████████████████                 █████ ████████████████ █████████████████████████ ██
    ████████ █ ████ ███████████████                   █████ ██████████████ ███████████████████████ ██
    ██████   █ ████ █████████████                     █████ ████████████ █████████████████████ ██
    █████    █ ████ ██████████████                    █████ █████████████ ██████████████████████ █
  ████████

Get Access to View Code

timeline_vertical_component.html.erb

████ ██████████ █████████████████ ███
  ██ ██ ████████████ ██
    ██████████████████████████
  ██ ███ ██
█
  ██ █████████████████████ ██ ██████ ██████ ██
    ██
      ███████      █ █████ ██ ████████████ █ █
      ████████████ █ ████████████ ██ █████ ██ ██████████████
    ██

Get Access to View Code

timeline_controller.js

██████ █ ██████████ █ ████ ████████████████████

██████ ███████ █████ ███████ ██████████ █
  ██████ ███████ █ █████████████ ███████████
  ██████ ██████ █ █
    █████████ █ █████ ████████ ████████ █████ █
  █

  ████████ █
    ██████████████████ █ ███████████████████

Get Access to View Code

Optionen

Name	Typ	Standard	Beschreibung
`items` *	Array	erforderlich	Array of hashes with :title, :description, :timestamp, :icon (Symbol), :variant (Symbol)
`collapsible`	Boolean	`false`	Show older items behind 'Show more' button
`collapse_after`	Integer	`3`	Number of items to show before collapsing

Name	Typ	Standard	Beschreibung
`collapsible`	Boolean	`false`	Enable collapsing older items
`collapse_after`	Integer	`3`	Items shown before collapse

Slots

Name	Beschreibung
`items`	Timeline item slots with :title, :timestamp, :icon, :variant

Horizontal

Scrollbare Links-nach-rechts-Zeitleiste für Meilensteine und Roadmaps.

_timeline.html.erb

███
  ████████ █████████ █ ██████████ █████ █████████

  ██████
    ███ ██████ █████████████████████████████████ ██████ █
      █ ██████ ███████████    ████████████ █████████████ ███████████       ██████████ ███ ██████ ████████ ████████ ██
      █ ██████ █████████      ████████████ ██████ ███████ ███████████      ██████████ ███ ██████ ████████ ████████ ██
      █ ██████ ██████████████ ████████████ █████ ████████ ██ ███████████   ██████████ ███ ██████ ████████ ████████ ██
      █ ██████ ██████████     ████████████ ███ ███ ███ ████████            ██████████ ███ ██████ ████████ ████████ ██
      █ ██████ █████████      ████████████ ███████ ██████████              ██████████ ███ ██████ ████████ ████████ █

Get Access to View Code

timeline_controller.js

██████ █ ██████████ █ ████ ████████████████████

██████ ███████ █████ ███████ ██████████ █
  ██████ ███████ █ █████████████ ███████████
  ██████ ██████ █ █
    █████████ █ █████ ████████ ████████ █████ █
  █

  ████████ █
    ██████████████████ █ ███████████████████

Get Access to View Code

timeline_horizontal_component.rb

█ ██████████████████████ ████

█████ ███████████████████████████ █ ███████████████████
  ████████ █ █
    ████████ █ ████ █████████████ ███████████████████ █████ ███████████████ ████████████████████ ██
    ████████ █ ████ █████████████████                 █████ ████████████████ █████████████████████████ ██
    ████████ █ ████ ███████████████                   █████ ██████████████ ███████████████████████ ██
    ██████   █ ████ █████████████                     █████ ████████████ █████████████████████ ██
    █████    █ ████ ██████████████                    █████ █████████████ ██████████████████████ █
  ████████

Get Access to View Code

timeline_horizontal_component.html.erb

████ ██████████ █████████████████ ████
  ████ ███████████ ███████████ ███████████
    ███ ██████████ █████████ ████ ██
    ████ ███████████████ █████ ██████ ███████ █████ ████████████ █████████████████████████

    ██ ██████████ ██ ██████ ██
      ████ ███████████████ ████ ████████ ████████████ ████ ██████████
        ███ ███ ██
        ████ ██████████ ████████████████ ████
          ██ ██ █████████████ ██

Get Access to View Code

timeline_controller.js

██████ █ ██████████ █ ████ ████████████████████

██████ ███████ █████ ███████ ██████████ █
  ██████ ███████ █ █████████████ ███████████
  ██████ ██████ █ █
    █████████ █ █████ ████████ ████████ █████ █
  █

  ████████ █
    ██████████████████ █ ███████████████████

Get Access to View Code

Optionen

Name	Typ	Standard	Beschreibung
`items` *	Array	erforderlich	Array of hashes with :title, :description, :timestamp, :variant

Keine Optionen verfügbar.

Slots

Name	Beschreibung
`items`	Timeline item slots with :title, :timestamp, :variant

Änderungsprotokoll v1.0.0

- v1.0.0: Initial release with vertical and horizontal styles

Vertikal

Optionen

Slots

Horizontal

Optionen

Slots

Änderungsprotokoll v1.0.0

Vollzugang erhalten