Floating Action Buttons

A sticky floating container for action buttons.

In Progress (Unreleased)
Twig Usage 
{% set _content %}
  {% include '@bolt-components-floating-action-buttons/floating-action-buttons-item.twig' with {
    content: _fabItem,
  } only %}
{% endset %}

{% include '@bolt-components-floating-action-buttons/floating-action-buttons.twig' with {
  content: _content,
} only %}
 Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the <bolt-floating-action-buttons> tag.

 object —
  • —
content

The main content. Typically, this will be a number of icon-only buttons.

 any —
  • —
position

The desired location of the floating element.

 string bottom-right
  • bottom-right, middle-right, top-right
visible_items

The number of items visisble when a "more" button is needed. It can be set to 0 to turn off the button.

 number 2
  • 1, 2, 3, NULL
show_on_load

Please leave this set to true unless you plan on adding javascript to show the element yourself.

 boolean true
  • —
show_on_scroll

This will leave the element hidden until the page is scrolled to a certain position. A percentage or px value must be passed here as a string. ie. "200px" or "20%".

 string —
  • —
Install Install 
npm install @bolt/components-floating-action-buttons
Dependencies @bolt/core-v3.x