Reiter - Handbuch wien.gv.at

Über das Pattern

Reiter sind nur dann geeignet, wenn die Inhalte nicht sehr wichtig sind. Zum einen bekommen Inhalte hinter Reitern weniger Aufmerksamkeit, zum anderen werden sie von der Google-Suche wenig bis gar nicht berücksichtigt.

JavaScript

Anwendung

import { initTabs } from './tabs.js';
initTabs()

Parameter und Anwendung in Nunjucks

# Parameter tabs(items, id)
items: "array" # Liste der Tabs (Anzahl muss mit tabContent Anzahl übereinstimmen)
  - title: "string" # Tab Titel frei wählbar
    active: "boolean" # setzt aktiven Tab
    class: "string" # add class to tab-item
id: "string" # ID des Tabs

# Parameter tabContent(title, id) # Inhalt des jeweiligen Tabs
title: "string" # Titel des jeweiligen Tab (wird versteckt dargestellt)
id: "string" # id für die Section (default: slug des Titels, optional)
class: "string" # add class to tab-content

# Anwendung
## Die Javascript-Datei "tabs.js" muss eingebunden sein.

{% from "components/tabs/tabs.njk" import tabs, tabContent with context %}

{% call tabs(items, id, class)%}
  {% call tabContent(title, class) %}
    Inhalt frei wählbar
  {% endcall%}
{% endcall %}

Variationen

Reiter Standard

Direkte Vorschau nicht verfügbar.
„Reiter Standard“ in eigenem Tab öffnen.

HTML

Laden…

Nunjucks

Laden…