Free Trial Buy
    Your search did not match any results.
    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.

    See more Hide details
    Prev Demo Next Demo

    jQuery

    Angular

    Vue

    React

    AngularJS

    Backend API
    Copy to CodePen
    Apply
    Reset
    const DemoApp = angular.module('DemoApp', ['dx']); DemoApp.controller('DemoController', ($scope) => { let initData; $scope.actionSheetVisible = false; $scope.actionSheetOptions = { dataSource: actionSheetItems, title: 'Choose action', usePopover: true, onInitialized(e) { initData = e.component; }, onItemClick(value) { DevExpress.ui.notify(`The "${value.itemData.text}" button is clicked.`); }, bindingOptions: { visible: 'actionSheetVisible', }, }; $scope.listOptions = { dataSource: contacts, onItemClick(e) { initData.option('target', e.itemElement); $scope.actionSheetTarget = e.itemElement; $scope.actionSheetVisible = true; }, }; });
    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <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=1.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.2.6/css/dx.light.css" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> <script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C/script%3E'))</script> <script src="https://cdn3.devexpress.com/jslib/22.2.6/js/dx.all.js"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container" ng-app="DemoApp" ng-controller="DemoController"> <div dx-list="listOptions" dx-item-alias="contact"> <div data-options="dxTemplate: { name: 'item' } "> <div>{{contact.name}}</div> <div>{{contact.phone}}</div> <div>{{contact.email}}</div> </div> </div> <div dx-action-sheet="actionSheetOptions"></div> </div> </body> </html>
    #list, .demo-container { height: 100%; }
    const actionSheetItems = [ { text: 'Call' }, { text: 'Send message' }, { text: 'Edit' }, { text: 'Delete' }, ]; 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', }, ];