Formular: Combobox

Die Optionen werden angezeigt, sobald Sie zu tippen beginnen oder die Pfeiltasten betätigen. Die Optionen werden bei Eingabe nicht gefiltert.

Vorschau

Grundlagenerhebung
Konzepterstellung
Widmungsverfahren
Gemeinderatsbeschluss
In Umsetzung
Umgesetzt

Code

<wm-input type="combobox" label="Projektstand">
  <ul slot="options">
    <li data-value="grundlagenerhebung">Grundlagenerhebung</li>
    <li data-value="konzepterstellung">Konzepterstellung</li>
    <li data-value="widmungsverfahren">Widmungsverfahren</li>
    <li data-value="gemeinderatsbeschluss">Gemeinderatsbeschluss</li>
    <li data-value="inumsetzung">In Umsetzung</li>
    <li data-value="umgesetzt">Umgesetzt</li>
  </ul>
</wm-input>

Formular: Combobox mit Button

Button zum Ein- und Ausklappen der Optionen.

Vorschau

Grundlagenerhebung
Konzepterstellung
Widmungsverfahren
Gemeinderatsbeschluss
In Umsetzung
Umgesetzt

Code

<wm-input type="combobox" label="Projektstand" toggleButton>
  <ul slot="options">
    <li data-value="grundlagenerhebung">Grundlagenerhebung</li>
    <li data-value="konzepterstellung">Konzepterstellung</li>
    <li data-value="widmungsverfahren">Widmungsverfahren</li>
    <li data-value="gemeinderatsbeschluss">Gemeinderatsbeschluss</li>
    <li data-value="inumsetzung">In Umsetzung</li>
    <li data-value="umgesetzt">Umgesetzt</li>
  </ul>
</wm-input>

Formular: Combobox mit Button und Filter

Die Optionen werden bei Eingabe gefiltert.

Vorschau

Grundlagenerhebung
Konzepterstellung
Widmungsverfahren
Gemeinderatsbeschluss
In Umsetzung
Umgesetzt

Code

<wm-input type="combobox" label="Projektstand" toggleButton filter>
  <ul slot="options">
    <li data-value="grundlagenerhebung">Grundlagenerhebung</li>
    <li data-value="konzepterstellung">Konzepterstellung</li>
    <li data-value="widmungsverfahren">Widmungsverfahren</li>
    <li data-value="gemeinderatsbeschluss">Gemeinderatsbeschluss</li>
    <li data-value="inumsetzung">In Umsetzung</li>
    <li data-value="umgesetzt">Umgesetzt</li>
  </ul>
</wm-input>

Formular: Combobox mit Filter und Unterteilungen

Lange Listen können gruppiert werden.

Vorschau

Seiten
- Leicht verständliche Sprache
- Domain Policy
Icons
- Bitte nicht lärmen
- Blaulicht
Templates
- Parkpickerl
- Public WLAN

Code

<wm-input type="combobox" toggleButton label="Suche" filter placeholder="Handbuch durchsuchen">
  <ul slot="options">
    <li>
      Seiten
      <ul>
        <li data-value="lvs">Leicht verständliche Sprache</li>
        <li data-value="domain">Domain Policy</li>
      </ul>
    </li>
    <li>
      Icons
      <ul>
        <li data-value="nolaerm">Bitte nicht lärmen</li>
        <li data-value="blaulicht">Blaulicht</li>
      </ul>
    </li>
    <li>
      Templates
      <ul>
        <li data-value="parkpickerl">Parkpickerl</li>
        <li data-value="wlan">Public WLAN</li>
      </ul>
    </li>
  </ul>
</wm-input>

Formular: Combobox Live OGD Adress-Suche

Daten bezogen von https://www.data.gv.at

Vorschau

Code

<p>
  <wm-input type="combobox" label="Adresse" id="ogdsuche" dataset="features"></wm-input>
</p>
<script>
const search = document.querySelector('#ogdsuche');
  search.addEventListener('wm-input', e => {
    search.getOptions(e.detail.value, `https://data.wien.gv.at/daten/OGDAddressService.svc/GetAddressInfo?Address=${e.detail.value}`).then((results) => {
      const options = [];
      if (results) {
        for (let i = 0; i < results.length; i++) {
          const row = results[i];
          options.push({
            text: `${row.properties.Adresse}, ${row.properties. Bezirk}. Bezirk`,
            children: [],
            value: `value-${i}`
          })
        }
        search.setOptions(options);
      }
    });
  });
</script>

Dev

Weitere Beispiele

Formular: Combobox mit Links

Die Liste kann statt Optionen auch Links beinhalten.

Vorschau

alle
Grundlagenerhebung
Konzepterstellung
Widmungsverfahren
Gemeinderatsbeschluss
In Umsetzung
Umgesetzt

Code

<wm-input type="combobox" label="Projektstand" toggleButton="toggleButton">
  <ul slot="options">
    <li>
      <a href="#">
        alle
      </a>
    </li>
    <li>
      <a href="#grundlagenerhebung">
        Grundlagenerhebung
      </a>
    </li>
    <li>
      <a href="#konzepterstellung">
        Konzepterstellung
      </a>
    </li>
    <li>
      <a href="#widmungsverfahren">
        Widmungsverfahren
      </a>
    </li>
    <li>
      <a href="#gemeinderatsbeschluss">
        Gemeinderatsbeschluss
      </a>
    </li>
    <li>
      <a href="#inumsetzung">
        In Umsetzung
      </a>
    </li>
    <li>
      <a href="#umgesetzt">
        Umgesetzt
      </a>
    </li>
  </ul>
</wm-input>

Formular: Input mit Auswahl-Event

Daten bezogen von https://www.data.gv.at

Vorschau

Die ausgewählte Adresse lautet: /

Code

<p>
  <wm-input type="combobox" label="Addresse" id="ogdsucheevent" dataset="features"></wm-input>
</p>
<p>Die ausgewählte Adresse lautet:
  <strong id="selected_address">/</strong>
</p>
<script>
  const searchEvent = document.querySelector('#ogdsucheevent');
  searchEvent.addEventListener('wm-input', e => {
    searchEvent.getOptions(e.detail.value, `https://data.wien.gv.at/daten/OGDAddressService.svc/GetAddressInfo?Address=${
      e.detail.value
    }`).then((results) => {
      const options = [];
      if (results) {
        for (let i = 0; i < results.length; i++) {
          const row = results[i];
          options.push({text: `${
              row.properties.Adresse
            }, ${
              row.properties.Bezirk
            }. Bezirk`, children: [], value: `value-${i}`})
        }
        searchEvent.setOptions(options);
      }
    });
  });
  searchEvent.addEventListener('wm-input-selected', e => {
    document.querySelector('#selected_address').textContent = e.detail.text;
  });
</script>

API

wm-input

Eigenschaften

Eigenschaften
Eigenschaft	Beschreibung	Werte	Default
`showPasswordLabel`	Gibt den lokalisierten Text für den Button zum Umschalten der Passwortsichtbarkeit zurück. Kann durch Setzen der Eigenschaft showPasswordLabel überschrieben werden. Fällt auf den lokalisierten Standard "Info anzeigen" zurück, falls nicht gesetzt. Dies ist eine öffentliche Eigenschaft, die sich reaktiv bei Sprachwechsel aktualisiert.	`String`	`"Info anzeigen"`
`toggleOptionsLabel`	Gibt den lokalisierten Text für den Button zum Umschalten der Combobox-Optionen zurück. Kann durch Setzen der Eigenschaft toggleOptionsLabel überschrieben werden. Fällt auf den lokalisierten Standard "Vorschläge zeigen" zurück, falls nicht gesetzt. Dies ist eine öffentliche Eigenschaft, die sich reaktiv bei Sprachwechsel aktualisiert.	`String`	`"Vorschläge zeigen"`
`type`	Art des Eingabefelds	`'combobox'\|'date'\|'datetime-local'\|'email'\|'number'\|'password'\|'tel'\|'text'\|'time'\|'url'`	`"text"`
`dataset`	Combobox: Feld in der Response, das die Daten enthält, zum Beispiel bei OGD üblicherweise "features"	`Boolean`	`""`
`toggleButton`	Button in Combobox anzeigen	`Boolean`	`false`
`setvalue`	Combobox: Wert programmatisch setzen	`Boolean`	`""`
`disabled`	Disabled	`Boolean`	`false`
`pattern`	Regulärer Expressen RegEx für die Validierung	`String`	leer
`hasError`	Gibt an, ob das Element einen Fehler hat Dies ist ein Statusattribut, das anzeigt, ob aktuell ein Validierungsfehler vorliegt. Es wird auf true gesetzt, wenn die Validierung fehlschlägt, und auf false zurückgesetzt, wenn die Validierung erfolgreich ist oder das Formular zurückgesetzt wird.	`Boolean`	`false`
`showErrors`	Steuert die Anzeige von Fehlermeldungen Im Gegensatz zu 'hasError' steuert dieses Attribut, ob Fehlermeldungen angezeigt werden sollen. Wenn auf true gesetzt, werden Validierungsfehler sofort angezeigt, ohne auf eine Formularübermittlung zu warten. Wird typischerweise vom übergeordneten wm-form Element gesteuert.	`boolean`	`false`
`validate`	Aktiviert die Validierung bei Eingabe Wenn auf true gesetzt, werden Eingaben sofort validiert und Fehler entsprechend angezeigt, ohne auf eine Formularübermittlung zu warten. Wird typischerweise vom übergeordneten wm-form Element gesteuert.	`boolean`	`false`
`validator`	Validierungsfunktion	`Function`	`false`
`value`	Aktueller Wert des Eingabefelds	`string`	`""`
`defaultValue`	Standardwert für das Zurücksetzen des Formulars	`String`	`""`
`minlength`	Minimale Länge	`Number`	leer
`maxlength`	Maximale Länge	`Number`	leer
`min`	Minimale Eingabe (z.B. Datum oder Zahl) Wird an das native weitergereicht (siehe render()). Für type="date" wird das Format YYYY-MM-DD empfohlen. Die Validierung erfolgt in _validateWithoutController().	`string\|undefined`	leer
`max`	Maximale Eingabe (z.B. Datum oder Zahl) Wird an das native weitergereicht (siehe render()). Für type="date" wird das Format YYYY-MM-DD empfohlen. Die Validierung erfolgt in _validateWithoutController().	`string\|undefined`	leer
`label`	Text für das Label	`String`	leer
`hint`	Text für den Hint	`String`	leer
`required`	Markiert Pflichtfelder	`Boolean`	`false`
`suppressError`	Unterdrückt die Anzeige von Fehlermeldungen	`Boolean`	`false`
`errormessage`	Fehlermeldung bei ungültiger Eingabe Diese Meldung wird direkt am Eingabefeld angezeigt, wenn es validiert wird und ungültig ist.	`String`	`""`
`summaryErrormessage`	Spezifische Fehlermeldung für die Fehlerübersicht Diese Meldung wird in der Fehlerübersicht (wm-formerrorsummary) anstelle der normalen Fehlermeldung angezeigt. Dies ist nützlich, um in der Übersicht kontextspezifischere Fehlermeldungen anzuzeigen, z.B. 'Bitte geben Sie Ihren Namen bei \'Kontaktdaten\' ein' statt nur 'Dieses Feld ist erforderlich'.	`String`	`""`
`autocomplete`		`string`
`error`	Current error message	`String`	`''`
`announcementText`	Text, der angekündigt wird, wenn Optionen angezeigt werden	`String`	`"Suchvorschläge werden angezeigt. Verwenden Sie Pfeiltasten um zu navigieren"`
`maxlengthText`	Text for maxlength message	`String`	`"Es sind noch {remaining} Zeichen verfügbar"`
`patternMismatchMessage`	Pattern validation message	`String`	`"Bitte geben Sie einen gültigen Wert ein"`
`placeholder`	placeholder-Attribut in HTML	`String`	leer
`search`	Art des Suchfeldes	`'hidden'\|'visible'\|'hiddenmobile'`	leer
`size`	size-Attribute in HTML	`String`	leer
`filter`	Liste in Combobox beim Tippen filtern	`Boolean`	`false`
`hideMaxlength`	Verfügbare Zeichenanzahl verbergen	`Boolean`	`false`
`info`		`string`	leer

Methoden

Eigenschaft	Optionen	Argumente
`hideOptions`	Liste in Combobox verbergen	Fokus auf Input legen (true) (`Boolean`)
`showError`	Shows an error message for this input	The error message to display (`string`)
`clearError`	Clears any error state from this input	/
`showOptions`	Liste in Combobox anzeigen	/

Events

Event	Beschreibung	Rückgabewert

Kontakt

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

handbuch@ma53.wien.gv.at