CardKártya

A kártya egy sokoldalú komponens, amely egyetlen témához kapcsolódó tartalmak és műveletek megjelenítésére szolgál.

Használat

A komponens importálása:

import 'mdui/components/card.js';

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

import type { Card } from 'mdui/components/card.js';

Példa:

Kártya

<mdui-card style="width: 200px;height: 124px">Kártya</mdui-card>

Példák

Változat

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

<mdui-card variant="elevated" style="width: 200px;height: 124px"></mdui-card>
<mdui-card variant="filled" style="width: 200px;height: 124px"></mdui-card>
<mdui-card variant="outlined" style="width: 200px;height: 124px"></mdui-card>

Forrás

Kattintható

A clickable attribútummal a kártya kattinthatóvá válik, ilyenkor rámutatáskor megjelenő kiemelés és kattintási hullámzás jelenik meg.

<mdui-card clickable style="width: 200px;height: 124px"></mdui-card>

Forrás

Link

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

<mdui-card href="https://www.mdui.org" target="_blank" style="width: 200px;height: 124px"></mdui-card>

Forrás

Letiltott állapot

A disabled attribútummal letilthatja a kártyát.

<mdui-card disabled style="width: 200px;height: 124px"></mdui-card>

Forrás

API

Tulajdonságok

Attribútum	Tulajdonság	Típus	Alapértelmezett
`variant`	`variant`	`'elevated' \| 'filled' \| 'outlined'`	`'elevated'`
A kártya variánsa. A lehetséges értékek: `elevated`: Árnyékos kártya, nagyobb vizuális elkülönülés a háttértől `filled`: Háttérszínnel rendelkező kártya, kisebb vizuális elkülönülés a háttértől `outlined`: Keretes kártya, a legnagyobb vizuális elkülönülés a háttértől
`clickable`	`clickable`	`boolean`	`false`
Kattintható-e. `true` érték esetén a kártya hover és kattintási hullámhatást kap.
`disabled`	`disabled`	`boolean`	`false`
Letiltott állapotú-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.

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.

Események

Név
`focus`
Fókusz elnyerésekor aktiválódik.
`blur`
Fókusz elvesztésekor aktiválódik.

Slots

Név
(alapértelmezett)
A kártya tartalma.

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

ButtonIcon Ikon-gomb

Következő fejezet

Checkbox Jelölőnégyzet