Vue Action Sheet - Popover Mode

ActionSheet can appear at the bottom of the page or over a certain element. Enable the usePopover property to display ActionSheet over a certain element on the page and use the target property to specify this element. In this demo, ActionSheet is integrated with the List component and appears when you click a list item.

Backend API

<template> <div class="app-container"> <DxList id="list" :items="contacts" @item-click="showActionSheet" > <template #item="{ data }"> <ContactItem :item-data="data"/> </template> </DxList> <DxActionSheet :items="actionSheetItems" v-model:visible="isActionSheetVisible" v-model:target="actionSheetTarget" :use-popover="true" title="Choose action" @itemClick="showClickNotification($event.itemData.text)" /> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; import DxActionSheet from 'devextreme-vue/action-sheet'; import DxList from 'devextreme-vue/list'; import type { DxListTypes } from 'devextreme-vue/list'; import notify from 'devextreme/ui/notify'; import type { DxElement } from 'devextreme/core/element'; import { actionSheetItems, contacts } from './data.ts'; import ContactItem from './ContactItem.vue'; const isActionSheetVisible = ref(false); const actionSheetTarget = ref<DxElement>(); function showActionSheet(e: DxListTypes.ItemClickEvent) { actionSheetTarget.value = e.itemElement; isActionSheetVisible.value = true; } function showClickNotification(buttonName: string) { notify(`The "${buttonName}" button is clicked.`); } </script>

<template> <div> <div>{{ itemData.name }}</div> <div>{{ itemData.phone }}</div> <div>{{ itemData.email }}</div> </div> </template> <script setup lang="ts"> import { type ContactInfo } from './data'; defineProps<{ itemData: ContactInfo }>(); </script>

export const actionSheetItems = [ { text: 'Call' }, { text: 'Send message' }, { text: 'Edit' }, { text: 'Delete' }, ]; export type ContactInfo = { name: string, phone: string, email: string, category: string }; export const contacts = [ { name: 'Barbara J. Coggins', phone: '512-964-2757', email: 'BarbaraJCoggins@rhyta.com', category: 'Family', }, { name: 'Leslie S. Alcantara', phone: '360-684-1334', email: 'LeslieSAlcantara@teleworm.us', category: 'Friends', }, { name: 'Chad S. Miles', phone: '520-573-7903', email: 'ChadSMiles@rhyta.com', category: 'Work', }, { name: 'Michael A. Blevins', phone: '530-480-1961', email: 'MichaelABlevins@armyspy.com', category: 'Work', }, { name: 'Jane K. Hernandez', phone: '404-781-0805', email: 'JaneKHernandez@teleworm.us', category: 'Friends', }, { name: 'Kim D. Thomas', phone: '603-583-9043', email: 'KimDThomas@teleworm.us', category: 'Work', }, { name: 'Donald L. Jordan', phone: '772-766-2842', email: 'DonaldLJordan@dayrep.com', category: 'Family', }, { name: 'Nicole A. Rios', phone: '213-812-8400', email: 'NicoleARios@armyspy.com', category: 'Friends', }, { name: 'Barbara M. Roberts', phone: '614-365-7945', email: 'BarbaraMRoberts@armyspy.com', category: 'Friends', }, ];

import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');

#list, .demo-container, .app-container { height: 100%; }

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="./bundle.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> <script src="bundles/vendor/vue.vendor.js"></script> <script src="./bundle.js"></script> </body> </html>