How to show and hide overview panel dynamically in Vue Diagram?
The Vue Diagram component features an Overview Control, providing a scaled-down view of the entire content. This allows users to preview the entire Vue Diagram at a glance.
To implement functionality that shows or hides an overview panel upon clicking a button, follow these steps:
Add a button element to your HTML code. This button will serve as a toggle for the visibility of the overview panel.
Create an overview panel element in your HTML code. This could be a
Create a function that will be triggered when the button is clicked. Within this function, manipulate the display style of the overview panel element by setting its “display” property to “block” or “none” to show or hide the panel, respectively.
Please refer to the following code example to show or hide the overview panel.
<ejs-overview id="overview" style="top:30px"
:sourceID='overviewsourceID'
:width='overviewwidth'
:height='overviewheight'/>
<ejs-button :isPrimary="true" v-on:click="btnClick">Show/Hide</ejs-button>
function show() {
let showhide = document.getElementById('overview').style.display;
if (showhide === 'block' || showhide === '') {
document.getElementById('overview').style.display = 'none';
} else {
document.getElementById('overview').style.display = 'block';
}
}
You can find a working example of this implementation in the provided sample on StackBlitz.
Conclusion
I hope you enjoyed learning about how to show and hide overview panel dynamically in Vue Diagram.
You can refer to our Vue Diagram feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Vue Diagram example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
