Nowy mdui 2 oparty na Material Design 3 i Web Components jest już dostępny, przejdź do dokumentacji mdui 2.

Lista wyboru

Lista wyboru pozwala użytkownikom wybierać spośród wielu opcji.

Sposób użycia

Wywołanie poprzez klasę CSS
Wywołanie przez atrybut niestandardowy (jeśli komponent jest generowany dynamicznie, należy wywołać mdui.mutation() w celu inicjalizacji)
Wywołanie przez JavaScript

Powiązane artykuły

Wytyczne projektowe Material Design: Komponenty - Lista wyboru

Styl

Natywny komponent select pojedynczego wyboru

Wystarczy dodać klasę .mdui-select do elementu <select>, aby nadać mu ostylowany wygląd, bez konieczności wywoływania JavaScript.

Przykład

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

Natywny komponent select wielokrotnego wyboru

Można również dodać klasę .mdui-select do elementu <select multiple>, aby umożliwić wielokrotny wybór. Jednak nie wszystkie przeglądarki dobrze wyświetlają ten styl.

Przykład

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

Sposób użycia

Wywołanie przez atrybuty

Ta metoda nie wymaga pisania kodu JavaScript. Wystarczy dodać klasę .mdui-select oraz atrybut mdui-select="options" do elementu <select>.

Jeśli komponent jest generowany dynamicznie, należy wywołać mdui.mutation() w celu inicjalizacji.

Przykład

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

Przykład

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

Przykład

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

Wywołanie przez JavaScript

Tworzenie instancji komponentu:

// selector oznacza selektor CSS, element DOM lub fragment HTML elementu <select>
// options oznaczają parametry konfiguracyjne; patrz lista parametrów poniżej
var inst = new mdui.Select(selector, options);

Przykład

<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

Nazwa parametru	Typ	Wartość domyślna	Opis
`position`	`string`	`auto`	Pozycja menu wyboru. Obejmuje `auto`, `top`, `bottom`
`gutter`	`int`	`16`	Minimalny odstęp menu wyboru od górnej i dolnej krawędzi okna, w px. Ten parametr jest używany tylko wtedy, gdy `position` ma wartość `auto`.

Metoda

Nazwa metody	Opis
`open()`	Otwiera listę rozwijaną.
`close()`	Zamyka listę rozwijaną.
`toggle()`	Przełącza stan otwarcia listy rozwijanej.
`handleUpdate()`	Gdy dynamicznie zmienisz zawartość elementu `<select>`, musisz wywołać tę metodę, aby ponownie wygenerować listę rozwijaną.
`getState()`	Zwraca bieżący stan otwarcia listy rozwijanej. Zawiera cztery stany (`opening`, `opened`, `closing`, `closed`).

Zdarzenie

Nazwa zdarzenia	Opis	Cel	Parametry
`open.mdui.select`	Zdarzenie wyzwalane przed rozpoczęciem animacji otwierania listy rozwijanej.	`<select class="mdui-select"></select>`	`event._detail.inst`: Instancja
`opened.mdui.select`	Zdarzenie wyzwalane po zakończeniu animacji otwierania listy rozwijanej.
`close.mdui.select`	Zdarzenie wyzwalane przed rozpoczęciem animacji zamykania listy rozwijanej.
`closed.mdui.select`	Zdarzenie wyzwalane po zakończeniu animacji zamykania listy rozwijanej.

Lista klas CSS

Nazwa klasy	Opis
`.mdui-select`	Definiuje komponent Select.

Pływający przycisk akcji

Separator