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