SegmentedButtonPrzycisk segmentowy

Komponent segmentowanego przycisku grupuje zestaw przycisków, służących do wyboru opcji, przełączania widoków lub sortowania elementów.

Sposób użycia

Zaimportuj komponenty:

import 'mdui/components/segmented-button-group.js';
import 'mdui/components/segmented-button.js';

Zaimportuj typy TypeScript komponentów:

import type { SegmentedButtonGroup } from 'mdui/components/segmented-button-group.js';
import type { SegmentedButton } from 'mdui/components/segmented-button.js';

Przykład użycia:

Dzień

Tydzień

Miesiąc

<mdui-segmented-button-group>
  <mdui-segmented-button>Dzień</mdui-segmented-button>
  <mdui-segmented-button>Tydzień</mdui-segmented-button>
  <mdui-segmented-button>Miesiąc</mdui-segmented-button>
</mdui-segmented-button-group>

Ustawienie atrybutu selects na single w elemencie <mdui-segmented-button-group> umożliwia tryb pojedynczego wyboru. Wartość value komponentu <mdui-segmented-button-group> jest wtedy równa wartości value zaznaczonego <mdui-segmented-button>.

Dzień

Tydzień

Miesiąc

Dzień

Tydzień

Miesiąc

<mdui-segmented-button-group selects="single">
  <mdui-segmented-button value="day">Dzień</mdui-segmented-button>
  <mdui-segmented-button value="week">Tydzień</mdui-segmented-button>
  <mdui-segmented-button value="month">Miesiąc</mdui-segmented-button>
</mdui-segmented-button-group>

<mdui-segmented-button-group selects="single" value="week">
  <mdui-segmented-button value="day">Dzień</mdui-segmented-button>
  <mdui-segmented-button value="week">Tydzień</mdui-segmented-button>
  <mdui-segmented-button value="month">Miesiąc</mdui-segmented-button>
</mdui-segmented-button-group>

Źródło

Tryb wielokrotnego wyboru

Ustawienie atrybutu selects na multiple w elemencie <mdui-segmented-button-group> umożliwia tryb wielokrotnego wyboru. Wartość value komponentu <mdui-segmented-button-group> jest wtedy tablicą wartości value zaznaczonych <mdui-segmented-button>.

Uwaga: W trybie wielokrotnego wyboru, wartość value komponentu <mdui-segmented-button-group> jest tablicą i może być odczytywana i ustawiana tylko za pomocą właściwości JavaScript.

Dzień

Tydzień

Miesiąc

Dzień

Tydzień

Miesiąc

<mdui-segmented-button-group selects="multiple">
  <mdui-segmented-button value="day">Dzień</mdui-segmented-button>
  <mdui-segmented-button value="week">Tydzień</mdui-segmented-button>
  <mdui-segmented-button value="month">Miesiąc</mdui-segmented-button>
</mdui-segmented-button-group>

<mdui-segmented-button-group selects="multiple" class="demo-multiple">
  <mdui-segmented-button value="day">Dzień</mdui-segmented-button>
  <mdui-segmented-button value="week">Tydzień</mdui-segmented-button>
  <mdui-segmented-button value="month">Miesiąc</mdui-segmented-button>
</mdui-segmented-button-group>

<script>
  // Ustaw domyślnie zaznaczone week i month
  const group = document.querySelector(".demo-multiple");
  group.value = ["week", "month"];
</script>

Źródło

Ikona

Na elemencie <mdui-segmented-button> możesz użyć atrybutów icon i end-icon, aby dodać ikony Material Icons odpowiednio po lewej i prawej stronie przycisku. Możesz również użyć slotów icon i end-icon do dodania elementów po lewej i prawej stronie.

Dzień

Tydzień

Miesiąc

<mdui-segmented-button-group>
  <mdui-segmented-button icon="search">Dzień</mdui-segmented-button>
  <mdui-segmented-button end-icon="arrow_forward">Tydzień</mdui-segmented-button>
  <mdui-segmented-button>
    Miesiąc
    <mdui-icon slot="icon" name="downloading"></mdui-icon>
    <mdui-icon slot="end-icon" name="attach_file"></mdui-icon>
  </mdui-segmented-button>
</mdui-segmented-button-group>

Źródło

Na elemencie <mdui-segmented-button> możesz dodać atrybut selected-icon, aby ustawić ikonę Material Icons dla stanu zaznaczonego. Możesz również użyć slotu selected-icon.

Dzień

Tydzień

<mdui-segmented-button-group selects="multiple">
  <mdui-segmented-button value="day" selected-icon="cloud_done">Dzień</mdui-segmented-button>
  <mdui-segmented-button value="week">
    <mdui-icon slot="selected-icon" name="cloud_done"></mdui-icon>
    Tydzień
  </mdui-segmented-button>
</mdui-segmented-button-group>

Źródło

Link

Ustawienie atrybutu href na elemencie <mdui-segmented-button> zmienia przycisk w link. Dodatkowo możesz użyć atrybutów związanych z linkami: download, target, rel.

Link

Tydzień

Miesiąc

<mdui-segmented-button-group>
  <mdui-segmented-button href="https://www.mdui.org" target="_blank">Link</mdui-segmented-button>
  <mdui-segmented-button>Tydzień</mdui-segmented-button>
  <mdui-segmented-button>Miesiąc</mdui-segmented-button>
</mdui-segmented-button-group>

Źródło

Stan wyłączony i ładowania

Dodanie atrybutu disabled do elementu <mdui-segmented-button-group> wyłącza całą grupę przycisków segmentowanych.

Dzień

Tydzień

Miesiąc

<mdui-segmented-button-group disabled>
  <mdui-segmented-button>Dzień</mdui-segmented-button>
  <mdui-segmented-button>Tydzień</mdui-segmented-button>
  <mdui-segmented-button>Miesiąc</mdui-segmented-button>
</mdui-segmented-button-group>

Źródło

Dodanie atrybutu disabled do elementu <mdui-segmented-button> wyłącza konkretny przycisk; dodanie atrybutu loading dodaje stan ładowania.

Dzień

Tydzień

Miesiąc

Rok

<mdui-segmented-button-group>
  <mdui-segmented-button>Dzień</mdui-segmented-button>
  <mdui-segmented-button disabled>Tydzień</mdui-segmented-button>
  <mdui-segmented-button loading>Miesiąc</mdui-segmented-button>
  <mdui-segmented-button disabled loading>Rok</mdui-segmented-button>
</mdui-segmented-button-group>

Źródło

`mdui-segmented-button-group` API

Właściwości

Atrybut HTML	Właściwość JavaScript	Typ	Domyślne
`full-width`	`fullWidth`	`boolean`	`false`
Określa, czy wypełnić całą szerokość elementu nadrzędnego.
`selects`	`selects`	`'single' \| 'multiple'`	-
Stan zaznaczalności przycisku segmentowanego, domyślnie niezaznaczalny. Dozwolone wartości: `single`: Pojedynczy wybór `multiple`: Wielokrotny wybór
`disabled`	`disabled`	`boolean`	`false`
Określa, czy grupa przycisków segmentowanych jest wyłączona.
`required`	`required`	`boolean`	`false`
Określa, czy zaznaczenie jest wymagane podczas przesyłania formularza.
`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>`.
`name`	`name`	`string`	`''`
Nazwa wysyłana z formularzem
`value`	`value`	`string \| string[]`	`''`
Wartość aktualnie zaznaczonego `<mdui-segmented-button>`. Uwaga: Atrybut HTML tej właściwości jest zawsze ciągiem znaków i można ustawić wartość początkową przez atrybut HTML tylko wtedy, gdy `selects="single"`. Wartość właściwości JavaScript jest ciągiem znaków, gdy `selects="single"`, a tablicą ciągów znaków, gdy `selects="multiple"`. Dlatego, gdy `selects="multiple"`, aby zmienić tę wartość, można to zrobić tylko poprzez modyfikację wartości 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
	`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

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

Zdarzenia

Nazwa
`change`
Wywoływane po zmianie zaznaczonej wartości
`invalid`
Wywoływane, gdy pole formularza nie przejdzie walidacji

Slots

Nazwa
(domyślny)
Komponent `<mdui-segmented-button>`

Właściwości niestandardowe CSS

Nazwa
`--shape-corner`
Wielkość zaokrąglenia rogów komponentu. Można określić konkretną wartość w pikselach; ale zaleca się odwołanie do tokenów projektowych

`mdui-segmented-button` API

Właściwości

Atrybut HTML	Właściwość JavaScript	Typ	Domyślne
`icon`	`icon`	`string`	-
Nazwa ikony Material Icons po lewej stronie. Można również ustawić za pomocą `slot="icon"`
`end-icon`	`endIcon`	`string`	-
Nazwa ikony Material Icons po prawej stronie. Można również ustawić za pomocą `slot="end-icon"`
`selected-icon`	`selectedIcon`	`string`	-
Nazwa ikony Material Icons dla stanu zaznaczonego. Można również ustawić za pomocą `slot="selected-icon"`
`href`	`href`	`string`	-
Docelowy adres URL łącza. Jeśli atrybut jest ustawiony, komponent jest renderowany jako element `<a>`, co umożliwia korzystanie z atrybutów dotyczących łączy.
`download`	`download`	`string`	-
Nazwa pliku do pobrania. Uwaga: Ten atrybut działa tylko wtedy, gdy ustawiono atrybut `href`.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
Sposób otwarcia łącza. Dozwolone wartości: `_blank`: Otwiera w nowym oknie `_parent`: Otwiera w oknie nadrzędnym `_self`: Otwiera w bieżącej ramce `_top`: Otwiera w całym oknie Uwaga: Ten atrybut działa tylko wtedy, gdy ustawiono atrybut `href`.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
Relacja między bieżącym dokumentem a dokumentem, do którego prowadzi łącze. Dozwolone wartości: `alternate`: Alternatywna wersja bieżącego dokumentu `author`: Autor bieżącego dokumentu lub artykułu `bookmark`: Stałe łącze do najbliższej sekcji nadrzędnej `external`: Dokument, do którego prowadzi łącze, nie znajduje się w tej samej witrynie co bieżący dokument `help`: Łącze do powiązanej dokumentacji pomocy `license`: Główna treść bieżącego dokumentu jest objęta prawami autorskimi dołączonego pliku `me`: Bieżący dokument reprezentuje właściciela treści, do której prowadzi łącze `next`: Bieżący dokument jest częścią sekwencji, a dokument, do którego prowadzi łącze, jest następnym dokumentem w tej sekwencji `nofollow`: Autor lub wydawca bieżącego dokumentu nie rekomenduje dokumentu, do którego prowadzi łącze `noreferrer`: Pomija nagłówek `Referer`. Efekt podobny do `noopener` `opener`: Jeśli hiperłącze utworzy kontekst przeglądania najwyższego poziomu (tj. wartość atrybutu `target` to `_blank`), tworzy podrzędny kontekst przeglądania `prev`: Bieżący dokument jest częścią sekwencji, a dokument, do którego prowadzi łącze, jest poprzednim dokumentem w tej sekwencji `search`: Zawiera łącze do zasobu umożliwiającego przeszukiwanie bieżącego pliku i powiązanych z nim stron `tag`: Zawiera znacznik (identyfikowany przez podany adres) mający zastosowanie do bieżącego dokumentu Uwaga: Dostępne tylko wtedy, gdy określono atrybut `href`.
`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).
`disabled`	`disabled`	`boolean`	`false`
Określa, czy komponent jest wyłączony.
`loading`	`loading`	`boolean`	`false`
Określa, czy komponent jest w stanie ładowania.
`name`	`name`	`string`	`''`
Nazwa przycisku, która zostanie wysłana wraz z danymi formularza. Uwaga: Ten atrybut działa tylko wtedy, gdy nie ustawiono atrybutu `href`.
`value`	`value`	`string`	`''`
Wartość początkowa przycisku, która zostanie wysłana wraz z danymi formularza. Uwaga: Ten atrybut działa tylko wtedy, gdy nie ustawiono atrybutu `href`.
`type`	`type`	`'submit' \| 'reset' \| 'button'`	`'button'`
Typ przycisku. Typ domyślny to `button`. Dozwolone typy: `submit`: Kliknięcie przycisku przesyła dane formularza do serwera `reset`: Kliknięcie przycisku resetuje wszystkie elementy formularza do ich wartości początkowych `button`: Ten typ przycisku nie ma domyślnego zachowania Uwaga: Ten atrybut działa tylko wtedy, gdy nie ustawiono atrybutu `href`.
`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>`. Uwaga: Ten atrybut działa tylko wtedy, gdy nie określono atrybutu `href`.
`formaction`	`formAction`	`string`	-
Określa adres URL do przesłania formularza. Jeśli ten atrybut jest określony, zastępuje atrybut `action` elementu `<form>`. Uwaga: Ten atrybut działa tylko wtedy, gdy nie określono atrybutu `href` i `type="submit"`.
`formenctype`	`formEnctype`	`'application/x-www-form-urlencoded' \| 'multipart/form-data' \| 'text/plain'`	-
Określa typ zawartości przesyłanej do serwera podczas wysyłania formularza. Dozwolone wartości: `application/x-www-form-urlencoded`: Wartość domyślna, gdy atrybut nie jest określony `multipart/form-data`: Używany, gdy formularz zawiera element `<input type="file">` `text/plain`: Nowość w HTML5, używana do debugowania Jeśli ten atrybut jest określony, zastępuje atrybut `enctype` elementu `<form>`. Uwaga: Ten atrybut działa tylko wtedy, gdy nie określono atrybutu `href` i `type="submit"`.
`formmethod`	`formMethod`	`'post' \| 'get'`	-
Określa metodę HTTP używaną do przesłania formularza. Dozwolone wartości: `post`: Dane formularza są zawarte w treści formularza i wysyłane do serwera `get`: Dane formularza są dołączane do adresu URI formularza za pomocą separatora `?`, a wygenerowany adres URI jest wysyłany do serwera. Tej metody należy używać, gdy formularz nie powoduje skutków ubocznych i zawiera tylko znaki ASCII Jeśli ten atrybut jest ustawiony, zastępuje atrybut `method` elementu `<form>`. Uwaga: Ten atrybut działa tylko wtedy, gdy nie ustawiono atrybutu `href` i `type="submit"`.
`formnovalidate`	`formNoValidate`	`boolean`	`false`
Jeśli ten atrybut jest ustawiony, formularz nie jest walidowany podczas wysyłania. Jeśli ten atrybut jest ustawiony, zastępuje atrybut `novalidate` elementu `<form>`. Uwaga: Ten atrybut działa tylko wtedy, gdy nie ustawiono atrybutu `href` i `type="submit"`.
`formtarget`	`formTarget`	`'_self' \| '_blank' \| '_parent' \| '_top'`	-
Określa, gdzie wyświetlić odpowiedź otrzymaną po przesłaniu formularza. Dozwolone wartości: `_self`: Otwiera w bieżącej ramce `_blank`: Otwiera w nowym oknie `_parent`: Otwiera w oknie nadrzędnym `_top`: Otwiera w całym oknie Jeśli ten atrybut jest ustawiony, zastępuje atrybut `target` elementu `<form>`. Uwaga: Ten atrybut działa tylko wtedy, gdy nie ustawiono atrybutu `href` i `type="submit"`.
	`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

Metody

Nazwa	Parametry	Zwraca
`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
`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

Zdarzenia

Nazwa
`focus`
Wywoływane po otrzymaniu fokusu
`blur`
Wywoływane po utracie fokusu
`invalid`
Wywoływane, gdy pole formularza nie przejdzie walidacji

Slots

Nazwa
(domyślny)
Treść tekstowa elementu przycisku segmentowanego
`icon`
Ikona po lewej stronie elementu przycisku segmentowanego
`selected-icon`
Ikona po lewej stronie w stanie zaznaczonym
`end-icon`
Ikona po prawej stronie elementu przycisku segmentowanego

CSS Parts

Nazwa
`button`
Wewnętrzny element `<button>` lub `<a>`
`icon`
Ikona po lewej stronie
`selected-icon`
Ikona po lewej stronie w stanie zaznaczonym
`end-icon`
Ikona po prawej stronie
`label`
Treść tekstowa
`loading`
Element `<mdui-circular-progress>` w stanie ładowania

Poprzedni rozdział

Select Lista wyboru

Następny rozdział

Slider Suwak

SegmentedButtonPrzycisk segmentowy

Sposób użycia

Przykłady

Pełna szerokość

Tryb pojedynczego wyboru

Tryb wielokrotnego wyboru

Ikona

Link

Stan wyłączony i ładowania

`mdui-segmented-button-group` API

Właściwości

Metody

Zdarzenia

Slots

Właściwości niestandardowe CSS

`mdui-segmented-button` API

Właściwości

Metody

Zdarzenia

Slots

CSS Parts