ButtonIconIkon-gomb

Az ikon-gomb elsősorban másodlagos műveletek végrehajtására szolgál.

Használat

A komponens importálása:

import 'mdui/components/button-icon.js';

A komponens TypeScript-típusának importálása:

import type { ButtonIcon } from 'mdui/components/button-icon.js';

Példa:

<mdui-button-icon icon="search"></mdui-button-icon>

Példák

Ikon

A Material Icons ikon nevét az icon attribútummal adhatja meg. Az alapértelmezett slotban is megadhat ikon elemet.

<mdui-button-icon icon="search"></mdui-button-icon>
<mdui-button-icon>
  <mdui-icon name="search"></mdui-icon>
</mdui-button-icon>

Forrás

Változat

Az ikon-gomb változata a variant attribútummal állítható be.

<mdui-button-icon variant="standard" icon="search"></mdui-button-icon>
<mdui-button-icon variant="filled" icon="search"></mdui-button-icon>
<mdui-button-icon variant="tonal" icon="search"></mdui-button-icon>
<mdui-button-icon variant="outlined" icon="search"></mdui-button-icon>

Forrás

Kijelölhető

A selectable attribútummal az ikon-gomb kijelölhetővé tehető.

<mdui-button-icon selectable icon="favorite_border"></mdui-button-icon>

Forrás

A selected-icon attribútummal megadhatja a kijelölt állapothoz tartozó Material Icons ikon nevét. A selected-icon slotban is megadhatja a kijelölt állapot ikonját.

<mdui-button-icon selectable icon="favorite_border" selected-icon="favorite"></mdui-button-icon>
<mdui-button-icon selectable icon="favorite_border">
  <mdui-icon slot="selected-icon" name="favorite"></mdui-icon>
</mdui-button-icon>

Forrás

Miután az ikon-gombot kijelölték, a selected attribútum értéke true lesz. A selected attribútummal az ikon-gomb alapértelmezés szerint kijelölt állapotú lehet.

<mdui-button-icon selectable selected icon="favorite_border" selected-icon="favorite"></mdui-button-icon>

Forrás

Link

A href attribútummal az ikon-gomb linkként is használható, és a linkhez kapcsolódó további attribútumokat is használhatja: download, target, rel.

<mdui-button-icon icon="search" href="https://www.mdui.org" target="_blank"></mdui-button-icon>

Forrás

Letiltott és betöltési állapot

A disabled attribútummal letilthatja az ikon-gombot; a loading attribútum hozzáadásával betöltési állapotot adhat hozzá.

<mdui-button-icon disabled icon="search" variant="tonal"></mdui-button-icon>
<mdui-button-icon loading icon="search" variant="tonal"></mdui-button-icon>
<mdui-button-icon loading disabled icon="search" variant="tonal"></mdui-button-icon>

Forrás

API

Tulajdonságok

Attribútum	Tulajdonság	Típus	Alapértelmezett
`variant`	`variant`	`'standard' \| 'filled' \| 'tonal' \| 'outlined'`	`'standard'`
Az ikon gomb variánsa. A lehetséges értékek: `standard`: A legalacsonyabb prioritású műveletekhez `filled`: Erős vizuális hatású, magas prioritású műveletekhez `tonal`: Vizuális hatása a `filled` és az `outlined` között van, közepes vagy magas prioritású műveletekhez `outlined`: Közepes prioritású műveletekhez
`icon`	`icon`	`string`	-
A Material Icons ikon neve. Beállítható az alapértelmezett slot-on keresztül 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.
`selectable`	`selectable`	`boolean`	`false`
Kiválasztható-e.
`selected`	`selected`	`boolean`	`false`
Ki van-e választva.
`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.
`change`
A kiválasztott állapot megváltozásakor aktiválódik.
`invalid`
Az űrlapmező ellenőrzésének sikertelenségekor aktiválódik.

Slots

Név
(alapértelmezett)
Ikon komponens.
`selected-icon`
A kiválasztott állapotban megjelenő ikon elem.

CSS Parts

Név
`button`
A belső `<button>` vagy `<a>` elem.
`icon`
A nem kiválasztott állapot ikonja.
`selected-icon`
A kiválasztott állapot ikonja.
`loading`
A betöltési állapotot jelző `<mdui-circular-progress>` elem.

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.

Előző fejezet

Button Gomb

Következő fejezet

Card Kártya