React ActionSheet - Overview
The ActionSheet UI component is a sheet containing a set of buttons located one under the other. These buttons usually represent several choices relating to a single task.
The following code adds a simple ActionSheet to your page. The UI component is shown on a button click.
jQuery
HTML
JavaScript
<div id="buttonContainer"></div> <div id="actionSheetContainer"></div>
// Shows a message with a button name const processClick = function (name) { DevExpress.ui.notify(name + " clicked", "success", 3000); }; $(function() { $("#buttonContainer").dxButton({ text: 'Show the ActionSheet', onClick: function () { // Shows the ActionSheet UI component $("#actionSheetContainer").dxActionSheet("instance").show(); } }); $("#actionSheetContainer").dxActionSheet({ dataSource: [ { text: "Reply", onClick: function () { processClick("Reply") } }, { text: "Reply All", onClick: function () { processClick("Reply All") } }, { text: "Forward", onClick: function () { processClick("Forward") } }, { text: "Delete", onClick: function () { processClick("Delete") } } ] }); });
Angular
HTML
TypeScript
<dx-button text="Show the ActionSheet" (onClick)="actionSheet.visible = true"> </dx-button> <dx-action-sheet #actionSheet [dataSource]="actionSheetData" [visible]="false"> </dx-action-sheet>
import { DxActionSheetModule, DxButtonModule } from "devextreme-angular"; import notify from "devextreme/ui/notify"; // ... export class AppComponent { actionSheetData = [ { text: "Reply", onClick: () => { this.processClick("Reply") } }, { text: "Reply All", onClick: () => { this.processClick("Reply All") } }, { text: "Forward", onClick: () => { this.processClick("Forward") } }, { text: "Delete", onClick: () => { this.processClick("Delete") } } ]; processClick (name) { notify(name + " clicked", "success", 3000); } } @NgModule({ imports: [ // ... DxActionSheetModule, DxButtonModule ], // ... })
Vue
App.vue
<template> <div> <DxActionSheet v-model:visible="isActionSheetVisible" :data-source="actionSheetData" /> <DxButton text="Show the ActionSheet" @click="showActionSheet" /> </div> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxActionSheet from 'devextreme-vue/action-sheet'; import DxButton from 'devextreme-vue/button'; import notify from "devextreme/ui/notify"; export default { components: { DxActionSheet, DxButton }, data() { return { isActionSheetVisible: false, actionSheetData: [ { text: "Reply", onClick: () => { this.processClick("Reply") } }, { text: "Reply All", onClick: () => { this.processClick("Reply All") } }, { text: "Forward", onClick: () => { this.processClick("Forward") } }, { text: "Delete", onClick: () => { this.processClick("Delete") } } ] }; }, methods: { showActionSheet(e) { this.isActionSheetVisible = true; }, processClick(name) { notify(name + " clicked", "success", 3000); } } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { ActionSheet } from 'devextreme-react/action-sheet'; import { Button } from 'devextreme-react/button'; import notify from "devextreme/ui/notify"; class App extends React.Component { constructor(props) { super(props); this.state = { isActionSheetVisible: false }; this.showActionSheet = this.showActionSheet.bind(this); this.processClick = this.processClick.bind(this); this.actionSheetData = [ { text: "Reply", onClick: () => { this.processClick("Reply") } }, { text: "Reply All", onClick: () => { this.processClick("Reply All") } }, { text: "Forward", onClick: () => { this.processClick("Forward") } }, { text: "Delete", onClick: () => { this.processClick("Delete") } } ]; } processClick(name) { notify(name + " clicked", "success", 3000); this.setState({ isActionSheetVisible: false }); } showActionSheet() { this.setState({ isActionSheetVisible: true }); } render() { return ( <div> <ActionSheet visible={this.state.isActionSheetVisible} dataSource={this.actionSheetData} /> <Button text="Show the ActionSheet" onClick={this.showActionSheet} /> </div> ); } } export default App;
Note that every data source object has a text field that is rendered on the buttons of the ActionSheet. Also, there is the onClick field that represents a click handler for a certain ActionSheet button.
See Also
jQuery
Angular
Vue
React
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.