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.
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
Feedback