ChipChip

A chip megkönnyíti az adatbevitelt, a kiválasztást, a tartalom szűrését és a kapcsolódó műveletek végrehajtását.

Használat

A komponens importálása:

import 'mdui/components/chip.js';

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

import type { Chip } from 'mdui/components/chip.js';

Példa:

Chip

<mdui-chip>Chip</mdui-chip>

Az icon és end-icon attribútumok hozzáadásával Material Icons ikonokat adhat a chip bal és jobb oldalán. Az icon és end-icon slotokon keresztül is hozzáadhat elemeket a chip bal és jobb oldalához.

Ikon

Záró ikon

Slot

<mdui-chip icon="search">Ikon</mdui-chip>
<mdui-chip end-icon="arrow_forward">Záró ikon</mdui-chip>
<mdui-chip>
  Slot
  <mdui-icon slot="icon" name="downloading"></mdui-icon>
  <mdui-icon slot="end-icon" name="attach_file"></mdui-icon>
</mdui-chip>

Forrás

Link

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

Link

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

Forrás

Letiltott és betöltési állapot

A disabled attribútummal letilthatja a chipet; a loading attribútummal betöltési állapotot adhat hozzá.

Letiltva

Betöltés

Betöltés és letiltva

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

Forrás

Kijelölhető

Ha hozzáadja a selectable attribútumot, a chip kijelölhetővé válik.

Chip

<mdui-chip selectable>Chip</mdui-chip>

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.

Chip

<mdui-chip selectable selected-icon="favorite">Chip</mdui-chip>
<mdui-chip selectable>
  Chip
  <mdui-icon slot="selected-icon" name="favorite"></mdui-icon>
</mdui-chip>

Forrás

Miután a chipet kijelölték, a selected attribútum értéke true lesz. A selected attribútummal a chip alapértelmezés szerint kijelölt állapotú lehet.

Chip

<mdui-chip selectable selected>Chip</mdui-chip>

Forrás

Törölhető

Ha hozzáadja a deletable attribútumot, a chip jobb oldalán törlés ikon jelenik meg. Az ikonra kattintva a delete esemény aktiválódik. A delete-icon attribútummal megadhatja a törlés ikon Material Icons nevét, vagy a delete-icon sloton keresztül adhatja meg a törlés ikon elemét.

Chip

<mdui-chip deletable>Chip</mdui-chip>
<mdui-chip deletable delete-icon="backspace">Chip</mdui-chip>
<mdui-chip deletable>
  Chip
  <mdui-icon slot="delete-icon" name="backspace"></mdui-icon>
</mdui-chip>

Forrás

API

Tulajdonságok

Attribútum	Tulajdonság	Típus	Alapértelmezett
`variant`	`variant`	`'assist' \| 'filter' \| 'input' \| 'suggestion'`	`'assist'`
A chip variánsa. A lehetséges értékek: `assist`: Az aktuális kontextushoz kapcsolódó segédműveletek megjelenítésére, pl. megosztás, kedvencek funkciók egy rendelési oldalon `filter`: Tartalom szűrésére, pl. keresési eredmények szűrése egy találati oldalon `input`: A felhasználó által bevitt információ részleteinek megjelenítésére, pl. kapcsolatok a Gmail "Címzett" mezőjében `suggestion`: Dinamikusan generált ajánlások biztosítására a felhasználói műveletek egyszerűsítése érdekében, pl. üzenetküldő alkalmazásokban a felhasználó által esetleg elküldeni kívánt információ előrejelzése
`elevated`	`elevated`	`boolean`	`false`
Megjelenjen-e árnyék.
`selectable`	`selectable`	`boolean`	`false`
Kiválasztható-e.
`selected`	`selected`	`boolean`	`false`
Ki van-e választva.
`deletable`	`deletable`	`boolean`	`false`
Törölhető-e. `true` érték esetén a chip jobb oldalán egy törlés ikon jelenik meg.
`icon`	`icon`	`string`	-
A bal oldali Material Icons ikon neve. Beállítható a `slot="icon"` segítségével is.
`selected-icon`	`selectedIcon`	`string`	-
A kiválasztott állapotban lévő bal oldali Material Icons ikon neve. Beállítható a `slot="selected-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.
`delete-icon`	`deleteIcon`	`string`	-
Törölhető állapotban a jobb oldali törlés ikon Material Icons ikonjának neve. Beállítható a `slot="delete-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.
`change`
A kiválasztott állapot megváltozásakor aktiválódik.
`delete`
A törlés ikonra kattintáskor aktiválódik.

Slots

Név
(alapértelmezett)
A chip szövege.
`icon`
A bal oldali elem.
`end-icon`
A jobb oldali elem.
`selected-icon`
A kiválasztott állapotban lévő bal oldali elem.
`delete-icon`
Törölhető állapotban a jobb oldali törlés elem.

CSS Parts

Név
`button`
A belső `<button>` vagy `<a>` elem.
`label`
A chip szövege.
`icon`
A bal oldali ikon.
`end-icon`
A jobb oldali ikon.
`selected-icon`
A kiválasztott állapotban lévő bal oldali ikon.
`delete-icon`
Törölhető állapotban a jobb oldali törlés ikon.
`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

Checkbox Jelölőnégyzet

Következő fejezet

CircularProgress Kör alakú folyamatjelző

ChipChip

Használat

Példák

Változat

Árnyék

Ikon

Link

Letiltott és betöltési állapot

Kijelölhető

Törölhető

API

Tulajdonságok

Metódusok

Események

Slots

CSS Parts

CSS egyéni tulajdonságok