JavaScript/jQuery 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.
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") } }
- ]
- });
- });
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
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.