Appearance

The Popup enables you to style its host element and the elements that hold its content.

To style the host element, decorate the component element. To style the element which holds the Popup content, use the popup-class property.

<style>
     .wrapper {
         color: #ffffff;
         background-color: #eeeeee;
       }

       .inner-wrapper {
           padding: 20px;
           background-color: #fcfcfc;
       }
   </style>
<div id="vueapp" class="vue-app">
   <div>
       <button
           class="k-button"
           @click="onClick"
           ref="button"
       >
           {{buttonText}}
       </button>
       <Popup
           :anchor="'button'"
           :show="show"
           class="wrapper"
           :popup-class="'inner-wrapper'"
       >
           Popup content.
       </Popup>
   </div>
</div>
import { Popup } from '@progress/kendo-vue-popup';
Vue.component('Popup', Popup);

new Vue({
    el: '#vueapp',
    data: function(){
        return {
            show: false
        };
    },
    computed: {
        buttonText: function(){
            return this.show ? 'Hide' : 'Show';
        }
    },
    mounted(){
        this.show= true;
    },
    methods: {
         onClick () {
            this.show = !this.show;
        }
    }
});

In this article