@smui/fab

Svelte Material UI - Floating Action Button

Floating action buttons represent the primary action in a screen or app.

Installation

npm install --save-dev @smui/fab

Whoa There, These Docs are Outdated

The latest SMUI v3 beta had a lot of changes, and these docs haven't been caught up yet. You should check out the demo page's code to see the latest usage.

Basic Usage

<Fab on:click={doSomething}><Icon class="material-icons">favorite</Icon></Fab>

<script>
  import Fab, { Icon } from '@smui/fab';

  function doSomething() {
    alert('something');
  }
</script>

Demo

in action: https://sveltematerialui.com/demo/fab

demo code: https://github.com/hperrin/svelte-material-ui/blob/master/site/src/routes/demo/fab/

Exports

(default)

A floating action button.

Options / Defaults

• use: [] - An array of Svelte actions and/or arrays of an action and its options.
• class: '' - A CSS class string.
• ripple: true - Whether to implement a ripple for when the component is interacted with.
• color: 'secondary' - The FAB's color. ('primary' or 'secondary')
• mini: false - Whether to make the FAB smaller.
• exited: false - Whether the FAB is not visible. Changing this will cause the FAB to animate in/out.
• extended: false - Whether the FAB contains a label.

Events

All standard UI events are forwarded.

Label

A text label.

See the common label readme.

Icon

A graphic icon.

See the common icon readme.

More Information

See Buttons: floating action button in the Material design spec.

See FAB in MDC-Web for information about the upstream library's architecture.

Changelog

3.0.0-beta.3 (2021-04-12)

Bug Fixes

• add ripple style on buttons when style prop is defined (aa65603)
• allow styles on components with ripples (1c6b28a)
• don't focus tab when activated programmatically by default (59c66b1)
• floating label noLabel default to false (cf06c28)
• outlined textfield labels (07e7544)
• reference error on button GroupItem (41402f8)