CardKarta

Karta je univerzální komponenta pro obsah a akce související s jedním tématem.

Způsob použití

Importujte komponentu podle potřeby:

import 'mdui/components/card.js';

Importujte TypeScript typy komponenty podle potřeby:

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

Příklad použití:

Karta

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

Příklady

Tvar

Použijte atribut variant k nastavení tvaru karty.

<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>

Zdrojový kód

Klikatelné

Atribut clickable z ní udělá klikací kartu. Tím se přidá efekt při najetí myší a efekt vlnky při kliknutí.

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

Zdrojový kód

Odkaz

Atribut href změní kartu na odkaz. Pak můžete také použít tyto atributy související s odkazy: download, target, rel.

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

Zdrojový kód

Zakázaný stav

Atribut disabled kartu zakáže.

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

Zdrojový kód

API

Vlastnosti

Atribut	Vlastnost	Typ	Výchozí
`variant`	`variant`	`'elevated' \| 'filled' \| 'outlined'`	`'elevated'`
Varianta karty. Možné hodnoty: `elevated`: Karta se stínem, vizuálně více oddělená od pozadí. `filled`: Karta s výplní, vizuálně méně oddělená od pozadí. `outlined`: Karta s okrajem, vizuálně nejvíce oddělená od pozadí.
`clickable`	`clickable`	`boolean`	`false`
Určuje, zda je karta klikatelná. Pokud je `true`, karta bude mít efekt při najetí myší a efekt vlny při kliknutí.
`disabled`	`disabled`	`boolean`	`false`
Určuje, zda je karta zakázaná.
`href`	`href`	`string`	-
Cílová URL odkazu. Pokud je tato vlastnost nastavena, komponenta se interně vykreslí jako prvek `<a>` a zpřístupní se vlastnosti pro odkazy.
`download`	`download`	`string`	-
Soubor ke stažení. Poznámka: Platí pouze, pokud je nastaven atribut `href`.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
Způsob otevření odkazu. Možné hodnoty: `_blank`: Otevře odkaz v novém okně nebo kartě. `_parent`: Otevře odkaz v nadřazeném okně. `_self`: Výchozí možnost. Otevře odkaz ve stejném okně. `_top`: Otevře odkaz v celém okně. Poznámka: Platí pouze, pokud je nastaven atribut `href`.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
Vztah mezi aktuálním dokumentem a odkazovaným dokumentem. Možné hodnoty: `alternate`: Alternativní verze aktuálního dokumentu. `author`: Autor aktuálního dokumentu nebo článku. `bookmark`: Trvalý odkaz na konkrétní část dokumentu. `external`: Odkaz vede na externí zdroj (mimo aktuální web/doménu). `help`: Odkaz na související nápovědu. `license`: Hlavní obsah aktuálního dokumentu je pokryt licencí odkazovaného dokumentu. `me`: Odkaz směřuje na profil vlastníka (rel="me"). `next`: Aktuální dokument je součástí série a odkazovaný dokument je následující v sérii. `nofollow`: Autor nebo vydavatel aktuálního dokumentu neschvaluje odkazovaný dokument. `noreferrer`: Neodesílá HTTP hlavičku `Referer`. Má podobný účinek jako `noopener`. `opener`: Pokud má odkaz atribut `target="_blank"`, atribut `rel="opener"` určuje, zda nové okno nebo karta bude mít přístup k původnímu oknu přes `window.opener`. `prev`: Aktuální dokument je součástí série a odkazovaný dokument je předchozí v sérii. `search`: Odkazuje na vyhledávací zdroj pro aktuální dokument a související stránky. `tag`: Poskytuje štítek vhodný pro aktuální dokument (identifikovaný danou adresou). Poznámka: Dostupné pouze při zadání atributu `href`.
`autofocus`	`autofocus`	`boolean`	`false`
Určuje, zda prvek získá automaticky fokus po dokončení načítání stránky.
`tabindex`	`tabIndex`	`number`	-
Pořadí prvku při přepínání fokusu pomocí klávesy Tab.

Metody

Název	Parametry	Vrací
`click`		`void`
Simuluje kliknutí myší na prvek.
`focus`	`options: FocusOptions` (Volitelné)	`void`
Nastaví fokus na aktuální prvek. Lze předat objekt jako parametr s vlastnostmi: `preventScroll`: Ve výchozím nastavení se po získání fokusu stránka posune tak, aby byl prvek viditelný. Pokud nechcete, aby se stránka posouvala, nastavte tuto vlastnost na `true`.
`blur`		`void`
Odebere fokus z aktuálního prvku.

Události

Název
`focus`
Spustí se při získání fokusu.
`blur`
Spustí se při ztrátě fokusu.

Slots

Název
(výchozí)
Obsah karty.

CSS Custom Properties

Název
`--shape-corner`
Velikost zaoblení rohů komponenty. Lze zadat konkrétní hodnotu v pixelech; doporučuje se však odkazovat na Designové tokeny.

Předchozí kapitola

ButtonIcon Ikonové tlačítko

Další kapitola

Checkbox Zaškrtávací políčko