SegmentedButtonSegmentované tlačítko

Segmentované tlačítko seskupuje tlačítka pro výběr možností, přepínání zobrazení nebo řazení prvků.

Způsob použití

Importujte komponenty podle potřeby:

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

Importujte TypeScript typy komponent podle potřeby:

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

Příklad použití:

Den

Týden

Měsíc

<mdui-segmented-button-group>
  <mdui-segmented-button>Den</mdui-segmented-button>
  <mdui-segmented-button>Týden</mdui-segmented-button>
  <mdui-segmented-button>Měsíc</mdui-segmented-button>
</mdui-segmented-button-group>

Nastavením atributu selects na single na prvku <mdui-segmented-button-group> povolíte režim jednoho výběru. Hodnota value komponenty <mdui-segmented-button-group> je pak hodnotou value aktuálně vybrané komponenty <mdui-segmented-button>.

Den

Týden

Měsíc

Den

Týden

Měsíc

<mdui-segmented-button-group selects="single">
  <mdui-segmented-button value="day">Den</mdui-segmented-button>
  <mdui-segmented-button value="week">Týden</mdui-segmented-button>
  <mdui-segmented-button value="month">Měsíc</mdui-segmented-button>
</mdui-segmented-button-group>

<mdui-segmented-button-group selects="single" value="week">
  <mdui-segmented-button value="day">Den</mdui-segmented-button>
  <mdui-segmented-button value="week">Týden</mdui-segmented-button>
  <mdui-segmented-button value="month">Měsíc</mdui-segmented-button>
</mdui-segmented-button-group>

Zdrojový kód

Režim více výběru

Nastavením atributu selects na multiple na prvku <mdui-segmented-button-group> povolíte režim vícenásobného výběru. Hodnota value komponenty <mdui-segmented-button-group> je pak pole hodnot value aktuálně vybraných komponent <mdui-segmented-button>.

Poznámka: V režimu vícenásobného výběru je hodnota value komponenty <mdui-segmented-button-group> pole a lze ji číst a nastavovat pouze pomocí JavaScript vlastnosti.

Den

Týden

Měsíc

Den

Týden

Měsíc

<mdui-segmented-button-group selects="multiple">
  <mdui-segmented-button value="day">Den</mdui-segmented-button>
  <mdui-segmented-button value="week">Týden</mdui-segmented-button>
  <mdui-segmented-button value="month">Měsíc</mdui-segmented-button>
</mdui-segmented-button-group>

<mdui-segmented-button-group selects="multiple" class="demo-multiple">
  <mdui-segmented-button value="day">Den</mdui-segmented-button>
  <mdui-segmented-button value="week">Týden</mdui-segmented-button>
  <mdui-segmented-button value="month">Měsíc</mdui-segmented-button>
</mdui-segmented-button-group>

<script>
  // Nastavit výchozí výběr week a month
  const group = document.querySelector(".demo-multiple");
  group.value = ["week", "month"];
</script>

Zdrojový kód

Ikona

Na prvku <mdui-segmented-button> můžete pomocí atributů icon a end-icon přidat ikony Material Icons na levou a pravou stranu tlačítka. Kromě toho můžete také přidat prvky na levou a pravou stranu tlačítka pomocí slotů icon a end-icon.

Den

Týden

Měsíc

<mdui-segmented-button-group>
  <mdui-segmented-button icon="search">Den</mdui-segmented-button>
  <mdui-segmented-button end-icon="arrow_forward">Týden</mdui-segmented-button>
  <mdui-segmented-button>
    Měsí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>

Zdrojový kód

Na prvku <mdui-segmented-button> můžete přidáním atributu selected-icon nastavit ikonu Material Icons vybraného stavu. Můžete ji také nastavit pomocí slotu selected-icon.

Den

Týden

<mdui-segmented-button-group selects="multiple">
  <mdui-segmented-button value="day" selected-icon="cloud_done">Den</mdui-segmented-button>
  <mdui-segmented-button value="week">
    <mdui-icon slot="selected-icon" name="cloud_done"></mdui-icon>
    Týden
  </mdui-segmented-button>
</mdui-segmented-button-group>

Zdrojový kód

Odkaz

Nastavením atributu href na prvku <mdui-segmented-button> změníte tlačítko na odkaz. Pak můžete také použít atributy související s odkazy: download, target, rel.

Odkaz

Týden

Měsíc

<mdui-segmented-button-group>
  <mdui-segmented-button href="https://www.mdui.org" target="_blank">Odkaz</mdui-segmented-button>
  <mdui-segmented-button>Týden</mdui-segmented-button>
  <mdui-segmented-button>Měsíc</mdui-segmented-button>
</mdui-segmented-button-group>

Zdrojový kód

Zakázaný stav a stav načítání

Přidáním atributu disabled na prvek <mdui-segmented-button-group> zakážete celou skupinu segmentovaných tlačítek.

Den

Týden

Měsíc

<mdui-segmented-button-group disabled>
  <mdui-segmented-button>Den</mdui-segmented-button>
  <mdui-segmented-button>Týden</mdui-segmented-button>
  <mdui-segmented-button>Měsíc</mdui-segmented-button>
</mdui-segmented-button-group>

Zdrojový kód

Přidáním atributu disabled na prvek <mdui-segmented-button> zakážete konkrétní tlačítko; přidáním atributu loading přidáte stav načítání konkrétního tlačítka.

Den

Týden

Měsíc

Rok

<mdui-segmented-button-group>
  <mdui-segmented-button>Den</mdui-segmented-button>
  <mdui-segmented-button disabled>Týden</mdui-segmented-button>
  <mdui-segmented-button loading>Měsíc</mdui-segmented-button>
  <mdui-segmented-button disabled loading>Rok</mdui-segmented-button>
</mdui-segmented-button-group>

Zdrojový kód

`mdui-segmented-button-group` API

Vlastnosti

Atribut	Vlastnost	Typ	Výchozí
`full-width`	`fullWidth`	`boolean`	`false`
Určuje, zda má komponenta vyplnit celou šířku rodičovského prvku.
`selects`	`selects`	`'single' \| 'multiple'`	-
Režim výběru segmentovaného tlačítka. Výchozí stav: výběr není povolen. Možné hodnoty: `single`: Jednotlivý výběr. `multiple`: Vícenásobný výběr.
`disabled`	`disabled`	`boolean`	`false`
Určuje, zda je komponenta zakázaná.
`required`	`required`	`boolean`	`false`
Určuje, zda musí být při odesílání formuláře vybrána alespoň jedna položka.
`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>`.
`name`	`name`	`string`	`''`
Název při odesílání formuláře, který se odešle spolu s daty formuláře.
`value`	`value`	`string \| string[]`	`''`
Hodnota aktuálně vybraného prvku `<mdui-segmented-button>`. Poznámka: HTML atribut této vlastnosti je vždy řetězec a počáteční hodnotu lze nastavit pomocí HTML atributu pouze pokud je `selects="single"`. Hodnota JavaScriptové vlastnosti je řetězec, pokud je `selects="single"`, a pole řetězců, pokud je `selects="multiple"`. Proto, pokud je `selects="multiple"`, lze tuto hodnotu změnit pouze úpravou 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.
	`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.

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

Události

Název
`change`
Spustí se při změně vybrané hodnoty.
`invalid`
Spustí se, pokud pole formuláře neprojde validací.

Slots

Název
(výchozí)
Komponenty `<mdui-segmented-button>`.

CSS Custom Properties

Název
`--shape-corner`
Velikost zaoblení rohů komponenty. Lze zadat konkrétní hodnotu v pixelech; doporučuje se však odkazovat na Designové tokeny.

`mdui-segmented-button` API

Vlastnosti

Atribut	Vlastnost	Typ	Výchozí
`icon`	`icon`	`string`	-
Název ikony z knihovny Material Icons na levé straně. Lze také nastavit pomocí `slot="icon"`.
`end-icon`	`endIcon`	`string`	-
Název ikony z knihovny Material Icons na pravé straně. Lze také nastavit pomocí `slot="end-icon"`.
`selected-icon`	`selectedIcon`	`string`	-
Název ikony z knihovny Material Icons pro vybraný stav. Lze také nastavit pomocí `slot="selected-icon"`.
`href`	`href`	`string`	-
Cílová URL odkazu. Pokud je tato vlastnost nastavena, komponenta se interně vykreslí jako prvek `<a>` a zpřístupní se vlastnosti pro odkazy.
`download`	`download`	`string`	-
Soubor ke stažení. Poznámka: Platí pouze, pokud je nastaven atribut `href`.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
Způsob otevření odkazu. Možné hodnoty: `_blank`: Otevře odkaz v novém okně nebo kartě. `_parent`: Otevře odkaz v nadřazeném okně. `_self`: Výchozí možnost. Otevře odkaz ve stejném okně. `_top`: Otevře odkaz v celém okně. Poznámka: Platí pouze, pokud je nastaven atribut `href`.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
Vztah mezi aktuálním dokumentem a odkazovaným dokumentem. Možné hodnoty: `alternate`: Alternativní verze aktuálního dokumentu. `author`: Autor aktuálního dokumentu nebo článku. `bookmark`: Trvalý odkaz na konkrétní část dokumentu. `external`: Odkaz vede na externí zdroj (mimo aktuální web/doménu). `help`: Odkaz na související nápovědu. `license`: Hlavní obsah aktuálního dokumentu je pokryt licencí odkazovaného dokumentu. `me`: Odkaz směřuje na profil vlastníka (rel="me"). `next`: Aktuální dokument je součástí série a odkazovaný dokument je následující v sérii. `nofollow`: Autor nebo vydavatel aktuálního dokumentu neschvaluje odkazovaný dokument. `noreferrer`: Neodesílá HTTP hlavičku `Referer`. Má podobný účinek jako `noopener`. `opener`: Pokud má odkaz atribut `target="_blank"`, atribut `rel="opener"` určuje, zda nové okno nebo karta bude mít přístup k původnímu oknu přes `window.opener`. `prev`: Aktuální dokument je součástí série a odkazovaný dokument je předchozí v sérii. `search`: Odkazuje na vyhledávací zdroj pro aktuální dokument a související stránky. `tag`: Poskytuje štítek vhodný pro aktuální dokument (identifikovaný danou adresou). Poznámka: Dostupné pouze při zadání atributu `href`.
`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.
`disabled`	`disabled`	`boolean`	`false`
Určuje, zda je prvek zakázaný.
`loading`	`loading`	`boolean`	`false`
Určuje, zda je prvek ve stavu načítání.
`name`	`name`	`string`	`''`
Název tlačítka, který se odešle spolu s daty formuláře. Poznámka: Tato vlastnost platí pouze, pokud není nastaven atribut `href`.
`value`	`value`	`string`	`''`
Počáteční hodnota tlačítka, která se odešle spolu s daty formuláře. Poznámka: Tato vlastnost platí pouze, pokud není nastaven atribut `href`.
`type`	`type`	`'submit' \| 'reset' \| 'button'`	`'button'`
Typ tlačítka. Výchozí typ je `button`. Možné typy: `submit`: Kliknutím na tlačítko se odešlou data formuláře na server. `reset`: Kliknutím na tlačítko se všechna pole ve formuláři resetují na počáteční hodnoty. `button`: Tento typ tlačítka nemá žádné výchozí chování. Poznámka: Tato vlastnost platí pouze, pokud není zadán atribut `href`.
`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>`. Poznámka: Tato vlastnost platí pouze, pokud není zadán atribut `href`.
`formaction`	`formAction`	`string`	-
Adresa URL pro odeslání formuláře. Přepíše atribut `action` formuláře, pokud je nastaven. Poznámka: Tato vlastnost platí pouze, pokud není zadán atribut `href` a `type="submit"`.
`formenctype`	`formEnctype`	`'application/x-www-form-urlencoded' \| 'multipart/form-data' \| 'text/plain'`	-
Typ obsahu při odesílání formuláře na server. Možné hodnoty: `application/x-www-form-urlencoded`: Výchozí hodnota, pokud atribut není zadán. `multipart/form-data`: Používá se, když formulář obsahuje prvek `<input type="file">`. `text/plain`: Přidáno v HTML5; používá se pro ladění. Přepíše atribut `enctype` prvku `<form>`, pokud je nastaven. Poznámka: Tato vlastnost platí pouze, pokud není zadán atribut `href` a `type="submit"`.
`formmethod`	`formMethod`	`'post' \| 'get'`	-
HTTP metoda pro odeslání formuláře. Možné hodnoty: `post`: Data formuláře jsou obsažena v těle požadavku a odeslána na server. `get`: Data formuláře jsou připojena k URI formuláře pomocí `?` jako oddělovače a výsledné URI je odesláno na server. Tato metoda se používá, když formulář nemá vedlejší účinky a obsahuje pouze ASCII znaky. Přepíše atribut `method` prvku `<form>`, pokud je nastaven. Poznámka: Tato vlastnost platí pouze, pokud není zadán atribut `href` a `type="submit"`.
`formnovalidate`	`formNoValidate`	`boolean`	`false`
Je-li nastaven, přeskočí se při odesílání formuláře validace. Přepíše atribut `novalidate` prvku `<form>`, pokud je nastaven. Poznámka: Tato vlastnost platí pouze, pokud není zadán atribut `href` a `type="submit"`.
`formtarget`	`formTarget`	`'_self' \| '_blank' \| '_parent' \| '_top'`	-
Určuje, kde se zobrazí odpověď po odeslání formuláře. Možné hodnoty: `_self`: Výchozí chování. Otevře se ve stejném okně. `_blank`: Otevře se v novém okně nebo kartě. `_parent`: Otevře se v nadřazeném okně. `_top`: Otevře se v celém okně. Přepíše atribut `target` prvku `<form>`, pokud je nastaven. Poznámka: Tato vlastnost platí pouze, pokud není zadán atribut `href` a `type="submit"`.
	`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.

Metody

Název	Parametry	Vrací
`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.
`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í.

Události

Název
`focus`
Spustí se při získání fokusu.
`blur`
Spustí se při ztrátě fokusu.
`invalid`
Spustí se, pokud pole formuláře neprojde validací.

Slots

Název
(výchozí)
Textový obsah segmentovaného tlačítka.
`icon`
Levá ikona segmentovaného tlačítka.
`selected-icon`
Levá ikona pro vybraný stav.
`end-icon`
Pravá ikona segmentovaného tlačítka.

CSS Parts

Název
`button`
Interní prvek `<button>` nebo `<a>`.
`icon`
Ikona na levé straně.
`selected-icon`
Ikona na levé straně pro vybraný stav.
`end-icon`
Ikona na pravé straně.
`label`
Textový obsah.
`loading`
Prvek `<mdui-circular-progress>` ve stavu načítání.

Předchozí kapitola

Select Výběr

Další kapitola

Slider Posuvník

SegmentedButtonSegmentované tlačítko

Způsob použití

Příklady

Celá šířka

Režim jednoho výběru

Režim více výběru

Ikona

Odkaz

Zakázaný stav a stav načítání

`mdui-segmented-button-group` API

Vlastnosti

Metody

Události

Slots

CSS Custom Properties

`mdui-segmented-button` API

Vlastnosti

Metody

Události

Slots

CSS Parts