floating action buttons docs

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

floating action buttons

Basic Floating Action Buttons This component is used to contain and place floating action buttons, or FABs. Important Notes: This is the demo you see floating in the bottom-right. It has the default visible_items value of 2. Demo
Twig
{% set _item_visible %}
  {% include '@bolt-elements-button/button.twig' with {
    content: 'This is a button',
  } only %}
{% endset %}

{% set _item_hidden %}
  {% include '@bolt-elements-button/button.twig' with {
    content: 'This is a button',
    hierarchy: 'secondary'
  } only %}
{% endset %}

{% set _content %}
  {% include '@bolt-components-floating-action-buttons/floating-action-buttons-item.twig' with {
    content: _item_visible,
  } only %}
  {% include '@bolt-components-floating-action-buttons/floating-action-buttons-item.twig' with {
    content: _item_hidden,
  } only %}
{% endset %}

{% include '@bolt-components-floating-action-buttons/floating-action-buttons.twig' with {
  content: _content,
} only %}
HTML
Not available in plain HTML. Please use Twig.

floating action buttons visible items

Floating Action Buttons Visible Items The visible_items property can be used to hide an overflow of elements passed into content. Important Notes: The default value of visible_items is 2 You may set visible_items to 0 to allow all elements to be shown. Demo
Twig
{% include '@bolt-components-floating-action-buttons/floating-action-buttons.twig' with {
  content: _content,
  visible_items: 0,
} only %}
HTML
Not available in plain HTML. Please use Twig.

floating action buttons position

Floating Action Buttons Position Use this to place the Floating Action Buttons in the bottom-right, middle-right, or top-right.
Twig
{% include '@bolt-components-floating-action-buttons/floating-action-buttons.twig' with {
  content: _content,
  position: 'top-right',
} only %}
HTML
Not available in plain HTML. Please use Twig.

floating action buttons advanced use

Floating Action Buttons Advanced Use There are 2 CSS custom properties available for use to further customize Satalitte. Important Notes: --c-bolt-floating-action-buttons-offset-x Set a pixel value to move the Satelite this many pixels left. --c-bolt-floating-action-buttons-offset-y if position is set to top-right, the Floating Action Buttons will move down. if position is set to bottom-right, the Floating Action Buttons will move up.
Twig
{% include '@bolt-components-floating-action-buttons/floating-action-buttons.twig' with {
  content: _content,
  attributes: {
    style: '--c-bolt-floating-action-buttons-offset-x: 100px;'
  }
} only %}
HTML
Not available in plain HTML. Please use Twig.