Card

Die Card ist eine vielseitige Komponente zur Darstellung von Inhalten und Aktionen, die sich auf ein einzelnes Thema beziehen.

Verwendung

Importieren Sie die Komponente nach Bedarf:

import 'mdui/components/card.js';

Importieren Sie den TypeScript-Typ der Komponente nach Bedarf:

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

Beispiel:

Card

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

Beispiele

Form

Mit dem Attribut variant bestimmen Sie die Form der Card.

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

Quellcode

Anklickbar

Mit dem Attribut clickable wird die Card anklickbar und erhält einen Maus-Hover-Effekt sowie einen Klick-Wellen-Effekt.

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

Quellcode

Link

Mit dem Attribut href verwandeln Sie die Card in einen Link. Zusätzlich stehen die Attribute download, target und rel zur Verfügung.

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

Quellcode

Deaktivierter Zustand

Mit dem Attribut disabled wird die Card deaktiviert.

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

Quellcode

API

Eigenschaften

Attribut	Property	Typ	Standard
`variant`	`variant`	`'elevated' \| 'filled' \| 'outlined'`	`'elevated'`
Definiert die Card-Variante. Mögliche Werte: `elevated`: Mit Schatten, bietet mehr Abgrenzung vom Hintergrund als `filled`, aber weniger als `outlined`. `filled`: Bietet minimale Abgrenzung vom Hintergrund. `outlined`: Mit Rahmen, bietet die größte Abgrenzung vom Hintergrund.
`clickable`	`clickable`	`boolean`	`false`
Macht die Card anklickbar. Wenn gesetzt, werden Hover- und Klick-Ripple-Effekte hinzugefügt.
`disabled`	`disabled`	`boolean`	`false`
Deaktiviert die Card.
`href`	`href`	`string`	-
Die URL für den Link. Wenn gesetzt, wird die Komponente als `<a>`-Element gerendert und unterstützt Link-bezogene Attribute.
`download`	`download`	`string`	-
Lädt die verlinkte URL herunter. Hinweis: Nur verfügbar, wenn `href` angegeben ist.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
Legt fest, wo die verlinkte URL geöffnet wird. Mögliche Werte: `_blank`: Öffnet in einem neuen Tab oder Fenster. `_parent`: Öffnet im übergeordneten Browsing-Kontext oder `_self`, wenn kein übergeordneter Kontext vorhanden ist. `_self`: Öffnet im aktuellen Browsing-Kontext (Standard). `_top`: Öffnet im obersten Browsing-Kontext oder `_self`, wenn kein übergeordneter Kontext vorhanden ist. Hinweis: Nur verfügbar, wenn `href` angegeben ist.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
Gibt die Beziehung der verlinkten URL als durch Leerzeichen getrennte Link-Typen an. Mögliche Werte: `alternate`: Eine alternative Version des aktuellen Dokuments. `author`: Der Autor des aktuellen Dokuments oder Artikels. `bookmark`: Der Permalink des übergeordneten Abschnitts. `external`: Das referenzierte Dokument ist nicht Teil derselben Website wie das aktuelle Dokument. `help`: Ein Link zu kontextsensitiver Hilfe. `license`: Inhalt, der durch die im referenzierten Dokument beschriebene Urheberrechtslizenz abgedeckt ist. `me`: Links zu Inhalten, die dem Autor des aktuellen Dokuments gehören. `next`: Das nächste Dokument in der Serie. `nofollow`: Gibt an, dass der ursprüngliche Autor oder Herausgeber des aktuellen Dokuments das referenzierte Dokument nicht unterstützt. `noreferrer`: Verhindert das Senden des `Referer`-Headers. Hat die gleiche Wirkung wie `noopener`. `opener`: Erstellt einen neuen Browsing-Kontext, wenn der Hyperlink ansonsten in einem obersten Kontext geöffnet würde, der nicht sekundär ist (z. B. wenn `target="_blank"` angegeben ist). `prev`: Das vorherige Dokument in der Serie. `search`: Links zu einer Ressource, die verwendet werden kann, um im aktuellen Dokument und seinen verwandten Seiten zu suchen. `tag`: Markiert das aktuelle Dokument mit dem angegebenen Tag. Hinweis: Nur verfügbar, wenn `href` angegeben ist.
`autofocus`	`autofocus`	`boolean`	`false`
Gibt an, ob das Element beim Laden der Seite den Fokus erhält.
`tabindex`	`tabIndex`	`number`	-
Die Tab-Reihenfolge des Elements beim Navigieren mit der Tabulatortaste.

Methoden

Name	Parameter	Rückgabewert
`click`		`void`
Simuliert einen Mausklick auf das Element.
`focus`	`options: FocusOptions` (Optional)	`void`
Setzt den Fokus auf das Element. Der optionale Objektparameter kann eine `preventScroll`-Eigenschaft enthalten. Wenn `preventScroll` auf `true` gesetzt ist, scrollt die Seite nicht, um das fokussierte Element in den sichtbaren Bereich zu bringen.
`blur`		`void`
Entfernt den Fokus vom Element.

Ereignisse

Name
`focus`
Wird ausgelöst, wenn die Card den Fokus erhält.
`blur`
Wird ausgelöst, wenn die Card den Fokus verliert.

Slots

Name
Standard
Card-Inhalt.

CSS Custom Property

Name
`--shape-corner`
Der Eckradius der Komponente. Sie können einen bestimmten Pixelwert verwenden, es wird jedoch empfohlen, auf Design-Tokens zu verweisen.

Vorherige Seite

ButtonIcon

Nächste Seite

Checkbox