Die v-card-Komponente ist eine vielseitige Komponente, die für alles von einem Panel bis hin zu einem statischen Bild verwendet werden kann. Die card-Komponente verfügt über zahlreiche Hilfskomponenten, um das Markup so einfach wie möglich zu gestalten. Komponenten, die keine aufgelisteten Optionen besitzen, verwenden Vue-Funktionskomponenten zur schnelleren Darstellung und vereinfachen die Entwicklung durch einfache Auszeichnungen.
Eine Karte besitzt 4 grundlegende Komponenten: v-card-title, v-card-subtitle, v-card-text und v-card-actions.
v-card-title: Stellt eine Standard Schriftgröße (font-size) und Padding für Kartentitel bereit. Schriftgröße kann mit Typographieklassen überschrieben werden.
Wählen Sie unten Ihren gewünschte Komponente aus und sehen Sie die verfügbaren Attribute, Slots, Ereignisse und Funktionen.
Unten finden Sie eine Sammlung einfacher bis komplexer Beispiele.
Eine Karte mit outlined besitzt keine Höhe und nur einen dünnen Rand.
The v-card component is useful for wrapping content.
Cards are entry points to more detailed information. To keep things concise, ensure to limit the number of actions the user can take.
Using the layout system, we can add custom text anywhere within the background.
Mit Grids können Sie schöne Layouts erstellen.
Using v-flex, you can create customized horizontal cards. Use the contain property to shrink the v-img to fit inside the container, instead of covering.
With a simple conditional, you can easily add supplementary text that is hidden until opened.
The v-card component has multiple children components that help you build complex examples without having to worry about spacing. This example is comprised of the v-card-title, v-card-text and v-card-actions components.
Cards can be set to a loading state when processing a user action. This disables further actions and provides visual feedback with an indeterminate v-progress-linear.
Using v-list-items and a v-slider, we are able to create a unique weather card. The list components ensure that we have consistent spacing and functionality while the slider component allows us to provide a useful interface of selection to the user.
Using v-list-item and v-img allows us to create unique card layouts in an advanced setting