@limetech/mdc-p2-fab
Advanced tools
The Material Components for the web floating action button component
A floating action button represents the primary action in an application.
npm install @limetech/mdc-p2-fab
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.
<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, orsvgelement.
NOTE: IE 11 will not center the icon properly if there is a newline or space after the material icon text.
@import "@limetech/mdc-p2-fab/mdc-fab";
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 '@limetech/mdc-p2-ripple';
const fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));
See Importing the JS component for more information on how to import JavaScript.
<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.
| 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.
MDC FAB uses MDC Theme's secondary color by default. Use the following mixins to customize it.
| Mixin | Description |
|---|---|
mdc-fab-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. |
mdc-fab-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. |
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 |
|---|---|
mdc-fab-container-color($color) | Sets the container color to the given color |
mdc-fab-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. |
mdc-fab-ink-color($color) | Sets the ink color to the given color |
mdc-fab-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. |
mdc-fab-extended-label-padding($label-padding) | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon. |
mdc-fab-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. |
mdc-fab-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. |
The ripple effect for the FAB component is styled using MDC Ripple mixins.
In browsers that fully support CSS custom properties, the above mixins will work if you pass in a MDC Theme property (e.g. primary) as an argument. However, Edge does not fully support CSS custom properties. If you are using the mdc-fab-container-color mixin, you must pass in an actual color value for support in Edge.
Developers must position MDC FAB as needed within their application's design.
<!--
This will position the FAB in the bottom-right corner.
Modify to fit your design's requirements.
-->
<style>
.app-fab--absolute {
position: fixed;
bottom: 1rem;
right: 1rem;
}
@media(min-width: 64rem) {
.app-fab--absolute {
bottom: 1.5rem;
right: 1.5rem;
}
}
</style>
<button class="mdc-fab app-fab--absolute" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
4.0.0 (2019-11-02)
overflow: visible to button. (#4973) (905e84e)checkbox: mdc-checkbox-ink-color mixin now only applies to enabled checkboxes
chips: Chips markup, adapters, foundations, and events have changed.
select: In MDCMenu and MDCMenuSurface, hoistMenuToBody adapter method removed. In MDCSelect, HTML structure changed: the select anchor is now wrapped in a parent element, and the anchor's sibling is the select menu. Support for native select removed. Support added for select with no label. MDCSelectAdapter methods removed: getValue, setValue, isMenuOpen, setSelectedIndex, checkValidity, setValid, toggleClassAtIndex. MDCSelectAdapter methods added: hasLabel, getSelectedMenuItem, setSelectedText, isSelectedTextFocused, get/setSelectedTextAttr, getAnchorElement, setMenuAnchorElement, setMenuAnchorCorner, setMenuWrapFocus, set/removeAttributeAtIndex, focusMenuItemAtIndex, getMenuItemValues, getMenuItemCount, getMenuItemCount, getMenuItemAttr, getMenuItemTextAtIndex, add/removeClassAtIndex. MDCSelectFoundation setValue method removed; getDisabled, handleMenuItemAction, getSelectedIndex, get/setRequired, init added.
radio: In Checkbox, Renamed sass variables $mdc-radio-touch-area => $mdc-radio-ripple-size & $mdc-radio-ui-size => $mdc-radio-icon-size to be consistent with checkbox. Also, removed $mdc-radio-ui-pct sass variable.
switch: Renames switch variables $mdc-switch-tap-target-size => $mdc-switch-ripple-size, removes $mdc-switch-tap-target-initial-position and $mdc-switch-native-control-width.
list: New adapter method listItemAtIndexHasClass
list: Renamed mixin mdc-list-item-shape-radius() => mdc-list-single-line-shape-radius()
linear-progress: MDCLinearProgressAdapter adapter has new forceLayout method
text-field: Removed sass variable in notched outline - $mdc-notched-outline-transition-duration.
mdc-fab: This changes the structure of the FAB element by moving the ripple from the outer element to an inner mdc-fab__ripple element.
OLD
<button class="mdc-fab" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
NEW
<button class="mdc-fab" aria-label="Favorite">
<div class="mdc-fab__ripple"></div>
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
radio: Ripple has been moved to a child element. See readme for updates.
slider: remove adapter methods appendTrackMarkers, removeTrackMarkers , setLastTrackMarkersStyleProperty , and add adapter method setTrackMarkers.
button: This changes the structure of the button element by moving the ripple from the outer <button> element to an inner mdc-button__ripple element.
OLD
<button class="mdc-button">
<span class="mdc-button__label">Hello World</span>
</button>
NEW
<button class="mdc-button">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">Hello World</span>
</button>
chips: MDCChipSetAdapter#removeChip has been replaced with MDCChipSetAdapter#removeChipAtIndex. MDCChipSetAdapter#setSelected has been replaced with MDCChipSetAdapter#selectChipAtIndex
density: Renamed sass mixins & variables in MDC Data Table - mdc-data-table-header-row-height => mdc-data-table-header-cell-height & mdc-data-table-row-height => mdc-data-table-cell-height. Also removed mdc-button--dense variant, use button's density mixin instead.
FAQs
The Material Components for the web floating action button component
The npm package @limetech/mdc-p2-fab receives a total of 0 weekly downloads. As such, @limetech/mdc-p2-fab popularity was classified as not popular.
We found that @limetech/mdc-p2-fab demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers collaborating on the project.
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.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.