@3mo/fab-group
v0.0.9
Published
A web component for floating action buttons that unfold a stack of further actions and close on an outside click.
Downloads
1,110
Readme
Fab Group
A web component for floating action buttons that unfold a stack of further actions and close on an outside click.
A floating action button that unfolds a column of related ones when pressed, and folds them on a press outside.
Installation
npm install @3mo/fab-groupimport '@3mo/fab-group'Usage
<mo-fab-group style='position: absolute; inset-inline-end: 16px; bottom: 16px'>
<mo-fab icon='add'>Add</mo-fab>
<mo-fab icon='publish'>Import</mo-fab>
<mo-fab icon='share'>Share</mo-fab>
</mo-fab-group>Examples
- Custom Properties —
--mo-fab-group-transition-durationsets how long the buttons take to unfold.
API
mo-fab-group
Properties
| Name | Attribute | Type | Default | Description |
| --- | --- | --- | --- | --- |
| open | open | boolean | false | Whether the buttons are unfolded. |
Slots
| Name | Description |
| --- | --- |
| (default) | The mo-fabs it unfolds, from the bottom up, their icons after their labels. |
CSS custom properties
| Name | Description |
| --- | --- |
| --mo-fab-group-transition-duration | The duration of the unfolding, 250ms by default. |
Links
License
MIT © 3MO GmbH
