Within this viewport position I chose to use inset-block and inset-inline so the position will compliment the user's document mode, like right-to-left or left-to-right. This is a great use case for position fixed. In order for FABs to be convenient they stick within the viewport at all times. fabs class for CSS to hook into for style, then add role="group" and aria-label so it's not just a generic container, it's named and purposeful. Mini size: Only used to create visual continuity with other screen elements. They are distinguished by a circled icon floating above the UI and have motion behaviors that include morphing, launching, and a transferring anchor point. All actions should be: - Understandable without extra efforts (no Google, long tap, double-tap, shake, opening the link) - Easy to replace with an icon (if you can’t express action with an icon then it’s not an action, it’s a manual, document, caution, bubble, snack bar, whatever). This element can be a regular but let's do our unsighted users a favor and tag it with some helpful attributes to explain the purpose and contents of this container. Floating action buttons are used for a promoted action. Nobody needs long text in action buttons.
The buttons can be mini or default, giving some nice variety between primary and secondary actions. The container positions the FABs within the viewport and manages a gap between the buttons. The HTML for these controls involves a container element and a set of one or more buttons. This user experience style was made famous by Material UI and their suggestions for usage and placement can be found here. They keep primary actions in view, making them convenient and omnipresent. FABs are more common on mobile than desktop, but they're prevalent in both scenarios.
0 kommentar(er)
