FabLebegő műveletgomb

A lebegő műveletgomb (FAB) az oldal elsődleges műveletét emeli ki, hogy az mindig könnyen elérhető maradjon.

Használat

A komponens importálása:

import 'mdui/components/fab.js';

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

import type { Fab } from 'mdui/components/fab.js';

Példa:

<mdui-fab icon="edit"></mdui-fab>

Példák

Ikon

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

<mdui-fab icon="edit"></mdui-fab>
<mdui-fab>
  <mdui-icon slot="icon" name="edit"></mdui-icon>
</mdui-fab>

Forrás

Kibontott állapot

Az extended attribútummal kibontott állapotban jelenítheti meg a FAB-ot, ilyenkor az alapértelmezett slotban lévő szöveg is látható.

Szerkesztés

<mdui-fab extended icon="edit">Szerkesztés</mdui-fab>

Forrás

Változat

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

<mdui-fab variant="primary" icon="edit"></mdui-fab>
<mdui-fab variant="surface" icon="edit"></mdui-fab>
<mdui-fab variant="secondary" icon="edit"></mdui-fab>
<mdui-fab variant="tertiary" icon="edit"></mdui-fab>

Forrás

Méret

A size attribútummal állíthatja be a FAB méretét.

<mdui-fab size="small" icon="edit"></mdui-fab>
<mdui-fab size="normal" icon="edit"></mdui-fab>
<mdui-fab size="large" icon="edit"></mdui-fab>

Forrás

Link

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

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

Forrás

Letiltott és betöltési állapot

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

<mdui-fab disabled icon="edit"></mdui-fab>
<mdui-fab loading icon="edit"></mdui-fab>
<mdui-fab loading disabled icon="edit"></mdui-fab>

Forrás

API

Tulajdonságok

Attribútum	Tulajdonság	Típus	Alapértelmezett
`variant`	`variant`	`'primary' \| 'surface' \| 'secondary' \| 'tertiary'`	`'primary'`
A FAB variánsa, a különböző variánsok között csak a szín különbözik. Lehetséges értékek: `primary`: Elsődleges konténer háttérszínt használ `surface`: Felületi konténer magas háttérszínt használ `secondary`: Másodlagos konténer háttérszínt használ `tertiary`: Harmadlagos konténer háttérszínt használ
`size`	`size`	`'normal' \| 'small' \| 'large'`	`'normal'`
A FAB mérete. Lehetséges értékek: `normal`: Normál méretű FAB `small`: Kis méretű FAB `large`: Nagy méretű FAB
`icon`	`icon`	`string`	-
Material Icons ikon neve. Beállítható a `slot="icon"` segítségével is.
`extended`	`extended`	`boolean`	`false`
Kibontott állapotban van-e.
`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)
Szöveg.
`icon`
Ikon.

CSS Parts

Név
`button`
A belső `<button>` vagy `<a>` elem.
`label`
A jobb oldali szöveg.
`icon`
A bal oldali ikon.
`loading`
A betöltési állapotot jelző `<mdui-circular-progress>` elem.

CSS egyéni tulajdonságok

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

Előző fejezet

Dropdown Lenyíló lista

Következő fejezet

Icon Ikon