A Material Design 3 és Web Components alapú új mdui 2 már elérhető, tekintse meg az mdui 2 dokumentációját.

Választómező

A választómező lehetővé teszi a felhasználó számára, hogy több lehetőség közül válasszon.

Használat

Hívás CSS osztályon keresztül
Hívás egyéni attribútumokon keresztül (ha az összetevő dinamikusan jön létre, az inicializáláshoz meg kell hívni az mdui.mutation() metódust)
JavaScript segítségével történő hívás

Kapcsolódó olvasmányok

Material Design tervezési irányelvek: Komponensek – Lenyíló gombok

Stílus

Natív egyszeres választómező (select) összetevő

A szépített stílus eléréséhez csak adja hozzá a .mdui-select osztályt a <select> elemhez, JavaScript hívás nélkül.

Példa

<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>

Natív többszörös választómező (select) összetevő

Adhatja a .mdui-select osztályt a <select multiple> elemhez is, hogy lehetővé tegye a többszöri választást. Azonban nem minden böngésző jeleníti meg jól ezt a stílust.

Példa

<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>

Használat

Hívás egyéni attribútumokkal

Ezzel a módszerrel nem kell JavaScript kódot írni. Csak adja hozzá a .mdui-select osztályt és az mdui-select="options" attribútumot a <select> elemhez.

Ha az összetevő dinamikusan jön létre, az inicializáláshoz meg kell hívni az mdui.mutation() metódust.

Példa

<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>

Példa

<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>

Példa

<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>

JavaScript segítségével történő hívás

Összetevő példányosítása:

// A selector a <select> elem CSS-választója, DOM-eleme vagy HTML-karaktersorozata
// Az options a konfigurációs paraméterek, lásd az alábbi paraméterlistát
var inst = new mdui.Select(selector, options);

Példa

<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>

Paraméter

Paraméter neve	Típus	Alapértelmezett	Leírás
`position`	`string`	`auto`	A választómenü helyzete. Lehetséges értékek: `auto`, `top`, `bottom`
`gutter`	`int`	`16`	A választómenü minimális távolsága az ablak felső és alsó szélétől (pixelben). Ez a paraméter csak akkor érvényes, ha a `position` értéke `auto`.

Metódus

Metódus neve	Leírás
`open()`	A lenyíló menü megnyitása.
`close()`	A lenyíló menü bezárása.
`toggle()`	A lenyíló menü nyitott állapotának váltása.
`handleUpdate()`	Ha dinamikusan módosította a `<select>` elem tartalmát, meg kell hívnia ezt a metódust a lenyíló menü újragenerálásához.
`getState()`	A lenyíló menü aktuális állapotának lekérdezése. Négy állapotot tartalmaz (`opening`, `opened`, `closing`, `closed`).

Esemény

Esemény neve	Leírás	Célpont	Paraméterek
`open.mdui.select`	Az esemény akkor váltódik ki, amikor a lenyíló menü nyitási animációja elkezdődik.	`<select class="mdui-select"></select>`	`event._detail.inst`: Példány
`opened.mdui.select`	Az esemény akkor váltódik ki, amikor a lenyíló menü nyitási animációja befejeződik.
`close.mdui.select`	Az esemény akkor váltódik ki, amikor a lenyíló menü zárási animációja elkezdődik.
`closed.mdui.select`	Az esemény akkor váltódik ki, amikor a lenyíló menü zárási animációja befejeződik.

CSS osztályok listája

Osztálynév	Leírás
`.mdui-select`	Select (választómező) összetevő meghatározása.

Lebegő műveletgomb

Elválasztó