Phoenix Reisen Styleguide

1000 #permalink Timeline

Module: Mithril

Ansicht einer vertikalen Zeitleiste, die sowohl vorne als auch mittig positioniert werden kann.

Klassen, die Einfluss nehmen:

  • .timeline--animated - die Ausgabe der Linie wird animiert
  • .timeline--static - die Ausgabe der Linie wird nicht animiert
  • .timeline--left - die Linie wird links ausgegeben
  • .timeline--center - die Linie wird zentriert ausgegeben

Wenn <span class="timeline-axis"></span> direkt unter .timeline positioniert wird, zieht sich die Linie ununterbrochen durch den ganzen Bereich.

Wenn <span class="timeline-axis"></span> innerhalb der jeweiligen Box positioniert wird, gilt sie nur für diese Box. Das hat den Vorteil, dass Styles pro Box auch für die Linie gesetzt werden können - z.B. die Farbe. Dann muss bei einer Animation aber darauf geachtet werden, dass das Rendering für eine Box erst startet, wenn die vorherige Box fertig ist.

Source: src/components/_timeline.scss, line 1