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

Liste

Über das Pattern

Parameter und Anwendung in Nunjucks

# Parameter list(settings)
type: "string" # (default: 'ul'), 'ol'
reset: "boolean" # padding, margin, list-style-type entfernen (default: false)
spacing: "string" # Margin zwischen lis; Verfügbare Werte: 'xxs' (default: false)
layout: "string" # Listenstil; Verfügbare Werte: 'row', 'pipe', 'pipe-lg', '2col'
items: "array" # Listelemente
text: "string" # Text
url: "string" # Link
icon: "object" # Icon Object falls Icon statt Text gezeigt werden soll
attributes: "object" # HTML-Attribute (z. B.: class: wm-badge--success, wm-badge--error), sonst frei wählbar

# Anwendung
{% from "components/lists/lists.njk" import list with context %}

{{ list(settings) }}

# Parameter listRowsItem(settings)
# muss innerhalb eines listRows() Macros aufgerufen werden
settings: "object"
id: "string" # (optional) ID des Icons (siehe /look-and-feel/icons/?icon_cat=uiedv)
width: "int" # (optional) Breite
height: "int" # (optional) Höhe

# listRows()
# Wrapper für listRowsItem()

# Anwendung
{% from "components/lists/lists.njk" import listRows, listRowsItem with context %}

{% call listRows() %}
{% call listRowsItem(settings) %}
Inhalt frei wählbar
{% endcall%}
{% endcall %}

Sonstiges

Alternative Parameter und Anwendung zum Pattern „Events und andere Feeds“.

Variationen

Liste mit Links und viel Außenabstand nach unten.
Findet Verwendung in Cards.

In eigenem Fenster öffnen

Liste horizontal

HTML

Laden…

Nunjucks

Laden…

In eigenem Fenster öffnen

Liste horizontal mit Icons

HTML

Laden…

Nunjucks

Laden…

In eigenem Fenster öffnen

Liste horizontal mit Trennstrich

HTML

Laden…

Nunjucks

Laden…

In eigenem Fenster öffnen

Sprachauswahl

HTML

Laden…

Nunjucks

Laden…

In eigenem Fenster öffnen

Liste mit 2 Spalten

Ab 845px Bildschirmbreite zweispaltig

HTML

Laden…

Nunjucks

Laden…

In eigenem Fenster öffnen

Liste in Reihen

HTML

Laden…

Nunjucks

Laden…

In eigenem Fenster öffnen

Liste von A-Z

  • Aktionstheater

    Theater im Stream

  • Belvedere

    Videos, Führungen

  • Dschungel Wien

    Theater im Stream

HTML

Laden…

Nunjucks

Laden…

In eigenem Fenster öffnen

In eigenem Fenster öffnen

Liste von A-Z mit Bild

HTML

Laden…

Nunjucks

Laden…

In eigenem Fenster öffnen