Custom Rendering
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 you can split into two groups. The content can be completely customized.Footer—Rendered below the content if anActionSheetFootercomponent is provided.
The ActionSheet allows you to use custom components to customize the appearance of its building blocks.
To render custom content, nest it inside the following components:
ActionSheetHeader—Specifies the header section of the ActionSheet.ActionSheetContent—Overrides theContentbuilding block section.ActionSheetFooter—Specifies the footer area of the ActionSheet.
Header Component
Use the ActionSheetHeader component to customize the header section of the ActionSheet.
The
ActionSheetHeadercomponent overrides the ActionSheettitleandsubTitleoptions.
The following example demonstrates the ActionSheetHeader in action.
Content Component
The ActionSheetContent component 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 ActionSheetContent in action.
Footer Component
Use the ActionSheetFooter component to render a footer below the Content ActionSheet area.
The following example demonstrates the ActionSheetFooter in action.
