ButtonBar

This is a button bar control that can be used to display a set of buttons.

Import

import { ButtonBar } from "@schukai/monster/source/components/form/button-bar.mjs";

Source

View source code

Package

@schukai/monster

Since

1.0.0

Click Me!

Introduction

The ButtonBar is a flexible and customizable web component from the Monster library, designed to streamline the interface of web applications by organizing multiple action buttons into a clean, accessible toolbar. This component adapts to various screen sizes and layouts, ensuring that all functionality remains accessible and user-friendly.

Key Features

Adaptive Layout: Automatically adjusts the visibility and arrangement of buttons based on the available screen space.
Customizable Design: Provides extensive options for customizing the appearance and behavior of the button bar and its buttons through simple configuration.
Popper Integration: Integrates with Floating UI to display additional options or tools in a dropdown fashion, enhancing the compactness of designs.
Accessibility Features: Fully accessible, ensuring usability for all users, including those with disabilities.
Dynamic Interaction: Reacts to user interactions and browser events dynamically, providing a seamless experience across different devices and orientations.

Improving the user experience

The ButtonBar enhances the user interface by organizing actions neatly, making it easier for users to find and utilize functionalities quickly. Its adaptive features ensure that even on devices with limited space, the most important actions are always readily accessible, thereby improving efficiency and user satisfaction.

Supported by studies in user interface design, the ButtonBar has shown to significantly improve the usability and aesthetic appeal of web applications.

Efficiency in the development process

Integrating the ButtonBar into your development process is straightforward. Its compatibility with modern web standards allows for easy inclusion in any project, simplifying the development workflow and reducing time spent on custom UI solutions. By using the ButtonBar, developers can ensure a consistent and professional look across all parts of the application while maintaining high usability standards.

Button Bar

Javascript

/** this example does not use an extra script **/

HTML

/** this example does not use an extra html file **/

Stylesheet

/** no additional stylesheet is defined **/

Component Design

This component is built using the Shadow DOM, which encapsulates its internal structure and styling. By utilizing a shadow root, the component ensures its internal elements remain isolated from the surrounding webpage, preventing external styles or scripts from unintentionally altering its layout or behavior.

Shadow DOM and Accessibility

The Shadow DOM encapsulation restricts direct access to the internal structure of the component. This ensures that developers cannot manipulate or style these internal elements directly. The Shadow DOM also helps maintain a clean and consistent design for the component, avoiding external interference and promoting a more modular architecture.

Customizing Through Exported Parts

Although the Shadow DOM restricts direct styling, the component exposes specific exported parts that developers can target using CSS. This allows for controlled customization while preserving the component's encapsulation.

Available Part Attributes

control: Represents the main container of the button bar, including its structure.
button-bar: Represents the area where visible buttons are displayed.
popper: Represents the dropdown container where overflow buttons are moved.
popper-nav: Represents the navigation area for interacting with the dropdown.
popper-switch: Represents the button that triggers the display of the dropdown for overflow buttons.

Below is an example of how to use CSS part attributes to customize different parts of the ButtonBar component.


monster-button-bar::part(control) {
    background-color: #f8f9fa;
    padding: 10px;
}

monster-button-bar::part(button-bar) {
    display: flex;
    gap: 8px;
}

monster-button-bar::part(popper) {
    background-color: #ffffff;
    border: 1px solid #ddd;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

monster-button-bar::part(popper-switch) {
    background-color: #007bff;
    color: #ffffff;
    border-radius: 4px;
    padding: 5px;
}

Explanation of the Example

monster-button-bar::part(control): Styles the main container with a light background and padding.
monster-button-bar::part(button-bar): Ensures buttons within the button bar are displayed inline with gaps.
monster-button-bar::part(popper): Adds a white background, border, and shadow to the dropdown container.
monster-button-bar::part(popper-switch): Styles the trigger button for overflow buttons with a blue background and rounded corners.

Accessibility

Accessibility is a fundamental part of this component's design. It supports keyboard navigation, screen readers, and other assistive technologies to ensure an inclusive user experience. Overflow buttons are automatically managed and remain accessible through the dropdown control when space is limited.

HTML Structure

<monster-button-bar></monster-button-bar>

JavaScript Initialization

const element = document.createElement('monster-button-bar');
document.body.appendChild(element);

Exported

ButtonBar

Derived from

CustomElement

Options

The Options listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class. Therefore, it inherits Options from these parent classes. If you cannot find a specific Options in this list, we recommend consulting the documentation of the CustomElement.

Option

Type

Default

Description

templates

object

undefined

Template definitions

templates.main

string

undefined

Main template

object

labels

popper

object

undefined

FloatingUI popper configuration

popper.placement

string

top

popper.middleware

array<string>

undefined

Middleware for the popper

since
deprecated

Properties and Attributes

The Properties and Attributes listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits Properties and Attributes from these parent classes. If you cannot find a specific Properties and Attributes in this list, we recommend consulting the documentation of the CustomElement.

data-monster-options: Sets the configuration options for the collapse component when used as an HTML attribute.
data-monster-option-[name]: Sets the value of the configuration option [name] for the collapse component when used as an HTML attribute.

Methods

The methods listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits methods from these parent classes. If you cannot find a specific method in this list, we recommend consulting the documentation of the CustomElement.

Behavioral methods

hideDialog()

Returns

{ButtonBar}

Close the slotted dialog.

showDialog()

Returns

{ButtonBar}

Open the slotted dialog.

toggleDialog()

Returns

{ButtonBar}

Toggle the slotted dialog.

Static methods

[instanceSymbol]()

Returns

{symbol}

This method is called by the instanceof operator.

getCSSStyleSheet()

Returns

{CSSStyleSheet[]}

This method is called internal and should not be called directly.

getTag()

Returns

{string}

This method is called internal and should not be called directly.

observedAttributes()

Returns

{string[]}

This method determines which attributes are to be monitored by attributeChangedCallback().

Lifecycle methods

Lifecycle methods are called by the environment and are usually not intended to be called directly.

[assembleMethodSymbol]()

This method is called internal and should not be called directly.

connectedCallback()

Returns

{void}

This method is called by the dom and should not be called directly.

disconnectedCallback()

Returns

{void}

This method is called by the dom and should not be called directly.

Events

The component emits the following events:

monster-fetched

For more information on how to handle events, see the mdn documentation.

The current width of the area is too small to display the content correctly.