Select

Die Select-Komponente zeigt Optionen in einem Dropdown-Menü an und erleichtert so die Auswahl für Nutzer.

Diese Seite beschreibt hauptsächlich die Verwendung der <mdui-select>-Komponente. Informationen zur Verwendung von Menüpunkten finden Sie unter <mdui-menu-item>.

Verwendung

Importieren Sie die Komponenten nach Bedarf:

import 'mdui/components/select.js';
import 'mdui/components/menu-item.js';

Importieren Sie die TypeScript-Typen der Komponenten nach Bedarf:

import type { Select } from 'mdui/components/select.js';
import type { MenuItem } from 'mdui/components/menu-item.js';

Beispiel:

Item 1

Item 2

<mdui-select value="item-1">
  <mdui-menu-item value="item-1">Item 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Item 2</mdui-menu-item>
</mdui-select>

Beispiele

Mehrfachauswahl unterstützen

Das Select-Element ist standardmäßig auf Einfachauswahl eingestellt. Der value-Wert der <mdui-select>-Komponente ist der value-Wert des aktuell ausgewählten <mdui-menu-item>.

Fügen Sie das Attribut multiple hinzu, um die Mehrfachauswahl zu aktivieren. In diesem Fall ist der value-Wert von <mdui-select> ein Array der value-Werte der aktuell ausgewählten <mdui-menu-item>.

Hinweis: Bei aktivierter Mehrfachauswahl ist der value-Wert von <mdui-select> ein Array, das nur über eine JavaScript-Property gelesen und gesetzt werden kann.

Item 1

Item 2

Item 3

<mdui-select multiple class="example-multiple">
  <mdui-menu-item value="item-1">Item 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Item 2</mdui-menu-item>
  <mdui-menu-item value="item-3">Item 3</mdui-menu-item>
</mdui-select>

<script>
  // Standardmäßig item-1 und item-2 auswählen
  const select = document.querySelector(".example-multiple");
  select.value = ["item-1", "item-2"];
</script>

Quellcode

Hilfstext

Mit dem Attribut label legen Sie den Label-Text über dem Select-Element fest.

Item 1

Item 2

<mdui-select label="Textfeld" value="item-1">
  <mdui-menu-item value="item-1">Item 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Item 2</mdui-menu-item>
</mdui-select>

Quellcode

Mit dem Attribut placeholder legen Sie den Platzhaltertext für nicht ausgewählte Werte fest.

Item 1

Item 2

<mdui-select placeholder="Platzhalter">
  <mdui-menu-item value="item-1">Item 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Item 2</mdui-menu-item>
</mdui-select>

Quellcode

Mit dem Attribut helper legen Sie den Hilfetext unter dem Select-Element fest. Sie können den Hilfetext auch über den Slot helper festlegen.

Item 1

Item 2

Item 1

Item 2

Unterstützender Text

<mdui-select helper="Unterstützender Text">
  <mdui-menu-item value="item-1">Item 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Item 2</mdui-menu-item>
</mdui-select>

<mdui-select>
  <mdui-menu-item value="item-1">Item 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Item 2</mdui-menu-item>
  <span slot="helper" style="color: blue">Unterstützender Text</span>
</mdui-select>

Quellcode

Nur-Lese-Modus

Fügen Sie das Attribut readonly hinzu, um das Select-Element in den Nur-Lese-Modus zu versetzen.

Item 1

Item 2

<mdui-select readonly value="item-1">
  <mdui-menu-item value="item-1">Item 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Item 2</mdui-menu-item>
</mdui-select>

Quellcode

Deaktivierter Zustand

Fügen Sie das Attribut disabled hinzu, um das Select-Element zu deaktivieren.

Item 1

Item 2

<mdui-select disabled value="item-1">
  <mdui-menu-item value="item-1">Item 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Item 2</mdui-menu-item>
</mdui-select>

Quellcode

Löschbar

Wenn Sie das Attribut clearable hinzufügen, erscheint rechts neben dem Select-Element eine Schaltfläche zum Löschen, wenn ein Wert ausgewählt ist.

Item 1

Item 2

<mdui-select clearable value="item-1">
  <mdui-menu-item value="item-1">Item 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Item 2</mdui-menu-item>
</mdui-select>

Quellcode

Sie können die Schaltfläche zum Löschen auch über den Slot clear anpassen.

Item 1

Item 2

<mdui-select clearable value="item-1">
  <mdui-menu-item value="item-1">Item 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Item 2</mdui-menu-item>
  <mdui-icon slot="clear" name="delete"></mdui-icon>
</mdui-select>

Quellcode

Position des Dropdown-Menüs

Über das Attribut placement können Sie die Position des Dropdown-Menüs festlegen.

Item 1

Item 2

<mdui-select placement="top" value="item-1">
  <mdui-menu-item value="item-1">Item 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Item 2</mdui-menu-item>
</mdui-select>

Quellcode

Text rechtsbündig ausrichten

Fügen Sie das Attribut end-aligned hinzu, um den Text rechtsbündig auszurichten.

Item 1

Item 2

<mdui-select end-aligned value="item-1">
  <mdui-menu-item value="item-1">Item 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Item 2</mdui-menu-item>
</mdui-select>

Quellcode

Text und Symbole links/rechts

Über die Attribute icon und end-icon können Sie links bzw. rechts vom Select-Element ein Material Icons-Symbol hinzufügen. Sie können auch über die Slots icon und end-icon Elemente hinzufügen.

Item 1

Item 2

Item 1

Item 2

<mdui-select value="item-1" icon="search" end-icon="mic">
  <mdui-menu-item value="item-1">Item 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Item 2</mdui-menu-item>
</mdui-select>

<br/><br/>

<mdui-select value="item-1">
  <mdui-menu-item value="item-1">Item 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Item 2</mdui-menu-item>
  <mdui-button-icon slot="icon" icon="search"></mdui-button-icon>
  <mdui-button-icon slot="end-icon" icon="mic"></mdui-button-icon>
</mdui-select>

Quellcode

Über die Attribute prefix und suffix können Sie links bzw. rechts vom Select-Element Text hinzufügen. Sie können auch über die Slots prefix und suffix Textelemente hinzufügen. Diese Texte werden nur angezeigt, wenn das Select-Element fokussiert ist oder einen Wert hat.

Item 1

Item 2

Item 1

Item 2

$ /100

<mdui-select value="item-1" prefix="$" suffix="/100">
  <mdui-menu-item value="item-1">Item 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Item 2</mdui-menu-item>
</mdui-select>

<br/><br/>

<mdui-select value="item-1">
  <mdui-menu-item value="item-1">Item 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Item 2</mdui-menu-item>
  <span slot="prefix" style="color: blue">$</span>
  <span slot="suffix" style="color: blue">/100</span>
</mdui-select>

Quellcode

API

Eigenschaften

Attribut	Property	Typ	Standard
`variant`	`variant`	`'filled' \| 'outlined'`	`'filled'`
Definiert die Select-Variante. Mögliche Werte: `filled`: Durchgehender Hintergrund mit starker visueller Betonung. `outlined`: Mit Rahmen und leichterer visueller Betonung.
`multiple`	`multiple`	`boolean`	`false`
Aktiviert Mehrfachauswahl.
`name`	`name`	`string`	`''`
Name der Select-Komponente, der mit Formulardaten übermittelt wird.
`value`	`value`	`string \| string[]`	`''`
Wert der Select-Komponente, der mit Formulardaten übermittelt wird. Wenn `multiple` nicht gesetzt ist, ist der Wert eine Zeichenfolge; andernfalls ist er ein Array von Zeichenfolgen. HTML-Attribute können nur Zeichenfolgenwerte setzen; Array-Werte müssen über die JavaScript-Eigenschaft gesetzt werden.
	`defaultValue`	`string \| string[]`	`''`
Standardmäßig ausgewählter Wert. Die Select-Komponente setzt beim Zurücksetzen des Formulars auf diesen Wert zurück. Nur JavaScript.
`label`	`label`	`string`	-
Beschriftungstext.
`placeholder`	`placeholder`	`string`	-
Platzhaltertext.
`helper`	`helper`	`string`	-
Hilfetext unter der Select-Komponente. Alternativ können Sie `slot="helper"` verwenden.
`clearable`	`clearable`	`boolean`	`false`
Macht die Select-Komponente löschbar.
`clear-icon`	`clearIcon`	`string`	-
Name des Material Icons für den Löschen-Button rechts, wenn das Feld löschbar ist. Alternativ können Sie `slot="clear-icon"` verwenden.
`placement`	`placement`	`'auto' \| 'bottom' \| 'top'`	`'auto'`
Position der Select-Komponente. Mögliche Werte: `auto`: Automatisch bestimmt. `bottom`: Unterhalb des Eingabefelds. `top`: Oberhalb des Eingabefelds.
`end-aligned`	`endAligned`	`boolean`	`false`
Richtet den Text rechtsbündig aus.
`prefix`	`prefix`	`string`	-
Präfix-Text der Select-Komponente. Er wird nur angezeigt, wenn die Select-Komponente fokussiert ist oder einen Wert hat. Alternativ können Sie `slot="prefix"` verwenden.
`suffix`	`suffix`	`string`	-
Suffix-Text der Select-Komponente. Er wird nur angezeigt, wenn die Select-Komponente fokussiert ist oder einen Wert hat. Alternativ können Sie `slot="suffix"` verwenden.
`icon`	`icon`	`string`	-
Name des Material Icons für das Präfix-Icon. Alternativ können Sie `slot="icon"` verwenden.
`end-icon`	`endIcon`	`string`	-
Name des Material Icons für das Suffix-Icon. Alternativ können Sie `slot="end-icon"` verwenden.
`error-icon`	`errorIcon`	`string`	-
Name des Material Icons, das bei fehlgeschlagener Formularfeldvalidierung rechts angezeigt wird. Alternativ können Sie `slot="error-icon"` verwenden.
`form`	`form`	`string`	-
Verknüpft die Select-Komponente mit einem `<form>`-Element. Setzen Sie dies auf die `id` eines `<form>`-Elements im selben Dokument. Wenn nicht angegeben, verwendet die Select-Komponente ihr übergeordnetes `<form>`-Element, falls vorhanden. Dies ermöglicht es der Select-Komponente, mit jedem Formular im Dokument zu arbeiten, nicht nur mit dem, in dem sie verschachtelt ist.
`readonly`	`readonly`	`boolean`	`false`
Macht die Select-Komponente schreibgeschützt.
`disabled`	`disabled`	`boolean`	`false`
Deaktiviert die Select-Komponente.
`required`	`required`	`boolean`	`false`
Erfordert eine Auswahl, wenn das Formular gesendet wird.
	`validity`	`ValidityState`	-
Ein `ValidityState`-Objekt, das die Gültigkeitszustände des Elements darstellt.
	`validationMessage`	`string`	-
Validierungsnachricht. Leere Zeichenfolge, wenn gültig.
`autofocus`	`autofocus`	`boolean`	`false`
Gibt an, ob das Element beim Laden der Seite den Fokus erhält.
`tabindex`	`tabIndex`	`number`	-
Die Tab-Reihenfolge des Elements beim Navigieren mit der Tabulatortaste.

Methoden

Name	Parameter	Rückgabewert
`checkValidity`		`boolean`
Überprüft die Gültigkeit des Formularfelds. Wenn es ungültig ist, wird ein `invalid`-Ereignis ausgelöst und `false` zurückgegeben. Wenn gültig, wird `true` zurückgegeben.
`reportValidity`		`boolean`
Überprüft die Gültigkeit des Formularfelds. Wenn es ungültig ist, wird ein `invalid`-Ereignis ausgelöst, `false` zurückgegeben und eine Validierungsnachricht angezeigt. Wenn gültig, wird `true` zurückgegeben.
`setCustomValidity`	`message: string`	`void`
Setzt eine benutzerdefinierte Fehlermeldung. Wenn die Nachricht nicht leer ist, wird das Feld als ungültig betrachtet.
`click`		`void`
Simuliert einen Mausklick auf das Element.
`focus`	`options: FocusOptions` (Optional)	`void`
Setzt den Fokus auf das Element. Der optionale Objektparameter kann eine `preventScroll`-Eigenschaft enthalten. Wenn `preventScroll` auf `true` gesetzt ist, scrollt die Seite nicht, um das fokussierte Element in den sichtbaren Bereich zu bringen.
`blur`		`void`
Entfernt den Fokus vom Element.

Ereignisse

Name
`focus`
Wird ausgelöst, wenn die Select-Komponente den Fokus erhält.
`blur`
Wird ausgelöst, wenn die Select-Komponente den Fokus verliert.
`change`
Wird ausgelöst, wenn sich der ausgewählte Wert ändert.
`invalid`
Wird ausgelöst, wenn die Gültigkeit des Formularsteuerelements überprüft wird und es die Einschränkungen nicht erfüllt.
`clear`
Wird ausgelöst, wenn der Löschen-Button angeklickt wird. Kann mit `event.preventDefault()` verhindert werden.

Slots

Name
Standard
`<mdui-menu-item>`-Elemente.
`icon`
Linkes Icon.
`end-icon`
Rechtes Icon.
`error-icon`
Rechtes Icon bei Validierungsfehler.
`prefix`
Linker Text.
`suffix`
Rechter Text.
`clear-button`
Löschen-Button.
`clear-icon`
Icon im Löschen-Button.
`helper`
Hilfetext unten.

CSS Parts

Name
`chips`
Container für Options-Chips, wenn `multiple` aktiviert ist.
`chip`
Einzelner Chip, der eine Mehrfachauswahl-Option darstellt.
`chip__button`
Das `<button>`-Element innerhalb des Chips.
`chip__label`
Textteil des Chips.
`chip__delete-icon`
Lösch-Icon innerhalb des Chips.
`text-field`
Textfeld, d.h. `<mdui-text-field>`-Element.
`text-field__container`
Container für das Textfeld.
`text-field__icon`
Icon innerhalb des Textfelds.
`text-field__end-icon`
Rechtes Icon innerhalb des Textfelds.
`text-field__error-icon`
Icon, das bei Validierungsfehler im Textfeld angezeigt wird.
`text-field__prefix`
Text auf der linken Seite des Textfelds.
`text-field__suffix`
Text auf der rechten Seite des Textfelds.
`text-field__label`
Beschriftungstext, der über dem Textfeld angezeigt wird.
`text-field__input`
Das `<input>`-Element innerhalb des Textfelds.
`text-field__clear-button`
Löschen-Button innerhalb des Textfelds.
`text-field__clear-icon`
Icon im Löschen-Button des Textfelds.
`text-field__supporting`
Container für unterstützende Informationen am unteren Rand des Textfelds, einschließlich Hilfetext und Fehlermeldungen.
`text-field__helper`
Hilfetext, der am unteren Rand des Textfelds angezeigt wird.
`text-field__error`
Fehlermeldung, die am unteren Rand des Textfelds angezeigt wird.
`menu`
Dropdown-Menü, d.h. `<mdui-menu>`-Element.

Vorherige Seite

RangeSlider

Nächste Seite

SegmentedButton