@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

Examples and Usage Information

https://sveltematerialui.com/demo/fab

Exports

(default)

A floating action button.

Options / Defaults

• component: href == null ? Button : A - A component to use as the root element.
• 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.
• touch: false - Increase the touch target.
• href: undefined - If the href property is set, the button will use an anchor element, instead of a button element.

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

7.0.0-beta.10 (2023-06-28)

Bug Fixes

• import ambient types from index files for ts event support (d62e12c)
• import specifically the module version of segmented button (0a26e4a)
• move from prop_def to ComponentProps (191126e)
• reference ambient types instead of importing them (2d1193c)
• remove reliance on svelte internals from forward events builder (dea2cc9)
• remove svg types from list (bbcd9e9)
• suppress typescript issues with importing svelte internals (985183c)

Features

• migration to Svelte 4 in components (51d2411)
• use new generics definitions for better typing of components with tag prop (4476f3a)