ActionSheetProps

The props of the ActionSheet component.

Name	Type	Default	Description
animation?	boolean		Controls the popup animation. By default, the open and close animations are disabled. jsx <ActionSheet animation={true} />
animationDuration?	number | ActionSheetAnimationDuration		Specifies the duration of the transition for the entering and closing Animation. Defaults to 300ms. jsx <ActionSheet animationDuration={500} />
children?	any		Represents the children that are passed to the ActionSheet. jsx <ActionSheet> <div>Custom Content</div> </ActionSheet>
className?	string		The CSS classes that will be rendered on the inner ActionSheet element. jsx <ActionSheet className="custom-class" />
expand?	boolean		Specifies the state of the ActionSheet. jsx <ActionSheet expand={true} />
items?	ActionSheetItemProps[]		The collection of items that will be rendered in the ActionSheet. jsx const items = [{ text: 'Item 1' }, { text: 'Item 2' }]; <ActionSheet items={items} />
navigatable?	boolean	true	Specifies if the ActionSheet can be navigatable with keyboard. Defaults to true. jsx <ActionSheet navigatable={false} />
navigatableElements?	string[]	[]	Specifies the selectors of the navigatable elements inside the templates of the ActionSheet. jsx <ActionSheet navigatableElements={['.custom-class']} />
onClose?	(event: SyntheticEvent<Element>) => void		Fires when the modal overlay is clicked. jsx <ActionSheet onClose={(e) => console.log('Overlay clicked')} />
onItemClick?	(event: { item?: any; syntheticEvent: SyntheticEvent<Element>; title?: string; }) => void		Deprecated. Fires when an ActionSheet item is clicked. Use onItemSelect event instead. jsx <ActionSheet onItemClick={(e) => console.log(e.item)} />
onItemSelect?	(event: { item?: any; syntheticEvent: SyntheticEvent<Element>; title?: string; }) => void		Fires when an ActionSheet item is clicked. jsx <ActionSheet onItemSelect={(e) => console.log(e.item)} />
onOverlayClick?	(event: SyntheticEvent<Element>) => void		Deprecated. Fires when the modal overlay is clicked. Use onClose event instead. jsx <ActionSheet onOverlayClick={(e) => console.log('Overlay clicked')} />
position?	"left" | "right" | "top" | "bottom" | "fullscreen"	'bottom'	Specifies the position of the ActionSheet. jsx <ActionSheet position="top" />
prefixActions?	React.ReactNode		Specifies the actions rendered at the start of the header. jsx <ActionSheet prefixActions={<button>Action</button>} />
style?	React.CSSProperties		Specifies the styles of the ActionSheet component.
subTitle?	React.ReactNode		Specifies the text that is rendered under the title. jsx <ActionSheet subTitle="Subtitle text" />
suffixActions?	React.ReactNode		Specifies the actions rendered at the end of the header. jsx <ActionSheet suffixActions={<button>Action</button>} />
tabIndex?	number		Specifies the tabIndex of the ActionSheet. jsx <ActionSheet tabIndex={0} />
title?	React.ReactNode		Specifies the text that is rendered as title. jsx <ActionSheet title="Title text" />