SelectLista wyboru

Lista wyboru wyświetla opcje w rozwijanym menu, ułatwiając szybki wybór odpowiedniej treści.

Ta strona dokumentuje użycie komponentu <mdui-select>. W przypadku użycia elementów menu rozwijanego, zobacz <mdui-menu-item>.

Sposób użycia

Zaimportuj komponenty:

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

Zaimportuj typy TypeScript komponentów:

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

Przykład użycia:

Pozycja 1

Pozycja 2

<mdui-select value="item-1">
  <mdui-menu-item value="item-1">Pozycja 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Pozycja 2</mdui-menu-item>
</mdui-select>

Ustaw atrybuty prefix i suffix, aby dodać tekst odpowiednio po lewej i prawej stronie listy wyboru. Możesz również użyć slotów prefix i suffix do dodania elementów tekstowych. Te teksty są wyświetlane tylko wtedy, gdy lista wyboru jest skupiona lub ma wartość.

Pozycja 1

Pozycja 2

Pozycja 1

Pozycja 2

$ /100

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

<br/><br/>

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

Źródło

API

Właściwości

Atrybut HTML	Właściwość JavaScript	Typ	Domyślne
`variant`	`variant`	`'filled' \| 'outlined'`	`'filled'`
Styl listy wyboru. Dozwolone wartości: `filled`: Lista wyboru z kolorem tła, silniejszy efekt wizualny `outlined`: Lista wyboru z obramowaniem, słabszy efekt wizualny
`multiple`	`multiple`	`boolean`	`false`
Określa, czy lista wyboru obsługuje wielokrotny wybór.
`name`	`name`	`string`	`''`
Nazwa listy wyboru, która zostanie wysłana wraz z danymi formularza
`value`	`value`	`string \| string[]`	`''`
Wartość listy wyboru, która zostanie wysłana wraz z danymi formularza. Jeśli atrybut `multiple` nie jest określony, wartością jest ciąg znaków; jeśli atrybut `multiple` jest określony, wartością jest tablica ciągów znaków. Atrybut HTML może ustawić tylko wartość ciągu znaków; jeśli chcesz ustawić wartość tablicy, ustaw ją za pomocą właściwości JavaScript.
	`defaultValue`	`string \| string[]`	`''`
Domyślnie zaznaczona wartość. Po zresetowaniu formularza zostanie przywrócona do tej wartości. Ten atrybut można ustawić tylko za pomocą właściwości JavaScript
`label`	`label`	`string`	-
Tekst etykiety
`placeholder`	`placeholder`	`string`	-
Tekst zastępczy
`helper`	`helper`	`string`	-
Tekst pomocniczy pod listą wyboru. Można również ustawić za pomocą `slot="helper"`
`clearable`	`clearable`	`boolean`	`false`
Określa, czy można wyczyścić listę wyboru.
`clear-icon`	`clearIcon`	`string`	-
Nazwa ikony Material Icons dla przycisku czyszczenia wyświetlanego po prawej stronie listy wyboru, gdy lista jest możliwa do wyczyszczenia. Można również ustawić za pomocą `slot="clear-icon"`
`placement`	`placement`	`'auto' \| 'bottom' \| 'top'`	`'auto'`
Pozycja listy wyboru. Dozwolone wartości: `auto`: Automatyczne określenie pozycji `bottom`: Poniżej `top`: Powyżej
`end-aligned`	`endAligned`	`boolean`	`false`
Określa, czy tekst ma być wyrównany do prawej.
`prefix`	`prefix`	`string`	-
Tekst prefiksu listy wyboru. Wyświetlany tylko w stanie fokusu lub gdy lista wyboru ma wartość. Można również ustawić za pomocą `slot="prefix"`
`suffix`	`suffix`	`string`	-
Tekst sufiksu listy wyboru. Wyświetlany tylko w stanie fokusu lub gdy lista wyboru ma wartość. Można również ustawić za pomocą `slot="suffix"`
`icon`	`icon`	`string`	-
Nazwa ikony Material Icons dla ikony prefiksu listy wyboru. Można również ustawić za pomocą `slot="icon"`
`end-icon`	`endIcon`	`string`	-
Nazwa ikony Material Icons dla ikony sufiksu listy wyboru. Można również ustawić za pomocą `slot="end-icon"`
`error-icon`	`errorIcon`	`string`	-
Nazwa ikony Material Icons wyświetlana po prawej stronie listy wyboru, gdy walidacja pola formularza nie powiedzie się. Można również ustawić za pomocą `slot="error-icon"`
`form`	`form`	`string`	-
Powiązany element `<form>`. Wartość tego atrybutu powinna być `id` elementu `<form>` na tej samej stronie. Jeśli ten atrybut nie jest określony, element ten musi być elementem potomnym elementu `<form>`. Ten atrybut umożliwia umieszczenie elementu w dowolnym miejscu na stronie, nie tylko jako element potomny elementu `<form>`.
`readonly`	`readonly`	`boolean`	`false`
Określa, czy jest w stanie tylko do odczytu.
`disabled`	`disabled`	`boolean`	`false`
Określa, czy lista wyboru jest wyłączona.
`required`	`required`	`boolean`	`false`
Określa, czy wybranie wartości jest wymagane podczas przesyłania formularza.
	`validity`	`ValidityState`	-
Obiekt stanu walidacji formularza, zobacz `ValidityState`
	`validationMessage`	`string`	-
Jeśli walidacja formularza nie powiedzie się, ten atrybut zawiera komunikat informacyjny. Jeśli walidacja się powiedzie, ten atrybut jest pustym ciągiem znaków
`autofocus`	`autofocus`	`boolean`	`false`
Określa, czy element automatycznie uzyskuje fokus po załadowaniu strony.
`tabindex`	`tabIndex`	`number`	-
Określa kolejność elementu podczas nawigacji za pomocą klawiatury (przycisk Tab).

Metody

Nazwa	Parametry	Zwraca
`checkValidity`		`boolean`
Sprawdza poprawność pola formularza. Jeśli nie, zwraca `false` i wywołuje zdarzenie `invalid`; jeśli tak, zwraca `true`
`reportValidity`		`boolean`
Sprawdza poprawność pola formularza. Jeśli nie, zwraca `false` i wywołuje zdarzenie `invalid`; jeśli tak, zwraca `true`. Jeśli walidacja się nie powiedzie, na komponencie wyświetlany jest również komunikat o niepowodzeniu walidacji.
`setCustomValidity`	`message: string`	`void`
Ustawia niestandardowy komunikat o błędzie. Dopóki ten tekst nie jest pusty, oznacza to, że pole nie przeszło walidacji
`click`		`void`
Symuluje kliknięcie myszą na elemencie
`focus`	`options: FocusOptions` (Opcjonalny)	`void`
Przenosi fokus na bieżący element. Można przekazać obiekt jako parametr, którego właściwości obejmują: `preventScroll`: Domyślnie, po otrzymaniu fokusu przez element, strona przewinie się, aby go wyświetlić. Aby zapobiec przewijaniu strony, ustaw tę właściwość na `true`.
`blur`		`void`
Usuwa fokus z bieżącego elementu

Zdarzenia

Nazwa
`focus`
Wywoływane po otrzymaniu fokusu
`blur`
Wywoływane po utracie fokusu
`change`
Wywoływane po zmianie zaznaczonej wartości
`invalid`
Wywoływane, gdy pole formularza nie przejdzie walidacji
`clear`
Wywoływane po kliknięciu przycisku czyszczenia generowanego przez atrybut `clearable`. Można zapobiec wyczyszczeniu listy wyboru, wywołując `event.preventDefault()`

Slots

Nazwa
(domyślny)
Elementy `<mdui-menu-item>`
`icon`
Ikona po lewej stronie
`end-icon`
Ikona po prawej stronie
`error-icon`
Ikona po prawej stronie w stanie błędu walidacji
`prefix`
Tekst po lewej stronie
`suffix`
Tekst po prawej stronie
`clear-button`
Przycisk czyszczenia
`clear-icon`
Ikona w przycisku czyszczenia
`helper`
Tekst pomocniczy na dole

CSS Parts

Nazwa
`chips`
Kontener na chipy dla zaznaczonych wartości w trybie wielokrotnego wyboru
`chip`
Chip dla każdej zaznaczonej wartości w trybie wielokrotnego wyboru
`chip__button`
Element `<button>` wewnątrz chipa
`chip__label`
Tekst wewnątrz chipa
`chip__delete-icon`
Ikona usuwania wewnątrz chipa
`text-field`
Pole tekstowe, tj. element `<mdui-text-field>`
`text-field__container`
Kontener pola tekstowego wewnątrz text-field
`text-field__icon`
Ikona po lewej stronie wewnątrz text-field
`text-field__end-icon`
Ikona po prawej stronie wewnątrz text-field
`text-field__error-icon`
Ikona po prawej stronie w stanie błędu walidacji wewnątrz text-field
`text-field__prefix`
Tekst po lewej stronie wewnątrz text-field
`text-field__suffix`
Tekst po prawej stronie wewnątrz text-field
`text-field__label`
Tekst etykiety wewnątrz text-field
`text-field__input`
Element `<input>` wewnątrz text-field
`text-field__clear-button`
Przycisk czyszczenia wewnątrz text-field
`text-field__clear-icon`
Ikona w przycisku czyszczenia wewnątrz text-field
`text-field__supporting`
Kontener na dodatkowe informacje na dole wewnątrz text-field, obejmujący helper i error
`text-field__helper`
Tekst pomocniczy na dole wewnątrz text-field
`text-field__error`
Tekst opisu błędu na dole wewnątrz text-field
`menu`
Menu rozwijane, tj. element `<mdui-menu>`

Poprzedni rozdział

RangeSlider Suwak zakresu

Następny rozdział

SegmentedButton Przycisk segmentowy

SelectLista wyboru

Sposób użycia

Przykłady

Kształt

Obsługa wielokrotnego wyboru

Tekst pomocniczy

Tryb tylko do odczytu

Tryb wyłączony

Możliwość wyczyszczenia

Pozycja menu rozwijanego

Wyrównanie tekstu do prawej

Tekst i ikony przed i po

API

Właściwości

Metody

Zdarzenia

Slots

CSS Parts