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

1000.1 #permalink Vorne ausgerichtet, konstante Linie

Example

Tab I

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Tab II

Tab IIII

Markup

<section class="timeline timeline--animated timeline--left">
    <span class="timeline-axis"></span>
    <article class="timeline-box">
        <div class="timeline-left-box">
            <i class="timeline-circle"></i>
            <div class="timeline-content">
                <!-- Content -->
                <div class="pa3 pt0">
                    <div><strong>Tab I</strong></div>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
                        sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
                        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
                        gubergren,
                        no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                    <p>Lorem ipsum dolor sit amet,
                        consetetur sadipscing elitr.</p>
                </div>
                <!-- /Content -->
            </div>
        </div>
    </article>
    <article class="timeline-box">
        <div class="timeline-left-box">
            <i class="timeline-circle"></i>
            <div class="timeline-content">
                <!-- Content -->
                <div class="pa3 pt0">
                    <div><strong>Tab II</strong></div>
                    <p>Lorem ipsum dolor sit amet,
                        consetetur sadipscing elitr,
                        sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
                        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
                        gubergren,
                        no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                    <p>Lorem ipsum dolor sit amet,
                        consetetur sadipscing elitr,
                        sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
                        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
                        gubergren,
                        no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                </div>
                <!-- /Content -->
            </div>
        </div>
    </article>
    <article class="timeline-box">
        <div class="timeline-left-box">
            <i class="timeline-circle"></i>
            <div class="timeline-content">
                <!-- Content -->
                <div class="pa3 pt0">
                    <div><strong>Tab IIII</strong></div>
                    <p>Lorem ipsum dolor sit amet,
                        consetetur sadipscing elitr,
                        sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
                        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
                        gubergren,
                        no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                    <p>Lorem ipsum dolor sit amet,
                        consetetur sadipscing elitr,
                        sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
                        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
                        gubergren,
                        no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                </div>
                <!-- /Content -->
            </div>
        </div>
    </article>
</section>

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

1000.2 #permalink Zentriert ausgerichtet, Linie pro Box

Example

Tab I

Tab II

Tab III

Markup

<section class="timeline timeline--animated timeline--center">
    <article class="timeline-box">
        <span class="timeline-axis"></span>
        <div class="timeline-center-box">
            <i class="timeline-circle"></i>
            <div class="timeline-content timeline-content--left">
                <div class="pa3 pt0">
                    <div><strong>Tab I</strong></div>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
                        ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
                        dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
                        sit amet.</p>
                </div>
            </div>
            <div class="timeline-content timeline-content--right"></div>
        </div>
    </article>
    <article class="timeline-box">
        <span class="timeline-axis"></span>
        <div class="timeline-center-box">
            <i class="timeline-circle"></i>
            <div class="timeline-content timeline-content--left"></div>
            <div class="timeline-content timeline-content--right">
                <div class="pa3 pt0">
                    <div><strong>Tab II</strong></div>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
                        ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
                        dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
                        sit amet.</p>
                </div>
            </div>
        </div>
    </article>
    <article class="timeline-box">
        <span class="timeline-axis"></span>
        <div class="timeline-center-box">
            <i class="timeline-circle"></i>
            <div class="timeline-content timeline-content--left"></div>
            <div class="timeline-content timeline-content--right">
                <div class="pa3 pt0">
                    <div><strong>Tab III</strong></div>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
                        ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
                        dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
                        sit amet.</p>
                </div>
            </div>
        </div>
    </article>
    <article class="timeline-box">
        <span class="timeline-axis"></span>
        <div class="timeline-center-box">
            <i class="timeline-circle"></i>
            <div class="timeline-content timeline-content--left">
                <div class="pa3 pt0">
                    <div><strong>Tab III</strong></div>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
                        ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
                        dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
                        sit amet.</p>
                </div>
            </div>
            <div class="timeline-content timeline-content--right"></div>
        </div>
    </article>
</section>

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