Zum Inhalt springen
Handbuch wien.gv.at
Startseite wien.gv.at

Pattern-Anwendung

Beim Design der wien.gv.at Pattern-Library haben wir stark auf die Prinzipien "Content-First" und "Progressive-Enhancement" gesetzt. JavaScript ist, bis auf wenige Ausnahmen, keine Voraussetzung für die Darstellung von Inhalten. Es dient lediglich zur Erweiterung der Kernfunktionalität.

Das lässt sich sehr gut anhand des Patterns "Anker" zeigen: Die Basis ist eine einfache Überschrift. 

<h2>Trinkbrunnen</h2>

Um die Funktionalität der Überschrift zu erweitern, können Sie sie in dem wm-anchor-Element schachteln. Dafür muss die passende JavaScript-Datei eingebunden werden.

<script src="./wienermelange/assets/js/components/Anchor/Anchor.js" type="module"></script>
<wm-anchor>
  <h2>Trinkbrunnen</h2>
</wm-anchor>

Dabei passieren 2 grundlegende Dinge:

  1. Aus dem Text der Überschrift wird eine maschinenlesbare ID erzeugt und als id-Attribut an das Element gehängt.
  2. In das Shadow-DOM des Elements wird ein Link hinzugefügt, der zu dem Anker führt und bei Click automatisch die URL kopiert.

Der im Browser interpretierte Code sieht dann so aus:

<wm-anchor id="trinkbrunnen">
  #shadow-root
                                    |
  <slot></slot>
  |
  <a href="#trinkbrunnen" aria-label="Link zur Überschrift " Trinkbrunnen" kopieren">
    |
    <wm-icon iconid="link"></wm-icon>
    |
  </a>
  <h2>Trinkbrunnen</h2>
</wm-anchor>

Sollte JavaScript deaktiviert sein oder aus einem sonstigen Grund nicht funktionieren, wird trotzdem immer noch die Überschrift angezeigt.

Pattern-Dokumentation

Jedes Pattern kommt mit einer eigenen Seite, auf der es in den meisten Fällen eine Beschreibung, Anwendungsbeispiele mit Vorschau und Code-Ansicht und Spezifikation gibt. Diese sind in folgende Reiter aufgeteilt (Beispiel "Akkordeon" ):

Reiter "Varianten"

Der Varianten-Tab zeigt gängige Variationen und Best Practices des Patterns. Er bietet eine Code-Ansicht, die die Implementierung der jeweiligen Variante verdeutlicht. Zusätzlich können Sie hier verschiedene Kombinationen und Einsatzmöglichkeiten der Patterns sehen.

Beispiel Akkordeon:

Ein bestimmtes Element ist geöffnet

 Vorschau

Einzelförderung

Gesamtförderung

Kunstankauf

Arbeitsstipendium

Start-Atelier

 Code 
<wm-accordion open="2">
        <wm-accordion-heading>
          <h3>Einzelförderung</h3>
        </wm-accordion-heading>
        <wm-accordion-content>
          <wm-list gap="xxs">
            <ul>
              <li>Einreichtermine:
                <ul>
                  <li>1. bis 30. April: für Vorhaben mit Beginn zwischen Juli und Dezember des laufenden Jahres</li>
                  <li>1. bis 31. Oktober: für Vorhaben im Folgejahr</li>
                </ul>
              </li>
              <li>Richtlinien:
                <a href="#">Bildende Kunst und Medienkunst - Förderrichtlinien</a>
              </li>
              <li>Antrag:
                <a href="#">Einzel- und Gesamtförderung im Bereich Bildende Kunst und Medienkunst - Antrag</a>
              </li>
            </ul>
          </wm-list>
        </wm-accordion-content>
        <wm-accordion-heading>
          <h3>Gesamtförderung</h3>
        </wm-accordion-heading>
        <wm-accordion-content>
          <wm-list gap="xxs">
            <ul>
              <li>Einreichtermine:
                <ul>
                  <li>1. bis 31. Oktober: für Vorhaben im Folgejahr</li>
                </ul>
              </li>
              <li>Richtlinien:
                <a href="#">Bildende Kunst und Medienkunst - Förderrichtlinien</a>
              </li>
              <li>Antrag:
                <a href="#">Einzel- und Gesamtförderung im Bereich Bildende Kunst und Medienkunst - Antrag</a>
              </li>
            </ul>
          </wm-list>
        </wm-accordion-content>
        <wm-accordion-heading>
          <h3>Kunstankauf</h3>
        </wm-accordion-heading>
        <wm-accordion-content>
          <wm-list gap="xxs">
            <ul>
              <li>Einreichtermine: 1. bis 31. Jänner</li>
              <li>Richtlinien:
                <a href="#">Kunstankauf - Richtlinien</a>
              </li>
              <li>Antrag:
                <a href="#">Ankauf von Kunstwerken - Förderantrag</a>
              </li>
            </ul>
          </wm-list>
        </wm-accordion-content>
        <wm-accordion-heading>
          <h3>Arbeitsstipendium</h3>
        </wm-accordion-heading>
        <wm-accordion-content>
          <wm-list gap="xxs">
            <ul>
              <li>Einreichtermine: 1. bis 30. Juni</li>
              <li>Richtlinien:
                <a href="#">Arbeitsstipendium Bildende Kunst und Medienkunst - Richtlinien</a>
              </li>
              <li>Antrag:
                <a href="#">Arbeitsstipendium Bildende Kunst und Medienkunst - Förderantrag</a>
              </li>
            </ul>
          </wm-list>
        </wm-accordion-content>
        <wm-accordion-heading>
          <h3>Start-Atelier</h3>
        </wm-accordion-heading>
        <wm-accordion-content>
          <wm-list gap="xxs">
            <ul>
              <li>Einreichtermine: Derzeit sind keine Einreichungen möglich.</li>
              <li>Richtlinien:
                <a href="#">Bewerbung um ein START-Atelier - Richtlinien</a>
              </li>
              <li>Antrag:
                <a href="#">Bewerbung um ein START-Atelier - Förderantrag</a>
              </li>
              <li>Abrechnung: Keine Abrechnung erforderlich</li>
            </ul>
          </wm-list>
        </wm-accordion-content>
      </wm-accordion>

Reiter "Dev"

Der Dev-Reiter bietet zusätzliche Beispiele, die besonders für Entwickler*innen relevant sind. Hier werden Anwendungen von Attributen, Kombinationen mit anderen Patterns sowie der Einsatz von Events und Methoden demonstriert.

Viele Patterns bieten innerhalb dieses Reiters eine interaktive Demo, in der Sie die wichtigsten Attribute ausprobieren und deren Auswirkungen direkt sehen können.

Beispiel Akkordeon:

Events

 Vorschau

Einzelförderung

Gesamtförderung

Kunstankauf

Arbeitsstipendium

Start-Atelier
Code 
<wm-accordion class="events">
        <wm-accordion-heading>
          <h3>Einzelförderung</h3>
        </wm-accordion-heading>
        <wm-accordion-content>
          <wm-list gap="xxs">
            <ul>
              <li>Einreichtermine:
                <ul>
                  <li>1. bis 30. April: für Vorhaben mit Beginn zwischen Juli und Dezember des laufenden Jahres</li>
                  <li>1. bis 31. Oktober: für Vorhaben im Folgejahr</li>
                </ul>
              </li>
              <li>Richtlinien:
                <a href="#">Bildende Kunst und Medienkunst - Förderrichtlinien</a>
              </li>
              <li>Antrag:
                <a href="#">Einzel- und Gesamtförderung im Bereich Bildende Kunst und Medienkunst - Antrag</a>
              </li>
            </ul>
          </wm-list>
        </wm-accordion-content>
        <wm-accordion-heading>
          <h3>Gesamtförderung</h3>
        </wm-accordion-heading>
        <wm-accordion-content>
          <wm-list gap="xxs">
            <ul>
              <li>Einreichtermine:
                <ul>
                  <li>1. bis 31. Oktober: für Vorhaben im Folgejahr</li>
                </ul>
              </li>
              <li>Richtlinien:
                <a href="#">Bildende Kunst und Medienkunst - Förderrichtlinien</a>
              </li>
              <li>Antrag:
                <a href="#">Einzel- und Gesamtförderung im Bereich Bildende Kunst und Medienkunst - Antrag</a>
              </li>
            </ul>
          </wm-list>
        </wm-accordion-content>
        <wm-accordion-heading>
          <h3>Kunstankauf</h3>
        </wm-accordion-heading>
        <wm-accordion-content>
          <wm-list gap="xxs">
            <ul>
              <li>Einreichtermine: 1. bis 31. Jänner</li>
              <li>Richtlinien:
                <a href="#">Kunstankauf - Richtlinien</a>
              </li>
              <li>Antrag:
                <a href="#">Ankauf von Kunstwerken - Förderantrag</a>
              </li>
            </ul>
          </wm-list>
        </wm-accordion-content>
        <wm-accordion-heading>
          <h3>Arbeitsstipendium</h3>
        </wm-accordion-heading>
        <wm-accordion-content>
          <wm-list gap="xxs">
            <ul>
              <li>Einreichtermine: 1. bis 30. Juni</li>
              <li>Richtlinien:
                <a href="#">Arbeitsstipendium Bildende Kunst und Medienkunst - Richtlinien</a>
              </li>
              <li>Antrag:
                <a href="#">Arbeitsstipendium Bildende Kunst und Medienkunst - Förderantrag</a>
              </li>
            </ul>
          </wm-list>
        </wm-accordion-content>
        <wm-accordion-heading>
          <h3>Start-Atelier</h3>
        </wm-accordion-heading>
        <wm-accordion-content>
          <wm-list gap="xxs">
            <ul>
              <li>Einreichtermine: Derzeit sind keine Einreichungen möglich.</li>
              <li>Richtlinien:
                <a href="#">Bewerbung um ein START-Atelier - Richtlinien</a>
              </li>
              <li>Antrag:
                <a href="#">Bewerbung um ein START-Atelier - Förderantrag</a>
              </li>
              <li>Abrechnung: Keine Abrechnung erforderlich</li>
            </ul>
          </wm-list>
        </wm-accordion-content>
      </wm-accordion>
      <div class="events-output" role="status"></div>
      <script>
        const events = document.querySelector(".events");
        const output = document.querySelector(".events-output");
        events.addEventListener("wm-collapsed", (e) => {
          output.innerText = `Event: ${
            e.type
          } ID: ${
            e.detail.id
          } Index: ${
            e.detail.index
          }`;
        });
        events.addEventListener("wm-expanded", (e) => {
          output.innerText = `Event: ${
            e.type
          } ID: ${
            e.detail.id
          } Index: ${
            e.detail.index
          }`;
        });
      </script>

Reiter "API"

Je nach Komplexität des Patterns verfügt es über mehr oder weniger Möglichkeiten, angepasst zu werden. Im Reiter "API" sind diese dokumentiert und wie folgt aufgeteilt:

Eigenschaften

Hier werden alle Attribute inklusive Kurzbeschreibung, Typ und Default-Wert der Web-Component aufgelistet.

Beispiel Akkordeon:

Eigenschaften
Eigenschaft Beschreibung Werte Default
open Nummer des zu öffnenden Panels angeben, beginnend bei eins (1). Es kann nur ein Wert übergeben werden. Number leer
single Attribut angeben, damit immer nur ein Panel gleichzeitig geöffnet wird (übertrumpft expanded). Boolean false
expanded Alle geöffnet anzeigen. Boolean false

Die Eigenschaft open erwartet einen numerischen Wert und die Eigenschaft single gar keinen, weil es ein boolsches Attribut ist. 

<wm-accordion single open="1">
  …
</wm-accordion>

Slots

Mehr Infos Für das Pattern "Akkordeon" gibt es einen Slot, mit dem Inhalte übergeben werden.

Beispiel Akkordeon:

Name Beschreibung
default Nimmt Paare von wm-accordion-heading und wm-accordion-content Elementen auf 

<wm-accordion single open="1">
  <wm-accordion-heading>
    <h3>
      Ist eine Mitgliedschaft beim Vorteilsclub der Stadt Wien mit Kosten verbunden?
    </h3>
  </wm-accordion-heading>
  <wm-accordion-content>
    <p>Nein. Die Mitgliedschaft im Vorteilsclub der Stadt Wien ist absolut kostenlos und ohne Bindung.</p>
  </wm-accordion-content>
</wm-accordion>

Ein Pattern kann auch über mehrere benannte Slots verfügen. Beispiel wm-card:

<wm-card size="m" blocklink>
  <h3 slot="heading">
    Überschrift
  </h3>
  <div slot="precontent">
    <wm-chip color="flieder" size="s">Kategorie</wm-chip>
  </div>
  <img slot="media" src="/images/pattern/modal/modal1.jpg" alt=""/>
  <div slot="content">
    <p>
      Beispiel: Card mit mehreren benannten Slots
    </p>
  </div>
  <div slot="postcontent" class="wm-u-tar">
    <wm-cta>
      <a href="#">Link</a>
    </wm-cta>
  </div>
</wm-card>

Überschrift

Kategorie

Beispiel: Card mit mehreren benannten Slots

Link

Methoden

Unter Methoden sind alle öffentlichen JavaScript-Methoden für das Pattern dokumentiert.
Die expand-Methode öffnet ein Panel. Sie nimmt einen Wert, der entweder ein Index, eine ID oder ein DOM-Element ist.

Beispiel Akkordeon:

Eigenschaft Optionen Argumente
_expandContent Akkordeon wurde geöffnet
_collapseContent Akkordeon wurde geschlossen
expand Panel öffnen index (number)
collapse Panel schließen index (number)
 

<button class="expandButtonNameId">Zweites Element öffnen</button>
<button class="collapseButtonNameId">Zweites Element schließen</button>
<wm-accordion id="accodionNameId">
  <wm-accordion-heading>
    <h3>
      Wer kann Mitglied im Vorteilsclub der Stadt Wien werden?
    </h3>
  </wm-accordion-heading>
  <wm-accordion-content>
    <p>Jede natürliche Person mit Wohnsitz in Österreich, die das 16. Lebensjahr vollendet hat.</p>
  </wm-accordion-content>
  <wm-accordion-heading>
    <h3>
      Wie erhalte ich meine Vorteilsclub der Stadt Wien-Karte?
    </h3>
  </wm-accordion-heading>
  <wm-accordion-content>
    <p>Einfach Profil vervollständigen. Sobald wir alle nötigen Informationen erhalten haben, wird deine digitale und
      personalisierte Vorteilsclub der Stadt Wien-Karte in deinem Profil angezeigt. Die digitale Mitgliedskarte ist sofort
      einsatzbereit.</p>
  </wm-accordion-content>
  <wm-accordion-heading>
    <h3>
      Was passiert mit meinen Daten?
    </h3>
  </wm-accordion-heading>
  <wm-accordion-content>
    <p>Um die Angebote des Vorteilsclubs der Stadt Wien rundum nutzen zu können, benötigen wir ein paar aktuelle
      Informationen zu deiner Person. Der Schutz deiner persönlichen Daten hat für uns dabei oberste Priorität! Detaillierte
      Informationen zum Thema Datenschutz findest du hier.</p>
    <p>Sollten sich deine Daten ändern, etwa durch einen Umzug, kannst du diese jederzeit selbst in deinem Profil anpassen.</p>
  </wm-accordion-content>
</wm-accordion>
<script>
  const accodionNameId = document.querySelector('.accodionNameId');
  const expandButtonNameId = document.querySelector('.expandButtonNameId');
  const collapseButtonNameId = document.querySelector('.collapseButtonNameId');
  expandButtonNameId.addEventListener("click", (e) => {
    accodionNameId.expand(2)
  });
  collapseButtonNameId.addEventListener("click", (e) => {
    accodionNameId.collapse(2)
  });
</script>

Wer kann Mitglied im Vorteilsclub der Stadt Wien werden?

Jede natürliche Person mit Wohnsitz in Österreich, die das 16. Lebensjahr vollendet hat.

Wie erhalte ich meine Vorteilsclub der Stadt Wien-Karte?

Einfach Profil vervollständigen. Sobald wir alle nötigen Informationen erhalten haben, wird deine digitale und personalisierte Vorteilsclub der Stadt Wien-Karte in deinem Profil angezeigt. Die digitale Mitgliedskarte ist sofort einsatzbereit.

Was passiert mit meinen Daten?

Um die Angebote des Vorteilsclubs der Stadt Wien rundum nutzen zu können, benötigen wir ein paar aktuelle Informationen zu deiner Person. Der Schutz deiner persönlichen Daten hat für uns dabei oberste Priorität! Detaillierte Informationen zum Thema Datenschutz findest du hier.

Sollten sich deine Daten ändern, etwa durch einen Umzug, kannst du diese jederzeit selbst in deinem Profil anpassen.

Events

Manche Patterns verfügen auch über Events, die Sie über Event Listener ansprechen können.

Beispiel Akkordeon:

Event Beschreibung Rückgabewert
wm-defined Web Component ist bereit 
<button class="expandButtonNameId">2. Element öffnen</button>
<button class="collapseButtonNameId">2. Element schließen</button>
<wm-accordion class="wm-accordion-NameId">
  …
</wm-accordion>
<script>
  const accordionNameId = document.querySelector('wm-accordion-NameId');
  const expandNameId = document.querySelector('.expandButtonNameId');
  const collapseNameId = document.querySelector('.collapseButtonNameId');
  expandNameId.addEventListener("click", (e) => {
    accordionNameId.expand(2)
  });
  collapseNameId.addEventListener("click", (e) => {
    accordionNameId.collapse(2)
  });
  accordionNameId.addEventListener("wm-collapsed", (e) => {
    console.log(`Event: ${
      e.type
    } ID: ${
      e.detail.id
    } Index: ${
      e.detail.index
    }`);
  });
  accordionNameId.addEventListener("wm-expanded", (e) => {
    console.log(`Event: ${
      e.type
    } ID: ${
      e.detail.id
    } Index: ${
      e.detail.index
    }`);
  });
</script>

Wer kann Mitglied im Vorteilsclub der Stadt Wien werden?

Jede natürliche Person mit Wohnsitz in Österreich, die das 16. Lebensjahr vollendet hat.

Wie erhalte ich meine Vorteilsclub der Stadt Wien-Karte?

Einfach Profil vervollständigen. Sobald wir alle nötigen Informationen erhalten haben, wird deine digitale und personalisierte Vorteilsclub der Stadt Wien-Karte in deinem Profil angezeigt. Die digitale Mitgliedskarte ist sofort einsatzbereit.

Was passiert mit meinen Daten?

Um die Angebote des Vorteilsclubs der Stadt Wien rundum nutzen zu können, benötigen wir ein paar aktuelle Informationen zu deiner Person. Der Schutz deiner persönlichen Daten hat für uns dabei oberste Priorität! Detaillierte Informationen zum Thema Datenschutz findest du hier.

Sollten sich deine Daten ändern, etwa durch einen Umzug, kannst du diese jederzeit selbst in deinem Profil anpassen.

CSS API

Das Styling der meisten Pattern kann über CSS-Custom-Properties angepasst werden. Dies darf jedoch nur in Ausnahmefällen und in Abstimmung mit dem Handbuch-Team passieren. Ansonsten gelten die Vorgaben und Varianten der Pattern Library. Weitere Informationen finden Sie im nächsten Abschnitt "Individuelle Anpassungen".

Beispiel Akkordeon:

Property Beschreibung
--accordion-background-color Hintergrundfarbe des Buttons
--accordion-background-color--hover Hintergrundfarbe des Buttons Hover & Focus
--accordion-panel-background-color Hintergrundfarbe des Panels
--accordion-panel-font-color Schriftfarbe im Panel
--accordion-border Rahmen um den Button
--accordion-font-color Schriftfarbe des Buttons
--accordion-font-color--hover Schriftfarbe des Buttons Hover & Focus
--accordion-contrast Kontrast-Hintergrundfarbe, zum Beispiel für Multimedia-Elemente
--accordion-font-weight Schriftstärke im Button
--accordion-padding-inline Innenabstand links und rechts
--accordion-padding-block-start Innenabstand oben
--accordion-padding-block-end Innenabstand unten
--accordion-gap Abstand zwischen Panels 

wm-accordion { 
  --accordion-background-color: var(--wm-color-wasserblau-light);
  --accordion-background-color--hover: var(--wm-color-wasserblau);
  --accordion-panel-background-color: var(--wm-color-wasserblau-light);
  --accordion-gap: var(--wm-spacing-l); 
}

Wer kann Mitglied im Vorteilsclub der Stadt Wien werden?

Jede natürliche Person mit Wohnsitz in Österreich, die das 16. Lebensjahr vollendet hat.

Wie erhalte ich meine Vorteilsclub der Stadt Wien-Karte?

Einfach Profil vervollständigen. Sobald wir alle nötigen Informationen erhalten haben, wird deine digitale und personalisierte Vorteilsclub der Stadt Wien-Karte in deinem Profil angezeigt. Die digitale Mitgliedskarte ist sofort einsatzbereit.

Was passiert mit meinen Daten?

Um die Angebote des Vorteilsclubs der Stadt Wien rundum nutzen zu können, benötigen wir ein paar aktuelle Informationen zu deiner Person. Der Schutz deiner persönlichen Daten hat für uns dabei oberste Priorität! Detaillierte Informationen zum Thema Datenschutz findest du hier.

Sollten sich deine Daten ändern, etwa durch einen Umzug, kannst du diese jederzeit selbst in deinem Profil anpassen.
Individuelle Anpassungen

CD-konforme Designs und das Wiener-Melange-Theme sind für alle wien.gv.at-Seiten und Anwendungen verbindlich. Anpassungen – sei es bei Farben, Komponenten oder anderen Designaspekten – dürfen nur in Ausnahmefällen erfolgen, etwa für spezielle Anwendungen (zum Beispiel Debugging-Tools oder White-Label-Lösungen), die zusätzliche Anpassungen benötigen.

Wer eigene Anpassungen vornimmt, trägt die Verantwortung dafür, dass sie barrierefrei, funktional und sinnvoll gestaltet sind.

Individuelle Änderungen dürfen nicht vorgenommen werden, nur weil das standardisierte Design nicht gefällt.

Wenn Sie weitere Farbvariationen benötigen und mit dem Wiener-Melange-Theme arbeiten, wenden Sie sich bitte an handbuch@ma53.wien.gv.at.

Abhängigkeiten

Wenn es Abhängigkeiten zu anderen Patterns gibt, werden diese hier aufgelistet.

Beispiel Akkordeon:

HTML 
<script src="https://assets.wien.gv.at/theme/latest/js/components/Accordion/Accordion.js" type="module"></script>
 JavaScript 
import { Accordion } from './wienermelange/assets/js/components/Accordion/Accordion.js';

Reiter "Changelog"

Im Changelog werden für das jeweilige Pattern Versionsnummern und Änderungen dokumentiert.

 Erste Schritte CSS

Kontakt

Haben Sie noch Fragen, Feedback oder brauchen Sie ein Element, das die Pattern Library noch nicht bietet?

handbuch@ma53.wien.gv.at