Title

The Dialog provides options for displaying a title and customizing its behavior.

To set a title to the Dialog, use its title property.

<div id="vueapp" class="vue-app">
            <div>
              <k-dialog :title="'Awesome title goes here'" >
              </k-dialog>
          </div>
</div>
import { Dialog } from '@progress/kendo-vue-dialogs';
Vue.component('k-dialog', Dialog);

new Vue({
    el: '#vueapp'
});

To customize the title, add components, functions, or HTML elements you can use the title-render prop.

<div id="vueapp" class="vue-app">
    <div>
      <k-dialog :title-render="customTitleBar" >
        <p :style='{ margin: "30px", textAlign: "center" }'>A sample print dialog.</p>
      </k-dialog>
  </div>
</div>
import Vue from 'vue';
import { Dialog } from '@progress/kendo-vue-dialogs';
Vue.component('k-dialog', Dialog);

const customTitleBar = {
    template: `<div class="custom-title" :style="{ fontSize: '18px', lineHeight: '1.3em' }">
     <span class="k-icon k-i-print" />Print this page
 </div>`
};

new Vue({
    el: '#vueapp',
    data: function () {
        return {
            customTitleBar: customTitleBar
        };
    }
});

If title is not specified, the Dialog will not display a title.

<div id="vueapp" class="vue-app">
    <div>
      <k-dialog >
        <div :style='{ textAlign: "center", margin: "30px" }'>
            <h4>Enter your e-mail below to unlock.</h4>
            <p>
                <input class="k-textbox" placeholder="Your e-mail here" 
                :style='{ width: "300px" }' />
            </p>
            <p>
                <button class="k-button k-primary" 
                :style='{ width: "300px" }'>GET MY $10 OFF</button>
            </p>
            <a href="#">No thanks!</a>
        </div>
      </k-dialog>
  </div>
</div>
import Vue from 'vue';
import { Dialog } from '@progress/kendo-vue-dialogs';
Vue.component('k-dialog', Dialog);

new Vue({
    el: '#vueapp'
});

In this article