SelectVýběr

Rozbalovací výběr zobrazuje možnosti v rozbalovací nabídce a usnadňuje rychlý výběr požadované hodnoty.

Tato stránka se zabývá především způsobem použití komponenty <mdui-select>. Podrobnosti o položkách rozbalovací nabídky najdete v <mdui-menu-item>.

Způsob použití

Importujte komponenty podle potřeby:

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

Importujte TypeScript typy komponent podle potřeby:

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

Příklad použití:

Položka 1

Položka 2

<mdui-select value="item-1">
  <mdui-menu-item value="item-1">Položka 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Položka 2</mdui-menu-item>
</mdui-select>

Nastavením atributů icon a end-icon můžete přidat ikony Material Icons na levou a pravou stranu rozbalovacího výběru. Lze také přidat prvky na levou a pravou stranu rozbalovacího výběru pomocí slotů icon a end-icon.

Položka 1

Položka 2

Položka 1

Položka 2

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

<br/><br/>

<mdui-select value="item-1">
  <mdui-menu-item value="item-1">Položka 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Položka 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>

Zdrojový kód

Nastavením atributů prefix a suffix můžete přidat text na levou i pravou stranu rozbalovacího výběru. Lze také přidat textové prvky na levou a pravou stranu rozbalovacího výběru pomocí slotů prefix a suffix. Tyto texty se zobrazí pouze tehdy, když je rozbalovací výběr zaměřený nebo má hodnotu.

Položka 1

Položka 2

Položka 1

Položka 2

$ /100

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

<br/><br/>

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

Zdrojový kód

API

Vlastnosti

Atribut	Vlastnost	Typ	Výchozí
`variant`	`variant`	`'filled' \| 'outlined'`	`'filled'`
Styl výběru. Možné hodnoty: `filled`: Výběr s výplní a výraznějším vzhledem. `outlined`: Výběr s okrajem, méně výrazný vizuální efekt.
`multiple`	`multiple`	`boolean`	`false`
Určuje, zda je povolen vícenásobný výběr.
`name`	`name`	`string`	`''`
Název výběru, který se odešle spolu s daty formuláře.
`value`	`value`	`string \| string[]`	`''`
Hodnota výběru, která se odešle spolu s daty formuláře. Pokud není zadán atribut `multiple`, je tato hodnota řetězec; pokud je zadán atribut `multiple`, je tato hodnota pole řetězců. HTML atribut lze nastavit pouze na řetězcovou hodnotu; pokud je třeba nastavit hodnotu pole, nastavte ji pomocí JavaScriptové vlastnosti.
	`defaultValue`	`string \| string[]`	`''`
Výchozí vybraná hodnota. Při resetování formuláře se hodnota obnoví na tuto výchozí hodnotu. Tuto vlastnost lze nastavit pouze pomocí JavaScriptu.
`label`	`label`	`string`	-
Text popisku.
`placeholder`	`placeholder`	`string`	-
Zástupný text.
`helper`	`helper`	`string`	-
Pomocný text pod výběrem. Lze také nastavit pomocí `slot="helper"`.
`clearable`	`clearable`	`boolean`	`false`
Určuje, zda lze výběr vyprázdnit.
`clear-icon`	`clearIcon`	`string`	-
Název ikony Material Icons pro tlačítko vymazání zobrazené na pravé straně výběru, pokud je výběr vyprázdnitelný. Lze také nastavit pomocí `slot="clear-icon"`.
`placement`	`placement`	`'auto' \| 'bottom' \| 'top'`	`'auto'`
Umístění výběru. Možné hodnoty: `auto`: Automatické určení polohy. `bottom`: Umístění dole. `top`: Umístění nahoře.
`end-aligned`	`endAligned`	`boolean`	`false`
Určuje, zda má být text zarovnán doprava.
`prefix`	`prefix`	`string`	-
Text předpony výběru. Zobrazí se pouze v režimu fokusu nebo pokud má výběr hodnotu. Lze také nastavit pomocí `slot="prefix"`.
`suffix`	`suffix`	`string`	-
Text přípony výběru. Zobrazí se pouze v režimu fokusu nebo pokud má výběr hodnotu. Lze také nastavit pomocí `slot="suffix"`.
`icon`	`icon`	`string`	-
Název ikony z knihovny Material Icons pro předponovou ikonu výběru. Lze také nastavit pomocí `slot="icon"`.
`end-icon`	`endIcon`	`string`	-
Název ikony z knihovny Material Icons pro příponovou ikonu výběru. Lze také nastavit pomocí `slot="end-icon"`.
`error-icon`	`errorIcon`	`string`	-
Název ikony Material Icons zobrazené na pravé straně výběru, pokud selže validace pole formuláře. Lze také nastavit pomocí `slot="error-icon"`.
`form`	`form`	`string`	-
Přidružený formulář `<form>`. Hodnotou by mělo být `id` prvku `<form>` na stejné stránce. Pokud není atribut zadán, musí být tento prvek potomkem `<form>`. Díky tomuto atributu jej však lze umístit kamkoli na stránku, nejen jako potomka `<form>`.
`readonly`	`readonly`	`boolean`	`false`
Určuje, zda je prvek v režimu pouze pro čtení.
`disabled`	`disabled`	`boolean`	`false`
Určuje, zda je prvek zakázaný.
`required`	`required`	`boolean`	`false`
Určuje, zda musí být při odesílání formuláře toto pole vyplněno.
	`validity`	`ValidityState`	-
Objekt s informacemi o stavu validace formuláře; podrobnosti viz `ValidityState`.
	`validationMessage`	`string`	-
Pokud pole formuláře neprojde validací, tato vlastnost obsahuje chybovou zprávu. Při úspěšné validaci je výsledkem prázdný řetězec.
`autofocus`	`autofocus`	`boolean`	`false`
Určuje, zda prvek získá automaticky fokus po dokončení načítání stránky.
`tabindex`	`tabIndex`	`number`	-
Pořadí prvku při přepínání fokusu pomocí klávesy Tab.

Metody

Název	Parametry	Vrací
`checkValidity`		`boolean`
Zkontroluje, zda pole formuláře prošlo validací. Pokud ne, vrátí `false` a spustí událost `invalid`; pokud ano, vrátí `true`.
`reportValidity`		`boolean`
Zkontroluje, zda pole formuláře prošlo validací. Pokud ne, vrátí `false` a spustí událost `invalid`; pokud ano, vrátí `true`. Při neúspěšné validaci se zobrazí chybová zpráva.
`setCustomValidity`	`message: string`	`void`
Nastaví vlastní chybový text. Dokud tento text není prázdný, znamená to, že pole neprošlo validací.
`click`		`void`
Simuluje kliknutí myší na prvek.
`focus`	`options: FocusOptions` (Volitelné)	`void`
Nastaví fokus na aktuální prvek. Lze předat objekt jako parametr s vlastnostmi: `preventScroll`: Ve výchozím nastavení se po získání fokusu stránka posune tak, aby byl prvek viditelný. Pokud nechcete, aby se stránka posouvala, nastavte tuto vlastnost na `true`.
`blur`		`void`
Odebere fokus z aktuálního prvku.

Události

Název
`focus`
Spustí se při získání fokusu.
`blur`
Spustí se při ztrátě fokusu.
`change`
Spustí se při změně vybrané hodnoty.
`invalid`
Spustí se, pokud pole formuláře neprojde validací.
`clear`
Spustí se při kliknutí na tlačítko pro vyprázdnění generované atributem `clearable`. Vyprázdnění výběru lze zabránit voláním `event.preventDefault()`.

Slots

Název
(výchozí)
Prvky `<mdui-menu-item>`.
`icon`
Levá ikona.
`end-icon`
Pravá ikona.
`error-icon`
Pravá ikona pro stav selhání validace.
`prefix`
Levý text.
`suffix`
Pravý text.
`clear-button`
Tlačítko pro vyprázdnění.
`clear-icon`
Ikona v tlačítku pro vyprázdnění.
`helper`
Pomocný text dole.

CSS Parts

Název
`chips`
Kontejner pro umístění chipů odpovídajících vybraným hodnotám při vícenásobném výběru.
`chip`
Chip odpovídající každé vybrané hodnotě při vícenásobném výběru.
`chip__button`
Prvek `<button>` uvnitř chipu.
`chip__label`
Text uvnitř chipu.
`chip__delete-icon`
Ikona odstranění uvnitř chipu.
`text-field`
Textové pole, tj. prvek `<mdui-text-field>`.
`text-field__container`
Kontejner textového pole uvnitř textového pole.
`text-field__icon`
Levá ikona uvnitř textového pole.
`text-field__end-icon`
Pravá ikona uvnitř textového pole.
`text-field__error-icon`
Pravá ikona pro stav selhání validace uvnitř textového pole.
`text-field__prefix`
Levý text uvnitř textového pole.
`text-field__suffix`
Pravý text uvnitř textového pole.
`text-field__label`
Text popisku uvnitř textového pole.
`text-field__input`
Prvek `<input>` uvnitř textového pole.
`text-field__clear-button`
Tlačítko pro vyprázdnění uvnitř textového pole.
`text-field__clear-icon`
Ikona v tlačítku pro vyprázdnění uvnitř textového pole.
`text-field__supporting`
Kontejner pro pomocné informace dole uvnitř textového pole, zahrnuje helper a error.
`text-field__helper`
Pomocný text dole uvnitř textového pole.
`text-field__error`
Popis chyby dole uvnitř textového pole.
`menu`
Rozbalovací nabídka, tj. prvek `<mdui-menu>`.

Předchozí kapitola

RangeSlider Posuvník rozsahu

Další kapitola

SegmentedButton Segmentované tlačítko

SelectVýběr

Způsob použití

Příklady

Tvar

Podpora více výběru

Podpůrný text

Režim pouze pro čtení

Zakázaný režim

Vymazatelné

Umístění rozbalovací nabídky

Zarovnání textu vpravo

Předponový/příponový text a ikona

API

Vlastnosti

Metody

Události

Slots

CSS Parts