Templates
The ActionSheet component contains the following building blocks:
Header
—Rendered on top of the content. By default, it includes atitle
and asubtitle
.Content
—Renders the main content area of the ActionSheet. By default, it contains a list of items that could be optionally split in two groups. The content can be completely customized.Footer
—Rendered below the content if anActionSheetFooterTemplate
is provided.
The ActionSheet allows you to use templates to customize the appearance of its building blocks.
To define a template, nest an <ng-template>
tag inside the <kendo-actionsheet>
tag and apply one of the following directives to it:
kendoActionSheetItemTemplate
—Specifies the list items content, when anitems
collection is provided.kendoActionSheetHeaderTemplate
—Specifies the header section of the ActionSheet.kendoActionSheetContentTemplate
—Overrides theContent
building block section.kendoActionSheetFooterTemplate
—Specifies the footer area of the ActionSheet.kendoActionSheetTemplate
—Overrides all building blocks of the component.
Item Template
When the ActionSheet renders an items
collection, you could use the ActionSheetItemTemplate
directive and gain full control over the appearance of each item. To access a reference to the current item, use the item
field passed by the template:
<kendo-actionsheet *ngIf="opened" [items]="items">
<ng-template kendoActionSheetItemTemplate let-item>
<p>{{item.title}}</p>
</ng-template>
</kendo-actionsheet>
The following example demonstrates the ActionSheetItemTemplate
in action.
Header Template
Use the ActionSheetHeaderTemplate
directive to customize the header section of the ActionSheet.
The
kendoActionSheetHeaderTemplate
directive overrides the ActionSheettitle
andsubtitle
options.
The following example demonstrates the ActionSheetHeaderTemplate
in action.
Content Template
The ActionSheetContentTemplate
directive allows you to completely customize the main content area of the ActionSheet. This enables you to render custom content even when an items
collection is not provided.
The following example demonstrates the ActionSheetContentTemplate
in action.
Footer Template
Use the ActionSheetFooterTemplate
directive to render a footer below the Content
ActionSheet area.
The following example demonstrates the ActionSheetFooterTemplate
in action.
ActionSheet Template
Use the ActionSheetTemplate
directive to display custom content inside the ActionSheet.
When the
kendoActionSheetTemplate
directive is used, only the contents inside itsng-template
element will be displayed. All other template directives will be ignored.
The following example demonstrates the ActionSheetTemplate
in action.