TxCardView · Vue · tecexpress

Card collection with search, paging, selection and custom content.

Prop	Type	Default	Meaning
`dataSource`	`TxSource<DataRow> \| undefined`	`[]`	List, configuration or DataSource instance; takes precedence over items.
`keyExpr`	`string \| undefined`	`id`	Field containing the stable record key.
`titleExpr`	`string \| undefined`	`title`	Card title field.
`subtitleExpr`	`string \| undefined`	`subtitle`	Card subtitle field.
`imageExpr`	`string \| undefined`	`imageUrl`	Card image URL field.
`imageAltExpr`	`string \| undefined`	`imageAlt`	Image alternative text field.
`columns`	`CardField[] \| undefined`	`[]`	Column or card field configurations.
`searchEnabled`	`boolean \| undefined`	`true`	Enables searching.
`searchExpr`	`string \| string[] \| undefined`	`undefined`	Search fields or getters.
`pageSize`	`number \| undefined`	`6`	Records per page.
`pageIndex`	`number \| undefined`	`undefined`	Zero-based page index.
`selection`	`"none" \| "single" \| "multiple" \| undefined`	`none`	Selection mode.
`selectedCardKeys`	`RowKey[] \| undefined`	`undefined`	Controlled set of selected card keys.
`disabled`	`boolean \| undefined`	`false`	Disables interaction.
`loading`	`boolean \| undefined`	`false`	Shows the loading state.
`noDataText`	`string \| undefined`	`Keine Karten vorhanden.`	Text for an empty collection.
`label`	`string \| undefined`	`Kartenansicht`	Label or accessible name.

Events

Event	Payload / behavior
cardClick	CardClickEvent: data, key, index, event.
selectionChanged	New selection: { selectedCardKeys, selectedCardsData }.
update:selectedCardKeys	New selectedCardKeys value; accept using v-model:selectedCardKeys (modelValue: v-model).
update:pageIndex	New pageIndex value; accept using v-model:pageIndex (modelValue: v-model).
searchChanged	New search text as a string.

Slots

Slot	Arguments
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.