Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New Floating Action Button UI Component #7878

Open
groshenkovamarina opened this issue Apr 26, 2019 · 0 comments

Comments

Projects
None yet
1 participant
@groshenkovamarina
Copy link
Contributor

commented Apr 26, 2019

The Problem

The DevExtreme library does not include the Floating Action Button (FAB) — a button that performs the primary action of a screen. This button should be displayed in front of all screen content. In a special case, the FAB can open a stack of two to five related actions (speed dial).

The Proposed Solution

Drawing inspiration from Material Design guidelines by Google, we adopted the Speed dial concept and implemented the FAB as a configuration container that automatically collects and contains all SpeedDialAction components defined on a page.

The SpeedDialAction component has the following API:

let speedDialActionOptions = {
    icon: string
    onClick: function
};

Add a Floating Action Button that performs a custom action

$(".action-add").dxSpeedDialAction({
    icon: "add",
    onClick: function(e) {
        // ...
    }
});

Add a Floating Action Button that opens a stack of related actions

$(".action-edit").dxSpeedDialAction({
    icon: "edit",
    onClick: function(e) {
        // ...
    }
});

$(".action-repeat").dxSpeedDialAction({
    icon: "repeat",
    onClick: function(e) {
        // ...
    }
});

These SpeedDialActions will be collected in a speed dial menu. It can include up to five actions. The FAB in this case opens the menu. You can change the maximum number of actions, as well as the FAB's position and icons in the opened and closed states, via the floatingActionButtonConfig object:

DevExpress.config({
    floatingActionButtonConfig: {
        position: {
            at: "right bottom",
            my: "right bottom",
            offset: "-16 -16"
        },
        icon: "add",
        closeIcon: "close",
        maxSpeedDialActionCount: 5
    },
    // ...
});

Try It

Live Sandbox

jQuery
Angular

Installation

npm install devextreme@19.1.2-beta

We Need Your Feedback

Do you find the Floating Action Button component helpful?

Get Notified of Updates

Subscribe to this thread or to our Facebook and Twitter accounts for updates on this topic.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.