DevExtreme React - Overview
The ActionSheet widget 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 widget is shown on a button click.
jQuery
<div id="buttonContainer"></div> <div id="actionSheetContainer"></div>
// Shows a message with a button name var processClick = function (name) { DevExpress.ui.notify(name + " clicked", "success", 3000); }; $(function() { $("#buttonContainer").dxButton({ text: 'Show the ActionSheet', onClick: function () { // Shows the ActionSheet widget $("#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
<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 ], // ... })
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
- Configure a Widget: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- ActionSheet - Customize Item Appearance
- ActionSheet - Specify Display Mode
- ActionSheet API Reference
If you have technical questions, please create a support ticket in the DevExpress Support Center.