• Introduction
  • Getting Started
  • Vue 2 End of Support
  • Vue Wrappers End of Life
  • Native Components
    • Animation
    • Buttons
    • Chartsupdated
    • Conversational UI
    • Data Tools
    • Date Inputs
    • Dialogs
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputsupdated
    • Labels
    • Layout
      • Overview
      • Getting Started
      • ActionSheet
      • AppBar
      • Avatar
      • BottomNavigation
      • Card
      • ContextMenu
      • Drawer
      • ExpansionPanel
      • GridLayout
      • Menuupdated
      • PanelBar
      • Splitter
      • StackLayout
      • Stepper
      • TabStripupdated
      • TileLayout
      • Wizard
      • Globalization
      • API
    • ListBox
    • ListView
    • Notification
    • PDF Processing
    • Popup
    • Progress Bars
    • Scheduler
    • ScrollView
    • Tooltip
    • TreeList
    • TreeView
    • Upload
  • Wrapper Components
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • FAQ
  • Troubleshooting
Components / Layout / API / ActionSheetProps / 
New to Kendo UI for Vue? Start a free 30-day trial

ActionSheetProps

The props of the ActionSheet component.

NameTypeDefaultDescription

animation?

boolean

Controls the popup animation. By default, the animation is enabled.

animationDuration?

number

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

className?

string

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

content?

string | Function

Sets the content content of the ActionSheet either as string that is pointing to a slot template of as render function.

contentClassName?

string

The CSS classes that will be rendered on the DOM element that wraps the content section of the ActionSheet element.

expand?

boolean

Specifies the state of the ActionSheet.

footer?

string | Function

Sets the footer content of the ActionSheet either as string that is pointing to a slot template of as render function.

footerClassName?

string

The CSS classes that will be rendered on the DOM element that wraps the footer section of the ActionSheet element.

header?

string | Function

Sets the header content of the ActionSheet either as string that is pointing to a slot template of as render function.

headerClassName?

string

The CSS classes that will be rendered on the DOM element that wraps the header section of the ActionSheet element.

headerStyle?

string

The custom Styles that will be applied on the DOM element that wraps the header section of the ActionSheet element.

item?

string | Function

Sets the item content of the ActionSheet either as string that is pointing to a slot template of as render function.

items?

ActionSheetItemProps[]

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

navigatable?

boolean

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

navigatableElements?

string[]

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

onClose?

(event: any) => void

Fires when the modal overlay is clicked.

onItemselect?

(event: { item?: any; syntheticEvent: any; title?: string; }) => void

Fires when an ActionSheet item is clicked.

subTitle?

string

Specifies the text that is rendered under the title.

tabIndex?

number

Specifies the tabIndex of the ActionSheet.

title?

string

Specifies the text that is rendered as title.

In this article

Not finding the help you need?

Contact Support