TxCardView · Vue · tecexpress

Kartenliste mit Suche, Pagination, Auswahl und eigenen Karteninhalten.

Prop	Typ	Standard	Bedeutung
`dataSource`	`TxSource<DataRow> \| undefined`	`[]`	Liste, Konfiguration oder DataSource-Instanz; hat Vorrang vor items.
`keyExpr`	`string \| undefined`	`id`	Feld für den stabilen Datensatzschlüssel.
`titleExpr`	`string \| undefined`	`title`	Feld des Kartentitels.
`subtitleExpr`	`string \| undefined`	`subtitle`	Feld des Kartenuntertitels.
`imageExpr`	`string \| undefined`	`imageUrl`	Feld der Kartenbildadresse.
`imageAltExpr`	`string \| undefined`	`imageAlt`	Feld des Bildalternativtexts.
`columns`	`CardField[] \| undefined`	`[]`	Spalten- beziehungsweise Kartenfeldkonfigurationen.
`searchEnabled`	`boolean \| undefined`	`true`	Aktiviert die Suche.
`searchExpr`	`string \| string[] \| undefined`	`undefined`	Felder beziehungsweise Getter der Suche.
`pageSize`	`number \| undefined`	`6`	Anzahl Datensätze je Seite.
`pageIndex`	`number \| undefined`	`undefined`	Nullbasierter Seitenindex.
`selection`	`"none" \| "single" \| "multiple" \| undefined`	`none`	Auswahlmodus.
`selectedCardKeys`	`RowKey[] \| undefined`	`undefined`	Kontrollierte Menge ausgewählter Kartenschlüssel.
`disabled`	`boolean \| undefined`	`false`	Sperrt die Interaktion.
`loading`	`boolean \| undefined`	`false`	Zeigt den Ladezustand.
`noDataText`	`string \| undefined`	`Keine Karten vorhanden.`	Text bei leerem Datenbestand.
`label`	`string \| undefined`	`Kartenansicht`	Beschriftung beziehungsweise zugänglicher Name.

Ereignisse

Event	Payload / Verhalten
cardClick	CardClickEvent: data, key, index, event.
selectionChanged	Neue Auswahl: { selectedCardKeys, selectedCardsData }.
update:selectedCardKeys	Neuer Wert von selectedCardKeys; über v-model:selectedCardKeys übernehmen (modelValue: v-model).
update:pageIndex	Neuer Wert von pageIndex; über v-model:pageIndex übernehmen (modelValue: v-model).
searchChanged	Neuer Suchtext als string.

Slots

Slot	Argumente
item	{ data, key, index, selected }
media	{ data, key, index, selected }
content	{ data, key, index, selected }
footer	{ data, key, index, selected }
field	{ data, column, value }

vue

<script setup lang="ts">
import { TxCardView } from '@tekocloud.de/tecexpress'
import '@tekocloud.de/tecexpress/themes/index.css'

</script>

<template>
  <TxCardView :data-source="[{ id: 1, title: 'Project' }]" />
</template>

TxCardView.