DevExtreme Vue - Overview
IMPORTANT: The Panorama widget is deprecated since v18.1. We recommend using the TabPanel or MultiView widget instead.
The Panorama widget is a full-screen widget that allows you to arrange items on a long horizontal canvas split into several views. Each view contains several items, and an end user navigates the views with the swipe gesture. The Panorama is often used as a navigation map on the first page of an application.
Most primitive Panorama needs an collection of items and a title. In addition, you can specify a backgroundImage. For example, the following code adds a simple Panorama to your page.
<div id="panoramaContainer"></div>
$(function() { $("#panoramaContainer").dxPanorama({ items: [{ title: "Main courses", text: "First and second courses of a meal" }, { title: "Seafood", text: "Seafood: ocean and sea" }, // . . . ], title: "Online Menu", backgroundImage: { url: '/here/goes/your/image.png', height: 600, width: 800 } }); });
#panoramaContainer { height: auto; position: absolute; top: 0; bottom: 0; width: 100%; }
Note that all data source items follow the Default Item Template pattern. This provides a default item appearance, which can be customized later.
See Also
- Widget Basics: jQuery | Angular | AngularJS | Knockout
- Panorama - Customize Item Appearance
- Panorama API Reference
If you have technical questions, please create a support ticket in the DevExpress Support Center.