Toolbar-Menü

Styleguide der Landesregierung Brandenburg

Hauptmenü

Sie sind hier: Start Komponenten

Theme "Olivgruen-394E1D" erfolgreich aktiviert

Um das Theme zu aktivieren, muss folgende CSS-Datei eingebunden werden:


<!-- CSS link (HTML header), replace with "https://style.brandenburg.de/%VERSION_ALIAS%/css/app.css" -->

<link type="text/css" rel="stylesheet" href="https://style.brandenburg.de/%VERSION_ALIAS%/css/themes/Olivgruen-394E1D.css"/>

5. Komponenten

5.1 Accordion
5.2 Bilder
5.3 Formulare
5.4 Icons
5.5 Kalender
5.6 Listen
5.7 Mega-Menü
5.8 Mobile-Menü
5.9 Meldungen
5.10 Slider
5.11 Tabellen
5.12 Tabs (Horizontal)
5.13 Tabs (Vertikal)
5.14 Teaser
5.15 Tonaufnahmen
5.16 Videos
5.17 Externe Inhalte

Platzierung

5.12 Tabs (Horizontal)

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">
    <ul class="tabs bb-tabs show-for-medium contained" data-tabs id="example-tabs">
        <li class="tabs-title bb-tabs-title is-active  panel1">
            <a title="Prignitz" href="#panel1" aria-selected="true">Prignitz</a>
        </li>
        <li class="tabs-title bb-tabs-title panel2" id="yolo">
            <a title="Oder-Spree" href="#panel2">Oder-Spree</a>
        </li>
        <li class="tabs-title bb-tabs-title panel3">
            <a title="Uckermark" href="#panel3">Uckermark</a>
        </li>
        <li class="tabs-title bb-tabs-title bb-tabs-last panel4">
            <a title="Havelland" href="#panel4">Havelland</a>
        </li>
    </ul>

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

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

                <p> ++++TEXT++++ </p>

            </div>
        </li>

        <li class="accordion-item bb-accordion-item toggleType" id="panel2">
            <a href="#" class="accordion-title hide-for-medium bb-accordion-title" role="tab"><h6>
                    Oder-Spree</h6>
            </a>
            <div class="tab-wrap 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" id="panel3">
            <a href="#" class="accordion-title hide-for-medium bb-accordion-title" role="tab"><h6>Uckermark</h6>
            </a>
            <div class="tab-wrap 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" id="panel4">
            <a href="#" class="accordion-title hide-for-medium bb-accordion-title" role="tab"><h6>Havelland</h6>
            </a>
            <div class="tab-wrap accordion-content bb-accordion-content" data-tab-content role="tabpanel">

                <p> ++++TEXT++++ </p>

            </div>
        </li>
    </ul>
</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-horizontal.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.12 Tabs (Horizontal)

Prignitz

Oder-Spree

Uckermark

Havelland