Titlebar
The Kendo UI for Vue Window titlebar displays the title and the default action buttons. Set a text title, replace it with a custom component that includes icons or other markup, or customize the titlebar buttons.
Setting a Plain Text Title
To display a text string in the titlebar, set the title property. Use this approach for document viewers, record editors, and panels where a static heading is sufficient.
<Window :title="'Q4 Planning Notes'" />The following example demonstrates a Window with a plain text title.
Managing Titlebar Actions
The Kendo UI for Vue Window titlebar displays the built-in Minimize, Maximize, Restore, and Close buttons. The buttons that appear depend on the stage of the Window:
- The Minimize and Maximize buttons appear in the
DEFAULTstage. - The Restore button appears in the
MINIMIZEDandFULLSCREENstages. - The Close button appears in every stage.
To hide a built-in button, set its minimizeButton, maximizeButton, restoreButton, or closeButton property to a function that returns null.
<Window :minimize-button="() => null" />The following example hides the Minimize, Maximize, and Close buttons. The Window closes through its Cancel and Submit buttons.
Adding Icons and Custom Actions
The title property accepts a plain string. To add an icon, a status badge, or other custom markup next to the title text, use the titleRender property. Set it to the name of a named slot or to a render function. The Window keeps the default action buttons in the titlebar.
<Window :title-render="'myTemplate'">
<template #myTemplate>
<Title />
</template>
</Window>The following example demonstrates a Window with a custom title component.
To replace a built-in button with your own content, set its property to the name of a named slot. The slot receives props.onClick, so the custom button can trigger the built-in behavior.
<Window :close-button="'closeButton'">
<template #closeButton="{ props }">
<KButton :fill-mode="'flat'" @click="props.onClick">Done</KButton>
</template>
</Window>The following example replaces the Close button with a flat Done button and hides the Minimize button.
To add buttons with your own commands at the bottom of the Window, see Action Buttons.
Hiding the Title Text
When the title property is not set, the Window displays a titlebar with the default action buttons but no title text. Use this layout when the window content serves as its own heading, such as a media preview or a form that starts with a visible heading.