Zur besseren Strukturierung und Ordnung von Content kann die Tab-Komponente verwendet werden. Der Inhalt ist frei wählbar. Der aktive Tab-Reiter besitzt eine Linie in Grundfarbe. Die Inhalte der einzelnen Tabs müssen zeitlich vor den Medien geladen werden. Die Tab-Komponente kann horizontal verwendet werden, aber auch vertikal. Die vertikale Anordnung bietet sich für größere Sortierungen an, bspw. das komplette Alphabet o.ä.

Prignitz
Oder-Spree
Uckermark
Havelland

Quelltext

Quelltext kopieren

<section class="tabs-to-accordions-vertical">
    <div class="medium-3 columns bb-vertical-tabs-column-right">
        <ul class="tabs show-for-medium bb-vertical-tabs vertical contained" id="example-tabs" data-tabs>


            <li class="tabs-title bb-vertical-tabs-title bb-vertical-tabs-title-first is-active  panelv1">
                <a title="Prignitz" href="#panelv1" aria-selected="true">Prignitz</a>
            </li>

            <li class="tabs-title bb-vertical-tabs-title panelv2" id="yolo">
                <a title="Oder-Spree" href="#panelv2">Oder-Spree</a>
            </li>
            <li class="tabs-title bb-vertical-tabs-title panelv3">
                <a title="Uckermark" href="#panelv3">Uckermark</a>
            </li>
            <li class="tabs-title bb-vertical-tabs-title panelv4">
                <a title="Havelland" href="#panelv4">Havelland</a>
            </li>
        </ul>
    </div>

    <div class="medium-9 columns bb-vertical-tabs-column-left">

        <ul class="accordion bb-accordion bb-accordion-vertical responsive-tabs-vertical"
                  data-allow-all-closed="true" data-accordion  data-tabs-content="example-tabs" role="tablist">

            <li class="accordion-item bb-accordion-item toggleType-vertical is-active" id="panelv1">
                <a href="#" class="accordion-title hide-for-medium bb-accordion-title" role="tab"><h6>Prignitz</h6></a>
                <div class="tab-wrap-vertical accordion-content bb-accordion-content" data-tab-content role="tabpanel">

                    <p> ++++TEXT++++ </p>
                </div>
            </li>

            <li class="accordion-item bb-accordion-item toggleType-vertical" id="panelv2">
                <a href="#" class="accordion-title hide-for-medium bb-accordion-title" role="tab"><h6>Oder-Spree</h6>
                </a>
                <div class="tab-wrap-vertical accordion-content bb-accordion-content" data-tab-content role="tabpanel">

                    <p> ++++TEXT++++ </p>
                    <img alt="Horst Krause, Schauspieler: \"In Brandenburg bin ich auch zu Hause.
                        Es grüßt Sie herzlich Polizeihauptmeister Krase.\"" title="Horst Krause - Schauspieler"
                        src="style.brandenburg.de/img/slider/horst_krause-930x340.jpg">
                </div>
            </li>

            <li class="accordion-item bb-accordion-item toggleType-vertical" id="panelv3">
                <a href="#" class="accordion-title hide-for-medium bb-accordion-title" role="tab"><h6>Uckermark</h6></a>
                <div class="tab-wrap-vertical accordion-content bb-accordion-content" data-tab-content role="tabpanel">

                    <p> ++++TEXT++++ </p>
                    <a href="#" title="Bild vergrößern"
                       data-featherlight="bild_groß.jpg"><img
                            alt="Alternativer Bild-Text"
                            title="Titel zum Bild"
                            class="bb-image"
                            src="bild_kleiner.jpg">
                    </a>

                </div>
            </li>

            <li class="accordion-item bb-accordion-item toggleType-vertical" id="panelv4">
                <a href="#" class="accordion-title hide-for-medium bb-accordion-title" role="tab"><h6>Havelland</h6></a>
                <div class="tab-wrap-vertical accordion-content bb-accordion-content" data-tab-content role="tabpanel">

                    <p> ++++TEXT++++ </p>
                </div>
            </li>
        </ul>
    </div>
</section>

Benötigtes Javascript

<script type="text/javascript" src="style.brandenburg.de/2_4/js/vendors/2jquery.min.js"></script>
 <script type="text/javascript" src="style.brandenburg.de/2_4/js/vendors/3jquery.mobile-events.min.js"></script>
 <script type="text/javascript" src="style.brandenburg.de/2_4/js/vendors/what-input.min.js"></script>
 <script type="text/javascript" src="style.brandenburg.de/2_4/js/vendors/5foundation.min.js"></script>
 <script type="text/javascript" src="style.brandenburg.de/2_4/js/visualComponents/tabs-vertical.js"></script>
 <script type="text/javascript" src="style.brandenburg.de/2_4/js/finalApp.js"></script>

Aufbau

Das aktive Element besitzt eine Linie oben/links in Grundfarbe.
Der Außenrahmen ist in HELLGRAU einzufärben.

Spezifische Anforderungen

Die Inhalte der einzelnen Tabs sollten erst bei der Anzeige des Tabs geladen werden.

Barrierefreiheit

keine Beschränkungen

Aktionsverhalten

Die Überschriften der Tabs (Tab-Steuerelemente) stellen klickbare Bereiche dar (Buttons).
Die Komponente zeigt erwartungsfonform stets nur ein Tab (Toggle-Effekt).

Responsive Design

Das Verhalten des Inhalts der Tabs folgt den allgemeinen Regeln für Inhaltsbereiche.
Die Funktionalität der Tab-Steuerelemente sollte auf kleinen Geräten durch die der Accordion-Komponente ersetzt werden.

Seite drucken

5. Komponenten

Platzierung

5.13 Tabs (Vertikal)

Prignitz

Oder-Spree

Uckermark

Havelland