Phoenix Reisen Styleguide

350 #permalink Dropdown

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Module: Mithril

Auf dem Opening liegt eine Transition. Standardmäßig sind max-height: 10rem eingestellt, die bei höherem Bedarf überschrieben werden müssten, ansonsten wird gescrollt.

Examples
Default styling

Beispiel Content

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, 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.

.dropdown--open
wenn gesetzt, dann offen, sonst geschlossen.

Beispiel Content

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, 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.

Markup
<div style="padding: 1rem;">
    <article class="dropdown [modifier class]">
        <a href="javascript:">
            <i class="fas fa-user mr1" aria-hidden="true"></i> Optionen
        </a>
        <div class="dropdown-items">
            <div key="item-0" class="dropdown-item dropdown-item-0">
                <a href="javascript:">Option eins</a>
            </div>
            <div key="item-1" class="dropdown-item dropdown-item-1">
                <a href="javascript:">Option zwei</a>
            </div>
            <div key="item-2" class="dropdown-item dropdown-item-2">
                <a href="javascript:">Option drei</a>
            </div>
        </div>
    </article>
    <div>
        <h3>Beispiel Content</h3>
        <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. 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.
        </p>
    </div>
</div>
Source: components/_dropdown.scss, line 1