JavaScript/jQuery CardView - cardCover
Configures the card cover.
Type:
jQuery
index.js
$(#dxCardView).dxCardView({
// ...
cardCover: {
imageExpr: (data) => data.imgUrl,
altExpr: (data) => data.imgAlt,
aspectRatio: 3.5,
maxHeight: 200,
}
})Angular
app.component.html
app.component.ts
<dx-card-view ... >
<dxo-card-view-card-cover
imageExpr="imgUrlExpr"
altExpr="imgAltExpr"
aspectRatio="3.5"
maxHeight="200"
></dxo-card-view-card-cover>
</dx-card-view>
// ...
export class AppComponent {
imgUrlExpr(data: Employee): string {
return data.imgUrl;
}
imgAltExpr(data: Employee): string {
return data.imgAlt;
}
}Vue
App.vue
<template>
<DxCardView ... >
<DxCardCover
image-expr="imgUrlExpr"
alt-expr="imgAltExpr"
aspect-ratio="3.5"
max-height="200"
/>
</DxCardView>
</template>
<script setup lang="ts">
import DxCardView, { DxCardCover } from 'devextreme-vue/card-view';
function imgUrlExpr(data: Employee): string {
return data.imgUrl;
}
function imgAltExpr(data: Employee): string {
return data.imgAlt;
}
</script>React
App.ts
import CardView, { CardCover } from 'devextreme-react/card-view';
function imgUrlExpr(data: Employee): string {
return data.imgUrl;
}
function imgAltExpr(data: Employee): string {
return data.imgAlt;
}
function App() {
return (
<CardView ... >
<CardCover
imageExpr="imgUrlExpr"
altExpr="imgAltExpr"
aspectRatio="3.5"
maxHeight="200"
/>
</CardView>
)
}altExpr
Specifies which data field to use as the alt argument of the cover image.
Function parameters:
data: any
The card's data.
Return Value:
The calculated alt attribute.
imageExpr
Specifies which data field to use as the src argument of the cover image.
Function parameters:
data: any
The card's data.
Return Value:
The calculated src attribute.
Feedback