near_me
Erste Schritte
keyboard_arrow_downlayers
Stil
keyboard_arrow_downwidgets
Komponenten
keyboard_arrow_downlocal_mall
Ressourcen
keyboard_arrow_downDas neue mdui 2 auf Basis von Material Design 3 und Web Components ist da. Zur mdui 2 Dokumentation wechseln.
Select
Die Dropdown-Auswahl ermöglicht es Nutzerinnen und Nutzern, zwischen mehreren Optionen zu wählen.
Verwendung
- Aufruf über CSS-Klasse
- Aufruf über benutzerdefinierte Attribute (wenn die Komponente dynamisch generiert wird, ist zur Initialisierung
mdui.mutation()erforderlich) - Aufruf über JavaScript
Verwandte Themen
Stil
Native Einzelauswahl select-Komponente
Fügen Sie die Klasse .mdui-select zum Element <select> hinzu, um dem Element den verschönerten Stil zu verleihen, ohne JavaScript aufrufen zu müssen.
Beispiel
<select class="mdui-select">
<option value="1" selected>State 1</option>
<option value="2">State 2</option>
<option value="3">State 3</option>
<option value="4">State 4</option>
<option value="5">State 5</option>
<option value="6">State 6</option>
</select>Native Mehrfachauswahl select-Komponente
Sie können die Klasse .mdui-select auch zum Element <select multiple> hinzufügen, um eine Mehrfachauswahl zu ermöglichen. Dies wird jedoch nicht von allen Browsern gut dargestellt.
Beispiel
<select multiple size="8" class="mdui-select">
<optgroup label="Fonts">
<option>Roboto</option>
<option>Calibri</option>
<option>Courier New</option>
<option>Verdana</option>
</optgroup>
<optgroup label="Size">
<option>50%</option>
<option>75%</option>
<option>90%</option>
<option>100%</option>
</optgroup>
<optgroup label="header">
<option>h1</option>
<option>h2</option>
<option>h3</option>
<option>h4</option>
</optgroup>
</select>Verwendung
Aufruf über Attribute
Bei dieser Methode ist kein JavaScript-Code erforderlich. Fügen Sie dem Element <select> einfach die Klasse .mdui-select und das Attribut mdui-select="options" hinzu.
Wenn die Komponente dynamisch generiert wird, ist zur Initialisierung mdui.mutation() erforderlich.
Beispiel
<select class="mdui-select" mdui-select>
<option value="1">State 1</option>
<option value="2">State 2</option>
<option value="3" disabled>State 3</option>
<option value="4">State 4</option>
<option value="5">State 5</option>
<option value="6">State 6</option>
</select>Beispiel
<select class="mdui-select" mdui-select="{position: 'top'}">
<option value="1">State 1</option>
<option value="2">State 2</option>
<option value="3" disabled>State 3</option>
<option value="4">State 4</option>
<option value="5">State 5</option>
<option value="6">State 6</option>
</select>Beispiel
<select class="mdui-select" mdui-select="{position: 'bottom'}">
<option value="1">State 1</option>
<option value="2">State 2</option>
<option value="3" disabled>State 3</option>
<option value="4">State 4</option>
<option value="5">State 5</option>
<option value="6">State 6</option>
</select>Aufruf über JavaScript
Komponente instanziieren:
// selector ist der CSS-Selektor des <select>-Elements oder das DOM-Element oder der HTML-String
// options sind die Konfigurationsparameter, siehe die Parameterliste unten
var inst = new mdui.Select(selector, options);Beispiel
<select class="mdui-select" id="demo-js">
<option value="1">State 1</option>
<option value="2">State 2</option>
<option value="3" disabled>State 3</option>
<option value="4">State 4</option>
<option value="5">State 5</option>
<option value="6">State 6</option>
</select>
<script>
var inst = new mdui.Select('#demo-js');
</script>Parameter
| Parametername | Typ | Standardwert | Beschreibung |
|---|---|---|---|
position | string | auto | Position des Auswahlmenüs. Beinhaltet auto, top, bottom |
gutter | int | 16 | Gibt an, wie viel Abstand in px das Auswahlmenü mindestens zu den oberen und unteren Rändern des Fensters halten soll. Dieser Parameter ist nur wirksam, wenn position auf auto gesetzt ist. |
Methode
| Methodenname | Beschreibung |
|---|---|
open() | Öffnet das Dropdown-Menü. |
close() | Schließt das Dropdown-Menü. |
toggle() | Schaltet den Öffnungszustand des Dropdown-Menüs um. |
handleUpdate() | Wenn Sie den Inhalt des Elements <select> dynamisch geändert haben, müssen Sie diese Methode aufrufen, um das Dropdown-Menü neu zu generieren. |
getState() | Gibt den aktuellen Öffnungszustand des Dropdown-Menüs zurück. Enthält vier Zustände (opening, opened, closing, closed). |
Ereignis
| Ereignisname | Beschreibung | Ziel | Parameter |
|---|---|---|---|
open.mdui.select | Das Ereignis wird ausgelöst, wenn die Öffnungsanimation des Dropdown-Menüs beginnt. | <select class="mdui-select"></select> | event._detail.inst: Instanz |
opened.mdui.select | Das Ereignis wird ausgelöst, wenn die Öffnungsanimation des Dropdown-Menüs endet. | ||
close.mdui.select | Das Ereignis wird ausgelöst, wenn die Schließanimation des Dropdown-Menüs beginnt. | ||
closed.mdui.select | Das Ereignis wird ausgelöst, wenn die Schließanimation des Dropdown-Menüs endet. |