ButtonGomb

A gomb elsősorban műveletek végrehajtására szolgál, például e-mailek küldésére, dokumentumok megosztására vagy bejegyzések kedvelésére.

Használat

A komponens importálása:

import 'mdui/components/button.js';

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

import type { Button } from 'mdui/components/button.js';

Példa:

Gomb

<mdui-button>Gomb</mdui-button>

Példák

Változat

A variant attribútummal állíthatja be a gomb változatát.

Kiemelt

Kitöltött

Tónusos

Körvonalazott

Szöveges

<mdui-button variant="elevated">Kiemelt</mdui-button>
<mdui-button variant="filled">Kitöltött</mdui-button>
<mdui-button variant="tonal">Tónusos</mdui-button>
<mdui-button variant="outlined">Körvonalazott</mdui-button>
<mdui-button variant="text">Szöveges</mdui-button>

Forrás

Teljes szélesség

A full-width attribútummal a gomb a szülőelem teljes szélességét kitölti.

Gomb

<mdui-button full-width>Gomb</mdui-button>

Forrás

Ikon

Az icon és end-icon attribútumokkal Material Icons ikonokat adhat a gomb elején és végén. Az icon és end-icon slotokban is megadhat elemeket a gomb elején és végén.

Ikon

Slot

<mdui-button icon="search" end-icon="arrow_forward">Ikon</mdui-button>
<mdui-button>
  Slot
  <mdui-icon slot="icon" name="downloading"></mdui-icon>
  <mdui-icon slot="end-icon" name="attach_file"></mdui-icon>
</mdui-button>

Forrás

Link

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

Link

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

Forrás

Letiltott és betöltési állapot

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

Letiltva

Betöltés

Betöltés és letiltva

<mdui-button disabled>Letiltva</mdui-button>
<mdui-button loading>Betöltés</mdui-button>
<mdui-button loading disabled>Betöltés és letiltva</mdui-button>

Forrás

API

Tulajdonságok

Attribútum	Tulajdonság	Típus	Alapértelmezett
`variant`	`variant`	`'elevated' \| 'filled' \| 'tonal' \| 'outlined' \| 'text'`	`'filled'`
A gomb variánsa. A lehetséges értékek: `elevated`: Árnyékos gomb, olyan esetekben használatos, amikor a gombot vizuálisan el kell különíteni a háttértől `filled`: Erős vizuális hatású, fontos folyamatok végső műveleteihez, mint pl. "Mentés", "Megerősítés" stb. `tonal`: Vizuális hatása a `filled` és az `outlined` között van, közepes vagy magas prioritású műveletekhez, mint pl. "Következő" egy folyamatban `outlined`: Keretes gomb, közepes prioritású, másodlagos műveletekhez, mint pl. "Vissza" `text`: Szöveges gomb, a legalacsonyabb prioritású műveletekhez
`full-width`	`fullWidth`	`boolean`	`false`
Kitölti-e a szülőelem teljes szélességét.
`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.
`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 gomb szövege.
`icon`
A gomb bal oldali eleme.
`end-icon`
A gomb jobb oldali eleme.

CSS Parts

Név
`button`
A belső `<button>` vagy `<a>` elem.
`label`
A gomb szövege.
`icon`
A gomb bal oldali ikonja.
`end-icon`
A gomb jobb oldali 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

BottomAppBar Alsó alkalmazássáv

Következő fejezet

ButtonIcon Ikon-gomb