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.

HTML
JavaScript
CSS
  • <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