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.