New to KendoReact? Start a free 30-day trial

ActionSheetProps

Interface

The props of the ActionSheet component.

Specifies the container element where the ActionSheet will be appended. Defaults to null (renders in place). Set to a DOM element (e.g. document.body) to escape CSS containing blocks created by transform, backdrop-filter, etc.

Default:

null

Example:

jsx

<ActionSheet appendTo={document.body} />

className?

string

The CSS classes that will be rendered on the inner ActionSheet element.

Example:

jsx

<ActionSheet className="custom-class" />

expand?

boolean

Specifies the state of the ActionSheet.

Example:

jsx

<ActionSheet expand={true} />

id?

string

Sets the id attribute on the ActionSheet element.

items?

ActionSheetItemProps[]

The collection of items that will be rendered in the ActionSheet.

Example:

jsx

const items = [{ text: 'Item 1' }, { text: 'Item 2' }];
<ActionSheet items={items} />

navigatable?

boolean

Specifies if the ActionSheet can be navigatable with keyboard. Defaults to true.

Default:

true

Example:

jsx

<ActionSheet navigatable={false} />

navigatableElements?

string[]

Specifies the selectors of the navigatable elements inside the templates of the ActionSheet.

Default:

[]

Example:

jsx

<ActionSheet navigatableElements={['.custom-class']} />

onClose?

(event: SyntheticEvent<Element, Event>) => void

Fires when the modal overlay is clicked.

Parameters:eventSyntheticEvent<Element, Event>

Example:

jsx

<ActionSheet onClose={(e) => console.log('Overlay clicked')} />

onItemSelect?

(event: { syntheticEvent: SyntheticEvent<Element, Event>; title?: string; item?: any }) => void

Fires when an ActionSheet item is clicked.

Parameters:event{ syntheticEvent: SyntheticEvent<Element, Event>; title?: string; item?: any }

Example:

jsx

<ActionSheet onItemSelect={(e) => console.log(e.item)} />

position?

"top" | "bottom" | "left" | "right" | "fullscreen"

Specifies the position of the ActionSheet.

Default:

'bottom'

Example:

jsx

<ActionSheet position="top" />

prefixActions?

ReactNode

Specifies the actions rendered at the start of the header.

Example:

jsx

<ActionSheet prefixActions={<Button>Action</Button>} />

style?

CSSProperties

Specifies the styles of the ActionSheet component.

subTitle?

ReactNode

Specifies the text that is rendered under the title.

Example:

jsx

<ActionSheet subTitle="Subtitle text" />

suffixActions?

ReactNode

Specifies the actions rendered at the end of the header.

Example:

jsx

<ActionSheet suffixActions={<Button>Action</Button>} />

tabIndex?

number

Specifies the tabIndex of the ActionSheet.

Example:

jsx

<ActionSheet tabIndex={0} />

title?

ReactNode

Specifies the text that is rendered as title.

Example:

jsx

<ActionSheet title="Title text" />

ActionSheetProps

Definition

Properties

animation?

animationDuration?

appendTo?

className?

expand?

id?

items?

navigatable?

navigatableElements?

onClose?

onItemSelect?

position?

prefixActions?

style?

subTitle?

suffixActions?

tabIndex?

title?