Formular: Filter

Das Pattern Filter besteht aus mehreren Checkboxen, die Überkategorien zugeordnet sind. Nutzer*innen können eine Einfach- oder Mehrfachauswahl treffen.

Varianten

Formular: Filter erweitert

Alle Optionen sind direkt sichtbar.

Vorschau

Code

<form type="dropdown" label="Erweitere Filter" searchlabel="Anwenden" dismisslabel="Abbrechen" controls>
  <wm-filter id="meinfilter" controls="true">
    <fieldset>
      <legend>Art des Bades</legend>
      <div>
        <input id="hallenbad" type="checkbox" name="typ" value="hallenbad">
        <label for="hallenbad">Hallenbad</label>
      </div>
      <div>
        <input id="freibad" type="checkbox" name="typ" value="freibad">
        <label for="freibad">Freibad</label>
      </div>
      <div>
        <input id="familienbaeder" type="checkbox" name="typ" value="familienbaeder">
        <label for="familienbaeder">Familienbäder</label>
      </div>
      <div>
        <input id="saunabad" type="checkbox" name="typ" value="saunabad">
        <label for="saunabad">Saunabad</label>
      </div>
      <div>
        <input id="brausebad" type="checkbox" name="typ" value="brausebad-2">
        <label for="brausebad">Brausebad</label>
      </div>
    </fieldset>
    <fieldset>
      <legend>Bezirk</legend>
      <div>
        <input id="innerestadt" type="checkbox" name="bezirk" value="bezirk1">
        <label for="innerestadt">Innere Stadt</label>
      </div>
      <div>
        <input id="leopoldstadt" type="checkbox" name="bezirk" value="bezirk2">
        <label for="leopoldstadt">Leopoldstadt</label>
      </div>
    </fieldset>
  </wm-filter>
</form>

Formular: Filter erweitert mit Dropdown

Alle Optionen werden in einem Dropdown angezeigt.

Vorschau

Code

<form type="dropdown" label="Erweitere Filter" searchlabel="Anwenden" dismisslabel="Abbrechen" controls>
  <wm-filter id="meinfilter" type="dropdown" controls="true">
    <fieldset>
      <legend>Art des Bades</legend>
      <div>
        <input id="hallenbad2" type="checkbox" name="typ" value="hallenbad">
        <label for="hallenbad2">Hallenbad</label>
      </div>
      <div>
        <input id="freibad2" type="checkbox" name="typ" value="freibad">
        <label for="freibad2">Freibad</label>
      </div>
      <div>
        <input id="familienbaeder2" type="checkbox" name="typ" value="familienbaeder">
        <label for="familienbaeder2">Familienbäder</label>
      </div>
      <div>
        <input id="saunabad2" type="checkbox" name="typ" value="saunabad">
        <label for="saunabad2">Saunabad</label>
      </div>
      <div>
        <input id="brausebad2" type="checkbox" name="typ" value="brausebad-2">
        <label for="brausebad2">Brausebad</label>
      </div>
    </fieldset>
    <fieldset>
      <legend>Bezirk</legend>
      <div>
        <input id="innerestadt2" type="checkbox" name="bezirk" value="bezirk1">
        <label for="innerestadt2">Innere Stadt</label>
      </div>
      <div>
        <input id="leopoldstadt2" type="checkbox" name="bezirk" value="bezirk2">
        <label for="leopoldstadt2">Leopoldstadt</label>
      </div>
    </fieldset>
  </wm-filter>
</form>

Formular: Filter Pilotprojekt "Kindergarten-Suche"

Filter: Beispiel "Kindergarten-Suche" öffnen

Dev

Interaktive Demo

type

label

searchlabel

dismisslabel

controls

Vorschau

Code

<form>
  <wm-filter id="meinfilter" type="dropdown" data-demo-pattern="wm-filter-preview" controls="true">
    <fieldset>
      <legend>Art des Bades</legend>
      
      <div>
        <input id="hallenbad3" type="checkbox" name="typ" value="hallenbad">
        <label for="hallenbad3">Hallenbad</label>
      </div>
      <div>
        <input id="freibad3" type="checkbox" name="typ" value="freibad">
        <label for="freibad3">Freibad</label>
      </div>
      <div>
        <input id="familienbaeder3" type="checkbox" name="typ" value="familienbaeder">
        <label for="familienbaeder3">Familienbäder</label>
      </div>
      <div>
        <input id="saunabad3" type="checkbox" name="typ" value="saunabad">
        <label for="saunabad3">Saunabad</label>
      </div>
      <div>
        <input id="brausebad3" type="checkbox" name="typ" value="brausebad-2">
        <label for="brausebad3">Brausebad</label>
      </div>
    </fieldset>
    <fieldset>
      <legend>Bezirk</legend>
      
      <div>
        <input id="innerestadt3" type="checkbox" name="bezirk" value="bezirk1">
        <label for="innerestadt3">Innere Stadt</label>
      </div>
      <div>
        <input id="leopoldstadt3" type="checkbox" name="bezirk" value="bezirk2">
        <label for="leopoldstadt3">Leopoldstadt</label>
      </div>
    </fieldset>
  </wm-filter>
</form>

<wm-filter-selection filterid="meinfilter"></wm-filter-selection>

API

Abhängigkeiten

HTML

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

JavaScript

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

Eigenschaften

Eigenschaften
Eigenschaft	Beschreibung	Werte	Default
`label`	Bezeichnung für das Dropdown	`String`	`"Erweiterte Filter"`
`searchLabel`	Text für Suchen-Button	`String`	`"Anwenden"`
`dismissLabel`	Text für Abbrechen-Button	`String`	`"Abbrechen"`
`selectLabel`	Text für auswählen-Text in Dropdown	`String`	`"Auswählen"`
`selectedLabel`	Text für ausgewählt-Text in Dropdown	`String`	`"ausgewählt"`
`type`	Art des Filters	`'dropdown'`	leer
`open`	Ist das Dropdown geöffnet	`Boolean`	`false`
`controls`	Buttons zu Senden/Schließen/Abbrechen anzeigen	`Boolean`	`false`
`totals`	Anzahl der Elemente insgesamt und der ausgewählten	`Object`	`{ all: { total: this._inputs.length, checked: 0, active: 0, }, }`

Slots

Name	Beschreibung
`default`

Methoden

Eigenschaft	Optionen	Argumente
`submit`	Aktuelle Auswahl speichern	/
`updateSelection`	Wenn es eine Filter Selection gibt, kann man diese clientseitig aktualisieren	/

Events

Event	Beschreibung	Rückgabewert
`wm-filter-selection-submitted`	Wenn eine Auswahl getroffen und angewendet worden ist	`Object mit allen Filter Daten`
`wm-filter-selected`	Wenn eine Auswahl getroffen worden ist	`Object mit allen Filter Daten`

CSS API

Property	Beschreibung
`--filter-controls-background-color`	Hintergrundfarbe der Controls
`--filter-dropdown-background-color`	Hintergrundfarbe Dropdown
`--filter-dropdown-border`	Rahmen Dropdown
`--filter-dropdown-shadow`	Schatten Dropdown
`--filter-dropdown-button-border`	Farbe der unteren Rahmenlinie am Toggle-Button

Kontakt

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

handbuch@ma53.wien.gv.at