Toolbar-Menu
 
Sie sind hier: Start Komponenten
5. Komponenten
  1. 5.1 Accordion
  2. 5.2 Pictures
  3. 5.3 Formulare
  4. 5.4 Icons
  5. 5.5 Kalender
  6. 5.6 Listen
  7. 5.7 Mega-Menü
  8. 5.8 Mobile-Menü
  9. 5.9 Meldungen
  10. 5.10 Slider
  11. 5.11 Tabellen
  12. 5.12 Tabs (Horizontal)
  13. 5.13 Tabs (Vertikal)
  14. 5.14 Teaser
  15. 5.15 Tonaufnahmen
  16. 5.16 Videos
  17. 5.17 Externe Inhalte
Platzierung
4.2.1
4.2.2
4.2.3
 
4.2.4
4.2.5
4.3.1
4.3.2
4.3.3
4.4.1
4.4.2
4.4.3
4.4.4

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

    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

  • Oder-Spree

    Commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

    Horst Krause, Schauspieler: \
  • Uckermark

    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

    Blick von einer Brücke auf eine Autobahnbaustelle
  • Havelland

    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

  • 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_3/js/vendors/2jquery.min.js"></script>
 <script type="text/javascript" src="style.brandenburg.de/2_3/js/vendors/3jquery.mobile-events.min.js"></script>
 <script type="text/javascript" src="style.brandenburg.de/2_3/js/vendors/what-input.min.js"></script>
 <script type="text/javascript" src="style.brandenburg.de/2_3/js/vendors/5foundation.min.js"></script>
 <script type="text/javascript" src="style.brandenburg.de/2_3/js/visualComponents/tabs-horizontal.js"></script>
 <script type="text/javascript" src="style.brandenburg.de/2_3/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