Satellite

A sticky floating container for action buttons.

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

{% include '@bolt-components-satellite/satellite.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-satellite> 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. The static option is used solely for testing purposes.

string bottom-right
  • bottom-right, middle-right, top-right, static
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-satellite
Dependencies @bolt/core-v3.x