Dies ist eine alte Version des Handbuchs und der Pattern Library (v1). Bitte wechseln Sie zur aktuellen Version (v2).

Tags

Über das Pattern

Ein Tag verlinkt zu häufig gesuchten, passenden Themen und Bereichen und hebt sich durch einen pillenförmigen Rahmen von anderen Links ab.

Parameter und Anwendung in Nunjucks

# navTagLink(link, modifiers, attributes, icon_id, icon_title)
link: "string" # Link des Tags
modifiers: "array"
- "string" # zulässige Werte: amt, no-hover
attributes: "object" # HTML-Attribute (z. B.: class,...), frei wählbar
icon_id: "string" # ID des Icons (siehe /look-and-feel/icons/?icon_cat=uiedv)
icon_title: "string" # Beschreibung des Icons (im jeweiligen Zusammenhang)

{% call navTagLink(link = "#") %}
Text frei wählbar
{% endcall%}

# navTagDropdown(text, link, dropdownLink, id, items)
text: "string" # Text des Dropdown Tags
link: "string" # Link des Dropdown Tags
dropdownLink: "boolean" # Dropdown Tag auch Link als (default: false)
id: "string" # ID des Dropdown
items: "array" # Liste der enthaltenen Elemente
- text: "string" # Text frei wählbar
url: "string" # Link des Elements
selected: "boolean" # Option vorausgewählt (default: false)

{% from "components/nav/tag/nav-tag.njk" import navTagDropdown with context %}

{{ navTagDropdown(text, link, dropdownLink, id, items) }}

# navTag(nav, modifiers, items)
nav: "boolean" # Tags innerhalb eines <nav></nav> darstellen (enthält id und attribute "data-skip-link" für Skiplinks) (default: false)
modifiers: "array" # Liste von modifiers
- "string" # zulässige Werte: no-scroll, scroll
items: "array" # Liste der Navigation-Tags
- text: "string" # Text frei wählbar
url: "string" # Link des Tags

{% from "components/nav/tag/nav-tag.njk" import navTag with context %}

{{ navTag(items) }}

Variationen

Tag

HTML

Laden…

Nunjucks

Laden…

In eigenem Fenster öffnen

Tag mit Icon

Tags für Amtswege und Stadtplan haben ein Icon.

HTML

Laden…

Nunjucks

Laden…

In eigenem Fenster öffnen

Tag für Amtswege

Der Tag für Amtswege und Formulare verlinkt in den meisten Fällen zu Online-Anträgen und enthält ein entsprechendes Icon. Als Call-to-Action-Tag weist ihn sein fliederfarbener Hintergrund aus.

HTML

Laden…

Nunjucks

Laden…

In eigenem Fenster öffnen

Tag Liste

Tags brechen automatisch um, wenn nicht alle in einer Zeile Platz haben.

In eigenem Fenster öffnen

Tag Liste mit Scrollbalken

Tags brechen nicht um, wenn nicht alle in einer Zeile Platz haben.

In eigenem Fenster öffnen