Zcela nové mdui 2 založené na Material Design 3 a Web Components bylo vydáno, přejděte na dokumentaci mdui 2.

Výběr

Výběr umožňuje uživatelům vybrat si z více možností.

Způsob volání

Volání prostřednictvím třídy CSS
Volání prostřednictvím vlastního atributu (pokud je komponenta dynamicky generovaná, je nutné pro její inicializaci zavolat mdui.mutation())
Volání přes JavaScript

Související čtení

Designové zásady Material Design: Komponenty - Výběr

Styl

Nativní prvek select pro jeden výběr

Přidejte třídu .mdui-select k prvku <select> a prvek získá stylizovaný vzhled bez nutnosti volat JavaScript.

Příklad

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

Nativní prvek select pro vícenásobný výběr

Můžete také přidat třídu .mdui-select k prvku <select multiple>, čímž umožníte vícenásobný výběr. Avšak ne všechny prohlížeče tento styl zobrazují správně.

Příklad

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

Způsob volání

Volání přes atributy

Tímto způsobem není třeba psát kód v JavaScriptu. Stačí k prvku <select> přidat třídu .mdui-select a atribut mdui-select="options".

Pokud je komponenta dynamicky generovaná, musíte pro inicializaci zavolat mdui.mutation().

Příklad

<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říklad

<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říklad

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

Volání přes JavaScript

Inicializuje komponentu:

// selector je CSS selektor prvku <select>, DOM prvek nebo HTML řetězec
// options jsou konfigurační parametry, viz seznam parametrů níže
var inst = new mdui.Select(selector, options);

Příklad

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

Parametr

Název parametru	Typ	Výchozí hodnota	Popis
`position`	`string`	`auto`	Pozice nabídky výběru. Možnosti: `auto`, `top`, `bottom`
`gutter`	`int`	`16`	Minimální vzdálenost nabídky výběru od horního a dolního okraje okna (v px). Tento parametr je účinný pouze tehdy, je-li `position` nastaveno na `auto`.

Metoda

Název metody	Popis
`open()`	Otevře rozbalovací nabídku.
`close()`	Zavře rozbalovací nabídku.
`toggle()`	Přepne stav otevření rozbalovací nabídky.
`handleUpdate()`	Pokud jste dynamicky upravili obsah prvku `<select>`, musíte zavolat tuto metodu pro opětovné vygenerování rozbalovací nabídky.
`getState()`	Vrátí aktuální stav otevření rozbalovací nabídky. Celkem obsahuje čtyři stavy (`opening`, `opened`, `closing`, `closed`).

Událost

Název události	Popis	Cíl	Parametry
`open.mdui.select`	Událost bude spuštěna, když rozbalovací nabídka začne animaci otevírání.	`<select class="mdui-select"></select>`	`event._detail.inst`: instance
`opened.mdui.select`	Událost bude spuštěna, když rozbalovací nabídka dokončí animaci otevírání.
`close.mdui.select`	Událost bude spuštěna, když rozbalovací nabídka začne animaci zavírání.
`closed.mdui.select`	Událost bude spuštěna, když rozbalovací nabídka dokončí animaci zavírání.

Seznam CSS tříd

Název třídy	Popis
`.mdui-select`	Definuje komponentu Select.

Plovoucí akční tlačítko

Oddělovač