Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

@material/fab

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@material/fab

The Material Components for the web floating action button component

10.0.0
Source
npm

Version published: 4 years ago

Weekly downloads: 716K; decreased by-4.66%

Maintainers: 21

Weekly downloads

Created: 8 years ago

What is @material/fab?

@material/fab is a Material Design implementation of the Floating Action Button (FAB) component. It provides a way to create floating action buttons that adhere to Material Design guidelines, offering a consistent and visually appealing user experience.

What are @material/fab's main functionalities?

Basic Floating Action Button

This code creates a basic floating action button with a 'favorite' icon. The button uses the 'mdc-fab' class to apply the Material Design styles.

<button class="mdc-fab" aria-label="Favorite">
  <span class="mdc-fab__icon material-icons">favorite</span>
</button>

Mini Floating Action Button

This code creates a mini floating action button with an 'edit' icon. The 'mdc-fab--mini' class makes the button smaller than the standard FAB.

<button class="mdc-fab mdc-fab--mini" aria-label="Edit">
  <span class="mdc-fab__icon material-icons">edit</span>
</button>

Extended Floating Action Button

This code creates an extended floating action button with an 'add' icon and a label. The 'mdc-fab--extended' class makes the button wider to accommodate the label.

<button class="mdc-fab mdc-fab--extended">
  <span class="mdc-fab__icon material-icons">add</span>
  <span class="mdc-fab__label">Add</span>
</button>

Other packages similar to @material/fab

Floating action buttons

A floating action button (FAB) represents the primary action of a screen.

There are three types of FABS:

Regular FAB example

Using FABs

A FAB performs the primary, or most common, action on a screen. It appears in front of all screen content, typically as a circular shape with an icon in its center.

Installation

npm install @material/fab

Styles

@use "@material/fab";

@include fab.core-styles;

Loading icons

We recommend using Material Icons from Google Fonts:

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>

However, you can also use SVG, Font Awesome, or any other icon library you wish.

JavaScript instantiation

The FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating MDCRipple on the root element. See MDC Ripple for details.

import {MDCRipple} from '@material/ripple';

const fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));

See Importing the JS component for more information on how to import JavaScript.

Making FABs accessible

Material Design spec advises that touch targets should be at least 48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FABs:

<div class="mdc-touch-target-wrapper">
  <button class="mdc-fab mdc-fab--mini mdc-fab--touch">
    <div class="mdc-fab__ripple"></div>
    <span class="material-icons mdc-fab__icon">add</span>
    <div class="mdc-fab__touch"></div>
  </button>
</div>

Note: The outer mdc-touch-target-wrapper element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).

Regular FABs

Regular FABs are FABs that are not expanded and are a regular size.

Regular FAB example

<button class="mdc-fab" aria-label="Favorite">
  <div class="mdc-fab__ripple"></div>
  <span class="mdc-fab__icon material-icons">favorite</span>
</button>

Note: The floating action button icon can be used with a span, i, img, or svg element.

Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.

Mini FABs

A mini FAB should be used on smaller screens.

Mini FABs can also be used to create visual continuity with other screen elements.

Mini FAB example

<button class="mdc-fab mdc-fab--mini" aria-label="Favorite">
  <div class="mdc-fab__ripple"></div>
  <span class="mdc-fab__icon material-icons">favorite</span>
</button>

Extended FABs

The extended FAB is wider, and it includes a text label.

Extended FAB example

<button class="mdc-fab mdc-fab--extended">
  <div class="mdc-fab__ripple"></div>
  <span class="material-icons mdc-fab__icon">add</span>
  <span class="mdc-fab__label">Create</span>
</button>

Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.

API

CSS classes

CSS Class	Description
`mdc-fab`	Mandatory, for the button element
`mdc-fab__icon`	Mandatory, for the icon element
`mdc-fab__ripple`	Mandatory, for the element which shows the ripple.
`mdc-fab__label`	Optional, for the text label. Applicable only for Extended FAB.
`mdc-fab--mini`	Optional, modifies the FAB to a smaller size
`mdc-fab--extended`	Optional, modifies the FAB to wider size which includes a text label.
`mdc-fab--exited`	Optional, animates the FAB out of view. When this class is removed, the FAB will return to view.

A note about :disabled: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does not perform an action, you should also present an explanation to the user.

Sass mixins

Basic Sass mixins

MDC FAB uses MDC Theme's secondary color by default. Use the following mixins to customize it.

Mixin	Description
`accessible($container-color)`	Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.
`extended-fluid`	Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.

Advanced Sass mixins

A note about advanced mixins: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.

Mixin	Description
`container-color($color)`	Sets the container color to the given color
`icon-size($width, $height)`	Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.
`ink-color($color)`	Sets the ink color to the given color
`extended-padding($icon-padding, $label-padding)`	Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.
`extended-label-padding($label-padding)`	Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.
`shape-radius($radius, $rtl-reflexive)`	Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.
`extended-shape-radius($radius, $rtl-reflexive)`	Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.

10.0.0 (2021-02-05)

Bug Fixes

data-table: fix style ordering wrt select & use new variable-width mixin (afb6889), closes #6599
dialog: add property to customize suppressDefaultPressSelector (772cc10)
linear-progress: fix RTL rendering (c7c5da2)
list: add support for density scaling. (419e035)
list: add support for non-interactive list roles. (fc8b045)
list: ensure divider appears in IE high contrast mode. (eff7b46)
menu: Remove anchorSize height from calculations when anchored to bottom (1631198)
notched-outline: fix notched outline no-label style (99cfb6b)
select: debounce click on anchor (b39094d)
select: set aria-expanded false earlier when menu closes (df00c2b)
slider: Add aria-hidden to value indicator container, to avoid duplicate value announcements for screenreader users. (9687353)
slider: Adjust hidden input dimensions to take slider dimensions, such that screenreader focus indicators show a highlight around the entire slider. (fd22355)
slider: Fire custom change event on input change. (07deaec)
slider: Fix bug where value indicator container took space and could be hovered over / clicked when hidden. (832668d)
slider: Mark ripple event handler as passive. Fixes #6746 (abdd100)
slider: Remove big step options. Now that we're using a native range input, big step is not customizable - we follow browser defaults for big step. (ae27b44)
slider: Update both thumbs' value indicator UI's if layout is invoked with undefined thumb. (489d4c2)
slider: Use pointer-events: none instead of visibility: hidden to hide the value indicator container. Adding visibility: hidden removes the exit animation since the value indicator is immediately hidden. (a94bd8d)
slider: Use mouse/touch events on iOS, to work around pointer events bug. (671d72d), closes #6715
tabs: Expose min width mixin and set to 90px per spec. (c4ab987)
theme: ensure either() works with false values (8e66dbf)
tooltip: Adds "will-change" into CSS to prevent the tooltip from "jittering" when animating in. (7a003ac)
tooltip: Change foundation to check for "dialog" on the anchor element's aria-haspopup attribute instead of checking for "true". (b8a1a58)
tooltip: Clear hideTimeout in handleAnchorMouseEnter so that the tooltip will not be hidden if the user rapidly moves the mouse in and out of the anchor element. (365c693)
tooltip: Fix rich tooltip tests to not use aria-describedby to associate rich tooltips with their anchor elements. This is because interactive rich tooltips should not be used with aria-describedby per a11y guidance. (251ac04)
adjust meta baseline and update color mixins. (07f3e01)

Code Refactoring

Remove MDC theme's deep-get, used sass:map's get API instead. (37fbae1)

Features

banner: Add mobile-stacked variant support to banner. (a0b2db2)
button: Add in HCM support to the mdc button as an opt-in mixin. (121e1f3)
button: consolidate states into button mixins (637d15d)
button: thread state keys through theme config (05f2496)
checkbox: Add CSS custom properties to MDC checkbox for density theming (9244508)
checkbox: Add validation to MDC Checkbox theme mixin (2d5f32d)
circular-progress: do not require HTML without whitespaces (8648b82)
dialog: add custom property for z-index (776c186)
dialog: Adding styling for scroll bar dividers, and adding logic to show said dividers only when content is scrolled "behind" the header or footer of the dialog. (e383944)
dialog: Adds and defines styling for the "header bar" on a full-screen dialog. (089de51)
iconbutton: Add in HCM support to the mdc iconbutton as an opt-in mixin. (fd61b04)
linear-progress: remove aria-valuemin/max attrs for indeterminate (4321323)
list: support ctrl + a keyboard shortcut (eefef49), closes #6366
list: Update the MDC component for List Evolution. (766981c)
menu,select: enable fixed menu position in mwc-select (b9adb7a), closes #2062
select: add mixin for variable width (30c11bf)
slider: Add hidden input to slider, to support forms submission. This is also prep for moving to use an <input type="range"> behind the scenes, in order to support touch-based AT's. (b98d15d)
slider: Modify continuous slider to use step value by default, and give clients the option to customize step value for continuous sliders. (7ad038e)
slider: Use input with type="range" to back slider component. This ensures that sliders can be adjusted with touch-based assistive technologies, as the current ARIA spec for sliders is not compatible with e.g. TalkBack/Android. (9083b7d)
snackbar: Add 1px transparent border for high contrast support (15a4d40)
theme: add either() utility function (5268222)
theme: add validation option to disallow custom properties (fec7b42)
theme: Added validation mixin to validate provided theme configuration keys (1c156d6)
theme: allow lists in replace maps (d2959b1)
theme: emit CSS var() declarations when provided a standalone custom prop (1a3a396)
tooltip: Add positioning adjustment and position specification for rich tooltips. Rich tooltips default to the END position and does not support CENTER positioning. (384a8ee)
tooltip: Added persistent variant for rich tooltips that shows/hides based on mouse clicks on the anchor element. Clicks on elements other than the anchor will also hide the persistent variant. (9775856)
tooltip: Adds transform-origin on tooltip surface so tooltip entrance animation has a direction based on its alignment with the anchor element. (623af86)
tooltip: Adjust tooltip position on scroll and resize events. This ensures that the tooltip remains pinned to the anchor element despite page movement. (a415276)
tooltip: Adjusting tooltip positioning logic so that the tooltip remains within the viewport even if the anchor element is partially off-screen. (482ff90)
tooltip: Change rich tooltip to use position absolute instead of fixed and rely on a position relative parent element so that if the parent has a transform, perspective, or filter property set to something other than none, the positioning would still work. (0c95c9f)
tooltip: Define styling to set the full-screen dialog size depending on the viewport size. (fe13dd1)
tooltip: Expose hide and isShown methods in the MDCTooltip component. This allows MDC clients to create their own class to enforce only one tooltip being shown at a time. (c5e18b0)
tooltip: Hide rich tooltip if mouse leaves rich tooltip. Rich tooltip persists if mouse leaves rich tooltip and enters anchor. (6d8574f)
tooltip: Reducing minimum threshold distance between tooltip and viewport from 32px to 8px. (23491cf)
tooltip: Restore focus to the anchor element when the ESC button is pressed while the focus is in the tooltip for rich tooltips. Default rich tooltips should have focus restored to anchor and not have rich tooltips show. (eabf9d5)
tooltip: Set up base sass for rich tooltip. Rich tooltips are currently in development and is not yet ready for use. (4ae94ff)
tooltip: Set up rich tooltip to persist if mouse leaves anchor and enters rich tooltip. (c927a5d)
tooltip: The aria-expanded attribute of the anchor element will only be changed for anchor elements with interactive rich tooltips. Non-interactive rich tooltip anchor elements do not have the aria-haspopup and aria-expanded attributes. (c5dda80)
tooltip: When the anchor element blurs, the rich tooltip will only be hidden if the focus is changed to a non-rich tooltip element. (6871336)
Added global variable to conditionally emit CSS selector fallback declarations (7b0e2b3)
tooltip: When the rich tooltip element focuses out, hide the rich tooltip if the new focused element is not the anchor element or an element within the rich tooltip. (1085c3b)

BREAKING CHANGES

theme: custom-properties.apply() has been renamed to declaration() to better align with css.declaration()
tooltip: Added adapter methods:
- getComputedStyleProperty(propertyName: string): string;
- getParentBoundingRect(): ClientRect|null;
tooltip: Added adapter method:
- tooltipContainsElement(element: HTMLElement): boolean;
Removed deep-get() API from mdc-theme, use sass:map's get() API instead.
tooltip: Added adapter method:
- anchorContainsElement(element: HTMLElement): boolean;
slider: Slider is now backed by an input of type="range". Additionally, adapter methods (focusInput, isInputFocused, registerInputEventHandler, deregisterInputEventHandler) were added.
tooltip: Added adapter methods:
- setAnchorAttribute(attr: string, value: string): void;
- registerEventHandler<K extends EventType>( evtType: K, handler: SpecificEventListener<K>): void;
- deregisterEventHandler<K extends EventType>( evtType: K, handler: SpecificEventListener<K>): void;
slider: Adds slider adapter methods (get/setInputValue, get/setInputAttribute, removeInputAttribute). Slider DOM structure now contains a hidden input.

Keywords

FAQs

What is @material/fab?

Is @material/fab popular?

Is @material/fab well maintained?

Package last updated on 05 Feb 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@material/fab

What is @material/fab?

What are @material/fab's main functionalities?

Other packages similar to @material/fab

react-fab

vue-fab

angular-material

Floating action buttons

Using FABs

Installation

Styles

Loading icons

JavaScript instantiation

Making FABs accessible

Regular FABs

Regular FAB example

Mini FABs

Mini FAB example

Extended FABs

Extended FAB example

API

CSS classes

Sass mixins

Basic Sass mixins

Advanced Sass mixins

10.0.0 (2021-02-05)

Bug Fixes

Code Refactoring

Features

BREAKING CHANGES

Keywords

Related posts

Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts

Supply Chain Attack on Rspack npm Packages Injects Cryptojacking Malware

Skuld Infostealer Returns to npm with Fake Windows Utilities and Malicious Solara Development Packages