Your search did not match any results.
Action Sheet

Popover Mode

Documentation

This demo illustrates the ActionSheet widget in the popover mode.

Copy to CodeSandBox
Apply
Reset
import React from 'react'; import ActionSheet from 'devextreme-react/action-sheet'; import List from 'devextreme-react/list'; import notify from 'devextreme/ui/notify'; import RenderContactItem from './ContactItem.js'; import { actionSheetItems, contacts } from './data.js'; class App extends React.Component { constructor() { super(); this.state = { isActionSheetVisible: false, actionSheetTarget: '' }; this.onActionSheetItemClick = this.onActionSheetItemClick.bind(this); this.onListItemClick = this.onListItemClick.bind(this); } render() { return ( <div> <List items={contacts} itemRender={RenderContactItem} onItemClick={this.onListItemClick} /> <ActionSheet title="Choose action" usePopover={true} visible={this.state.isActionSheetVisible} target={this.state.actionSheetTarget} items={actionSheetItems} onItemClick={this.onActionSheetItemClick} /> </div> ); } onListItemClick(e) { this.setState({ isActionSheetVisible: true, actionSheetTarget: e.itemElement }); } onActionSheetItemClick(e) { this.setState({ isActionSheetVisible: false }); notify(`The "${e.itemData.text}" button is clicked.`); } } export default App;
import React from 'react'; export default function RenderContactItem({ name, phone, email }) { return ( <div> <div>{name}</div> <div>{phone}</div> <div>{email}</div> </div> ); }
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render( <App />, document.getElementById('app') );
<!DOCTYPE html> <html> <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" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.1.6/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.1.6/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import('./index.js'); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>
#list, .demo-container { height: 100%; }
export const actionSheetItems = [ { text: 'Call' }, { text: 'Send message' }, { text: 'Edit' }, { text: 'Delete' } ]; 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' } ];
System.config({ transpiler: 'plugin-babel', meta: { }, paths: { 'npm:': 'https://unpkg.com/' }, defaultExtension: 'js', map: { 'react': 'npm:react@16/umd/react.development.js', 'react-dom': 'npm:react-dom@16/umd/react-dom.development.js', 'prop-types': 'npm:prop-types/prop-types.js', 'devextreme': 'npm:devextreme@20.1', 'devextreme-react': 'npm:devextreme-react@20.1', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.7/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram@1.0.9', 'devexpress-gantt': 'npm:devexpress-gantt@1.0.7', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, packages: { 'devextreme': { defaultExtension: 'js' }, 'devextreme-react': { main: 'index.js' }, 'devextreme/events/utils': { main: 'index' }, 'devextreme/events': { main: 'index' }, }, babelOptions: { sourceMaps: false, stage0: true, react: true } });