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.

View Demo

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