diff --git a/api-reference/10 UI Components/dxCardView/9 Types/CardHeaderItem/template.md b/api-reference/10 UI Components/dxCardView/9 Types/CardHeaderItem/template.md new file mode 100644 index 0000000000..46f8eae56a --- /dev/null +++ b/api-reference/10 UI Components/dxCardView/9 Types/CardHeaderItem/template.md @@ -0,0 +1,121 @@ +--- +id: CardHeaderItem.template +type: template +--- +--- +##### shortDescription +Configures a custom template for the item. + +##### return: String | Element | jQuery +Template name or container. + +##### param(itemData): CollectionWidgetItem + + +##### param(itemIndex): Number + + +##### param(itemElement): DxElement + + +--- +--- +##### jQuery + +This property supports the following values: + +- A template name (as a string) +- Template container as a jQuery object +- Template container as a DOM Node +- A function that returns a template container (as a jQuery object or DOM node) + +For more information about templates, refer to the following topic: [DevExtreme {Framework} - Custom Templates](/Documentation/Guide/UI_Components/Common/Templates/#Custom_Templates). + + + $("#card-view-container").dxCardView({ + cardHeader: { + items: [{ // ... + template: '
Custom Item
' + }], + }, + }); + +##### Angular + +This property supports the following values: + +- A [template](/Documentation/ApiReference/UI_Components/Markup_Components/dxTemplate/) name (as a string) +- Template container as a DOM Node + +For more information about templates, refer to the following topic: [DevExtreme {Framework} - Custom Templates](/Documentation/Guide/UI_Components/Common/Templates/#Custom_Templates). + + + + + +
+
Custom Item
+
+
+
+
+ +##### Vue + +This property supports the following values: + +- A template name (as a string) +- Template container as a DOM Node + +For more information about templates, refer to the following topic: [DevExtreme {Framework} - Custom Templates](/Documentation/Guide/UI_Components/Common/Templates/#Custom_Templates). + + + + + + +##### React + +This property supports the following values: + +- A template name (as a string) +- Template container as a DOM Node + +[note] Use the React-specific [render](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/cardHeader/items/#render) and [component](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/cardHeader/items/#component) properties instead of **template**. + +For more information about templates, refer to the following topic: [DevExtreme {Framework} - Custom Templates](/Documentation/Guide/UI_Components/Common/Templates/#Custom_Templates). + + + import { CardView, CardHeader, Item } from 'devextreme-react/card-view'; + + fucntion renderCustomItem() { + return
Custom Item
; + } + + function App() { + return ( + + + + + + ); + } + +--- + +#####See Also##### +- [Custom Templates](/Documentation/Guide/UI_Components/Common/Templates/#Custom_Templates)