Sidebar

Die Seitenleiste dient als zusätzliches Navigationselement für Sonderseiten.
Darf nicht als Hauptnavigation eingesetzt werden.
Beispiele, die einen Einsatz der Sidebar rechtfertigen sind zum Beispiel das Handbuch/die Pattern Library mit einer sehr komplexen Filterung.
Je nach Anwendungsfall kann die Sidebar per default ein- oder ausgeklappt sein. Mobil ist die Sidebar immer eingeklappt.

Dev

Implementierung

<wm-button kind="secondary">
  <button data-sidebar="demosidebar">
    <wm-icon iconid="sidebar"></wm-icon>
    Sidebar anzeigen
  </button>
</wm-button>
<wm-sidebar id="demosidebar" label="Sidebar">
  Inhalt
</wm-sidebar>

API

Abhängigkeiten

HTML

<script src="https://assets.wien.gv.at/theme/latest/js/components/Sidebar/Sidebar.js" type="module"></script>
<script src="https://assets.wien.gv.at/theme/latest/js/components/Button/Button.js" type="module"></script>

JavaScript

import { Sidebar } from './wienermelange/assets/js/components/Sidebar/Sidebar.js';
    import { Button } from './wienermelange/assets/js/components/Button/Button.js';

Eigenschaften

Eigenschaften
Eigenschaft	Beschreibung	Werte	Default
`open`	Ist die Seitenleisten eingeblendet.	`Boolean`	`true`
`id`	Einzigartige ID	`String`	leer
`label`	Sichtbare Bezeichnung	`String`	`""`
`shortcut`	Keyboard-Shortcut zum Öffnen und Schließen, zum Beispiel: gs	`String`	`"s"`

Slots

Name	Beschreibung
`default`	Jeglicher HTML-Content

Methoden

Eigenschaft	Optionen	Argumente
`toggleSidebar`	Sidebar öffnen oder schließen
`closeSidebar`	Sidebar schließen

CSS API

Property	Beschreibung
`--sidebar-background-color`	Hintergrundfarbe
`--sidebar-header-background-color`	Hintergrundfarbe Balken
`--sidebar-header-font-color`	Textfarbe Balken
`--sidebar-header-margin`	Außenabstand nach unten
`--sidebar-input-background-color`	Hintergrundfarbe von Eingabefeldern
`--sidebar-padding`	Innenabstand
`--sidebar-inline-size`	Breite

Inhalt

Kontakt

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

handbuch@ma53.wien.gv.at