Templates
The ActionSheet component contains the following building blocks:
Header—Rendered on top of the content. By default, it includes atitleand 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 anActionSheetFooterTemplateis 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 anitemscollection is provided.kendoActionSheetHeaderTemplate—Specifies the header section of the ActionSheet.kendoActionSheetContentTemplate—Overrides theContentbuilding 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
kendoActionSheetHeaderTemplatedirective overrides the ActionSheettitleandsubtitleoptions.
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
kendoActionSheetTemplatedirective is used, only the contents inside itsng-templateelement will be displayed. All other template directives will be ignored.
The following example demonstrates the ActionSheetTemplate in action.