• Introduction
  • Getting Started
  • Vue 2 End of Support
  • Native Components
    • Animation
    • Buttons
    • Chartsupdated
    • Conversational UInew
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gauges
    • Grid
    • Icons
    • Indicators
    • Inputs
    • Labels
    • Layoutupdated
    • 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 / Dialogs / API / DialogProps / 
New to Kendo UI for Vue? Start a free 30-day trial

DialogProps

Represents the props of the KendoVue Dialog component.

NameTypeDefaultDescription

appendTo?

String

Defines the string selector to the element to which the Dialog will be appended. Defaults to its parent element.

className?

string

Sets a class of the Dialog DOM element.

closeIcon?

boolean

Specifies whether a close button should be rendered at the top corner of the dialog.

contentStyle?

any

The styles that are applied to the content of the Dialog.

dialogClass?

string

dir?

string

Represents the dir HTML attribute.

height?

string | number

Specifies the height of the Dialog (see example).

id?

string

Sets the aria-labelledby value.

minWidth?

string | number

Specifies the minimum width of the Dialog.

onClose?

(event: DialogCloseEvent) => void

Fires when the Close button in the title is clicked or when the Esc button is pressed.

onOverlayclick?

(event: any) => void

Fires when modal overlay of the Window is clicked.

style?

any

The styles that are applied to the Dialog.

themeColor?

string

Specifies the theme color of the Dialog. The available options are primary, dark, and light.

title?

any

Sets the title of the Dialog (see example). If title is not specified, the Dialog does not render a Close button.

titleRender?

any

Defines the custom rendering of the title. Accepts a Vue component, a render function, or a slot name.

width?

string | number

Specifies the width of the Dialog (see example).

wrapperId?

string

Sets the id of the wrapper element.

In this article

Not finding the help you need?

Contact Support