New to KendoReactStart a free 30-day trial

The props of the ActionSheet component.

Definition

Package:@progress/kendo-react-layout

Properties

animation?

boolean

Controls the popup animation. By default, the open and close animations are disabled.

Specifies the duration of the transition for the entering and closing Animation. Defaults to 300ms.

appendTo?

null | HTMLElement

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

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

expand?

boolean

Specifies the state of the ActionSheet.

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

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

Default:

true

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

Default:

[]

onClose?

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

Fires when the modal overlay is clicked.

Parameters:eventSyntheticEvent​<Element, Event>

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 }

position?

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

Specifies the position of the ActionSheet.

Default:

'bottom'

Specifies the actions rendered at the start of the header.

style?

CSSProperties

Specifies the styles of the ActionSheet component.

subTitle?

ReactNode

Specifies the text that is rendered under the title.

Specifies the actions rendered at the end of the header.

tabIndex?

number

Specifies the tabIndex of the ActionSheet.

title?

ReactNode

Specifies the text that is rendered as title.