SegmentedButtonSzegmentált gomb

A szegmentált gomb komponens egy gombcsoportot foglal magába, amely lehetőségek biztosítására, nézetek váltására vagy elemek rendezésére szolgál.

Használat

A komponensek importálása:

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

A komponensek TypeScript-típusainak importálása:

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

Példa:

Nap

Hét

Hónap

<mdui-segmented-button-group>
  <mdui-segmented-button>Nap</mdui-segmented-button>
  <mdui-segmented-button>Hét</mdui-segmented-button>
  <mdui-segmented-button>Hónap</mdui-segmented-button>
</mdui-segmented-button-group>

Adja meg a selects attribútumot single értékkel a <mdui-segmented-button-group> elemen az egyszerű kiválasztás mód aktiválásához. Ekkor a <mdui-segmented-button-group> value attribútumának értéke a kijelölt <mdui-segmented-button> value attribútumának értéke.

Nap

Hét

Hónap

Nap

Hét

Hónap

<mdui-segmented-button-group selects="single">
  <mdui-segmented-button value="day">Nap</mdui-segmented-button>
  <mdui-segmented-button value="week">Hét</mdui-segmented-button>
  <mdui-segmented-button value="month">Hónap</mdui-segmented-button>
</mdui-segmented-button-group>

<mdui-segmented-button-group selects="single" value="week">
  <mdui-segmented-button value="day">Nap</mdui-segmented-button>
  <mdui-segmented-button value="week">Hét</mdui-segmented-button>
  <mdui-segmented-button value="month">Hónap</mdui-segmented-button>
</mdui-segmented-button-group>

Forrás

Többszörös kiválasztás mód

Adja meg a selects attribútumot multiple értékkel a <mdui-segmented-button-group> elemen a többszörös kiválasztás mód aktiválásához. Ekkor a <mdui-segmented-button-group> value attribútumának értéke a kijelölt <mdui-segmented-button>-ek value attribútumainak értékeiből álló tömb.

Figyelem: Többszörös kiválasztás módban a <mdui-segmented-button-group> value attribútumának értéke egy tömb, amelyet csak JavaScript tulajdonságon keresztül lehet beolvasni és beállítani.

Nap

Hét

Hónap

Nap

Hét

Hónap

<mdui-segmented-button-group selects="multiple">
  <mdui-segmented-button value="day">Nap</mdui-segmented-button>
  <mdui-segmented-button value="week">Hét</mdui-segmented-button>
  <mdui-segmented-button value="month">Hónap</mdui-segmented-button>
</mdui-segmented-button-group>

<mdui-segmented-button-group selects="multiple" class="demo-multiple">
  <mdui-segmented-button value="day">Nap</mdui-segmented-button>
  <mdui-segmented-button value="week">Hét</mdui-segmented-button>
  <mdui-segmented-button value="month">Hónap</mdui-segmented-button>
</mdui-segmented-button-group>

<script>
  // Alapértelmezés szerint jelölje ki a week és month elemeket
  const group = document.querySelector(".demo-multiple");
  group.value = ["week", "month"];
</script>

Forrás

Ikon

A <mdui-segmented-button> elemen az icon és end-icon attribútumokkal Material Icons ikonokat adhat a gomb bal és jobb oldalán. Az icon és end-icon slotokon keresztül is hozzáadhat elemeket a gomb bal és jobb oldalához.

Nap

Hét

Hónap

<mdui-segmented-button-group>
  <mdui-segmented-button icon="search">Nap</mdui-segmented-button>
  <mdui-segmented-button end-icon="arrow_forward">Hét</mdui-segmented-button>
  <mdui-segmented-button>
    Hónap
    <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>

Forrás

A <mdui-segmented-button> elemen a selected-icon attribútum hozzáadásával beállíthatja a kijelölt állapot Material Icons ikonját. A selected-icon sloton keresztül is beállíthatja.

Nap

Hét

<mdui-segmented-button-group selects="multiple">
  <mdui-segmented-button value="day" selected-icon="cloud_done">Nap</mdui-segmented-button>
  <mdui-segmented-button value="week">
    <mdui-icon slot="selected-icon" name="cloud_done"></mdui-icon>
    Hét
  </mdui-segmented-button>
</mdui-segmented-button-group>

Forrás

Link

A <mdui-segmented-button> elemen a href attribútum beállításával a gomb linkként is használható, és a linkhez kapcsolódó további attribútumokat is használhatja: download, target, rel.

Link

Hét

Hónap

<mdui-segmented-button-group>
  <mdui-segmented-button href="https://www.mdui.org" target="_blank">Link</mdui-segmented-button>
  <mdui-segmented-button>Hét</mdui-segmented-button>
  <mdui-segmented-button>Hónap</mdui-segmented-button>
</mdui-segmented-button-group>

Forrás

Letiltott és betöltési állapot

A <mdui-segmented-button-group> elemen a disabled attribútum hozzáadásával letilthatja az egész szegmentált gombcsoportot.

Nap

Hét

Hónap

<mdui-segmented-button-group disabled>
  <mdui-segmented-button>Nap</mdui-segmented-button>
  <mdui-segmented-button>Hét</mdui-segmented-button>
  <mdui-segmented-button>Hónap</mdui-segmented-button>
</mdui-segmented-button-group>

Forrás

A <mdui-segmented-button> elemen a disabled attribútum hozzáadásával letilthat egy adott gombot; a loading attribútum hozzáadásával betöltési állapotot adhat hozzá egy adott gombhoz.

Nap

Hét

Hónap

Év

<mdui-segmented-button-group>
  <mdui-segmented-button>Nap</mdui-segmented-button>
  <mdui-segmented-button disabled>Hét</mdui-segmented-button>
  <mdui-segmented-button loading>Hónap</mdui-segmented-button>
  <mdui-segmented-button disabled loading>Év</mdui-segmented-button>
</mdui-segmented-button-group>

Forrás

`mdui-segmented-button-group` API

Tulajdonságok

Attribútum	Tulajdonság	Típus	Alapértelmezett
`full-width`	`fullWidth`	`boolean`	`false`
Kitölti-e a szülőelem teljes szélességét.
`selects`	`selects`	`'single' \| 'multiple'`	-
A szegmentált gombok kiválaszthatósági állapota, alapértelmezés szerint nem választhatók ki. Lehetséges értékek: `single`: Egy választható `multiple`: Több választható
`disabled`	`disabled`	`boolean`	`false`
Letiltott állapotú-e.
`required`	`required`	`boolean`	`false`
Az űrlap elküldésekor kötelező-e kiválasztani.
`form`	`form`	`string`	-
A kapcsolódó `<form>` elem. Ennek az attribútumnak az értéke egy `<form>` elem `id`-ja kell legyen ugyanazon az oldalon. Ha ez az attribútum nincs megadva, az elemnek a `<form>` elem gyermekének kell lennie. Ezzel az attribútummal az elem az oldal bármely pontjára elhelyezhető, nem csak a `<form>` elem gyermekeként.
`name`	`name`	`string`	`''`
Az űrlap elküldésekor használandó név, amely az űrlapadatokkal együtt kerül elküldésre.
`value`	`value`	`string \| string[]`	`''`
Az aktuálisan kiválasztott `<mdui-segmented-button>` értéke. Megjegyzés: Ennek a tulajdonságnak a HTML attribútuma mindig karakterlánc, és csak akkor állítható be kezdeti érték HTML attribútummal, ha a `selects="single"`. Ennek a tulajdonságnak a JavaScript értéke karakterlánc, ha a `selects="single"`, és karakterláncok tömbje, ha a `selects="multiple"`. Tehát ha a `selects="multiple"`, akkor ez az érték csak a JavaScript tulajdonság módosításával változtatható meg.
	`defaultValue`	`string \| string[]`	`''`
Az alapértelmezett kiválasztott érték. Az űrlap visszaállításakor erre az alapértékre áll vissza. Ez a tulajdonság csak JavaScript tulajdonságként állítható be.
	`validity`	`ValidityState`	-
Az űrlap-ellenőrzés állapotobjektuma, részletekért lásd: `ValidityState`
	`validationMessage`	`string`	-
Ha az űrlap-ellenőrzés sikertelen, ez a tulajdonság tartalmazza a hibaüzenetet. Ha sikeres, üres karakterlánc.

Metódusok

Név	Paraméterek	Visszatérési érték
`checkValidity`		`boolean`
Ellenőrzi, hogy az űrlapmező megfelel-e a validációs szabályoknak. Ha nem, `false` értéket ad vissza és kiváltja az `invalid` eseményt; ha igen, `true` értéket ad vissza.
`reportValidity`		`boolean`
Ellenőrzi, hogy az űrlapmező megfelel-e a validációs szabályoknak. Ha nem, `false` értéket ad vissza, kiváltja az `invalid` eseményt, és megjeleníti a hibajelzést a komponensen; ha igen, `true` értéket ad vissza. Ha az ellenőrzés sikertelen, a komponensen megjelenik az érvénytelenséget jelző vizuális visszajelzés.
`setCustomValidity`	`message: string`	`void`
Egyéni hibaüzenet beállítása. Amíg ez a szöveg nem üres, addig a mező érvénytelennek minősül.

Események

Név
`change`
A kiválasztott érték változásakor aktiválódik.
`invalid`
Az űrlapmező ellenőrzésének sikertelenségekor aktiválódik.

Slots

Név
(alapértelmezett)
A `<mdui-segmented-button>` komponens.

CSS egyéni tulajdonságok

Név
`--shape-corner`
A komponens sarok lekerekítésének mérete. Megadható konkrét pixelérték; de ajánlott a design tokenek hivatkozása.

`mdui-segmented-button` API

Tulajdonságok

Attribútum	Tulajdonság	Típus	Alapértelmezett
`icon`	`icon`	`string`	-
A bal oldali Material Icons ikon neve. Beállítható a `slot="icon"` segítségével is.
`end-icon`	`endIcon`	`string`	-
A jobb oldali Material Icons ikon neve. Beállítható a `slot="end-icon"` segítségével is.
`selected-icon`	`selectedIcon`	`string`	-
A kiválasztott állapot Material Icons ikonjának neve. Beállítható a `slot="selected-icon"` segítségével is.
`href`	`href`	`string`	-
A hivatkozás cél URL-je. Ha ez a tulajdonság meg van adva, a komponens belsőleg `<a>` elemként renderelődik, és használhatók lesznek a hivatkozásokhoz kapcsolódó attribútumok.
`download`	`download`	`string`	-
A letöltési hivatkozás célja. Megjegyzés: Csak akkor érvényes, ha a `href` attribútum meg van adva.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
A hivatkozás megnyitásának módja. A lehetséges értékek: `_blank`: Új ablakban nyitja meg a hivatkozást `_parent`: A szülő keretben nyitja meg a hivatkozást `_self`: Alapértelmezett. Az aktuális keretben nyitja meg a hivatkozást `_top`: A teljes ablakban nyitja meg a hivatkozást Megjegyzés: Csak akkor érvényes, ha a `href` attribútum meg van adva.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
Az aktuális dokumentum és a hivatkozott dokumentum közötti kapcsolat. Lehetséges értékek: `alternate`: Az aktuális dokumentum alternatív verziója `author`: Az aktuális dokumentum vagy cikk szerzője `bookmark`: Állandó hivatkozás a legközelebbi ős szakaszra `external`: A hivatkozott dokumentum nem ugyanazon a webhelyen található, mint az aktuális dokumentum `help`: Hivatkozás egy kapcsolódó súgó dokumentumra `license`: Az aktuális dokumentum fő tartalmára a hivatkozott fájl szerzői jogi licenc vonatkozik `me`: Az aktuális dokumentum a hivatkozott tartalom tulajdonosát képviseli `next`: Az aktuális dokumentum egy sorozat része, a hivatkozott dokumentum a sorozat következő dokumentuma `nofollow`: Az aktuális dokumentum szerzője vagy kiadója nem vállal felelősséget a hivatkozott fájl tartalmáért `noreferrer`: Nem tartalmaz `Referer` fejlécet. Hasonló a `noopener` hatásához `opener`: Ha a hiperhivatkozás egy legfelső szintű böngészési kontextust hoz létre (azaz a `target` attribútum értéke `_blank`), akkor létrehoz egy segéd böngészési kontextust `prev`: Az aktuális dokumentum egy sorozat része, a hivatkozott dokumentum a sorozat előző dokumentuma `search`: Erőforrás-hivatkozást biztosít, amely az aktuális fájl és kapcsolódó oldalainak keresésére használható `tag`: Az aktuális dokumentumra alkalmazható címkét biztosít (amelyet a megadott cím azonosít) Megjegyzés: Csak akkor használható, ha a `href` attribútum meg van adva.
`autofocus`	`autofocus`	`boolean`	`false`
Automatikusan fókuszt kapjon-e betöltődés után.
`tabindex`	`tabIndex`	`number`	-
Az elem sorszáma a Tab billentyűvel történő navigálás során.
`disabled`	`disabled`	`boolean`	`false`
Letiltott állapotú-e.
`loading`	`loading`	`boolean`	`false`
Betöltési állapotban van-e.
`name`	`name`	`string`	`''`
A gomb neve, amely az űrlapadatokkal együtt kerül elküldésre. Megjegyzés: Csak akkor érvényes, ha a `href` attribútum nincs megadva.
`value`	`value`	`string`	`''`
A gomb kezdeti értéke, amely az űrlapadatokkal együtt kerül elküldésre. Megjegyzés: Csak akkor érvényes, ha a `href` attribútum nincs megadva.
`type`	`type`	`'submit' \| 'reset' \| 'button'`	`'button'`
A gomb típusa. Alapértelmezés szerint `button`. Lehetséges típusok: `submit`: Az űrlap elküldése a szervernek `reset`: Az űrlap összes mezőjének visszaállítása az alapértékre `button`: Nincs alapértelmezett viselkedés Megjegyzés: Csak akkor érvényes, ha a `href` attribútum nincs megadva.
`form`	`form`	`string`	-
A kapcsolódó `<form>` elem. Ennek az attribútumnak az értéke egy `<form>` elem `id`-ja kell legyen ugyanazon az oldalon. Ha ez az attribútum nincs megadva, az elemnek a `<form>` elem gyermekének kell lennie. Ezzel az attribútummal az elem az oldal bármely pontjára elhelyezhető, nem csak a `<form>` elem gyermekeként. Megjegyzés: Csak akkor érvényes, ha a `href` attribútum nincs megadva.
`formaction`	`formAction`	`string`	-
Megadja az űrlap elküldéséhez használandó URL-t. Ha ez az attribútum meg van adva, felülírja a `<form>` elem `action` attribútumát. Megjegyzés: Csak akkor érvényes, ha a `href` attribútum nincs megadva és `type="submit"`.
`formenctype`	`formEnctype`	`'application/x-www-form-urlencoded' \| 'multipart/form-data' \| 'text/plain'`	-
Megadja az űrlap szerverre küldésekor használandó MIME-típust. Lehetséges értékek: `application/x-www-form-urlencoded`: Az alapértelmezett érték `multipart/form-data`: Akkor használandó, ha az űrlap `<input type="file">` elemet tartalmaz `text/plain`: A HTML5-ben bevezetve, hibakereséshez használható Ha ez az attribútum meg van adva, felülírja a `<form>` elem `enctype` attribútumát. Megjegyzés: Csak akkor érvényes, ha a `href` attribútum nincs megadva és `type="submit"`.
`formmethod`	`formMethod`	`'post' \| 'get'`	-
Megadja az űrlap elküldésekor használandó HTTP metódust. Lehetséges értékek: `post`: Az űrlapadatok a HTTP kérés törzsében kerülnek elküldésre `get`: Az űrlapadatok `?` elválasztóval hozzáfűződnek az űrlap URI attribútumához, és az így létrejövő URI kerül elküldésre. Akkor használatos, ha az űrlapnak nincsenek mellékhatásai, és csak ASCII karaktereket tartalmaz Ha ez az attribútum meg van adva, felülírja a `<form>` elem `method` attribútumát. Megjegyzés: Csak akkor érvényes, ha a `href` attribútum nincs megadva és `type="submit"`.
`formnovalidate`	`formNoValidate`	`boolean`	`false`
Ha ez az attribútum meg van adva, az űrlap elküldésekor a böngésző nem végzi el az űrlapvalidációt. Ha ez az attribútum meg van adva, felülírja a `<form>` elem `novalidate` attribútumát. Megjegyzés: Csak akkor érvényes, ha a `href` attribútum nincs megadva és `type="submit"`.
`formtarget`	`formTarget`	`'_self' \| '_blank' \| '_parent' \| '_top'`	-
Megadja, hogy az űrlap elküldése után kapott válasz hol jelenjen meg. Lehetséges értékek: `_self`: Alapértelmezett opció, az aktuális keretben nyílik meg `_blank`: Új ablakban nyílik meg `_parent`: A szülő keretben nyílik meg `_top`: A teljes ablakban nyílik meg Ha ez az attribútum meg van adva, felülírja a `<form>` elem `target` attribútumát. Megjegyzés: Csak akkor érvényes, ha a `href` attribútum nincs megadva és `type="submit"`.
	`validity`	`ValidityState`	-
Az űrlap-ellenőrzés állapotobjektuma, részletekért lásd: `ValidityState`
	`validationMessage`	`string`	-
Ha az űrlap-ellenőrzés sikertelen, ez a tulajdonság tartalmazza a hibaüzenetet. Ha sikeres, üres karakterlánc.

Metódusok

Név	Paraméterek	Visszatérési érték
`click`		`void`
Egérkattintás szimulálása az elemen.
`focus`	`options: FocusOptions` (Opcionális)	`void`
Fókusz állítása az aktuális elemre. Egy objektum is átadható paraméterként, a következő tulajdonságokkal: `preventScroll`: Alapértelmezés szerint a fókusz elnyerése után a böngésző az elemre görget. Ha ezt a tulajdonságot `true`-ra állítja, a görgetés elmarad.
`blur`		`void`
Fókusz eltávolítása az aktuális elemről.
`checkValidity`		`boolean`
Ellenőrzi, hogy az űrlapmező megfelel-e a validációs szabályoknak. Ha nem, `false` értéket ad vissza és kiváltja az `invalid` eseményt; ha igen, `true` értéket ad vissza.
`reportValidity`		`boolean`
Ellenőrzi, hogy az űrlapmező megfelel-e a validációs szabályoknak. Ha nem, `false` értéket ad vissza, kiváltja az `invalid` eseményt, és megjeleníti a hibajelzést a komponensen; ha igen, `true` értéket ad vissza.
`setCustomValidity`	`message: string`	`void`
Egyéni hibaüzenet beállítása. Amíg ez a szöveg nem üres, addig a mező érvénytelennek minősül.

Események

Név
`focus`
Fókusz elnyerésekor aktiválódik.
`blur`
Fókusz elvesztésekor aktiválódik.
`invalid`
Az űrlapmező ellenőrzésének sikertelenségekor aktiválódik.

Slots

Név
(alapértelmezett)
A szegmentált gomb szöveges tartalma.
`icon`
A szegmentált gomb bal oldali ikonja.
`selected-icon`
A kiválasztott állapot bal oldali ikonja.
`end-icon`
A szegmentált gomb jobb oldali ikonja.

CSS Parts

Név
`button`
A belső `<button>` vagy `<a>` elem.
`icon`
A bal oldali ikon.
`selected-icon`
A kiválasztott állapot bal oldali ikonja.
`end-icon`
A jobb oldali ikon.
`label`
Szöveges tartalom.
`loading`
A betöltési állapotot jelző `<mdui-circular-progress>` elem.

Előző fejezet

Select Választómező

Következő fejezet

Slider Csúszka

SegmentedButtonSzegmentált gomb

Használat

Példák

Teljes szélességű megjelenítés

Egyszerű kiválasztás mód

Többszörös kiválasztás mód

Ikon

Link

Letiltott és betöltési állapot

`mdui-segmented-button-group` API

Tulajdonságok

Metódusok

Események

Slots

CSS egyéni tulajdonságok

`mdui-segmented-button` API

Tulajdonságok

Metódusok

Események

Slots

CSS Parts