ActionButton
The ActionButton is a button that opens a popper element with possible actions
import { ActionButton } from "@schukai/monster/source/components/form/action-button.mjs";'%3E%3Cpath style='stroke:none;fill-rule:nonzero;fill:%23f03c2e;fill-opacity:1' d='M90.156 41.965 50.036 1.848a5.918 5.918 0 0 0-8.372 0l-8.328 8.332 10.566 10.566a7.03 7.03 0 0 1 7.23 1.684 7.034 7.034 0 0 1 1.669 7.277l10.187 10.184a7.028 7.028 0 0 1 7.278 1.672 7.04 7.04 0 0 1 0 9.957 7.05 7.05 0 0 1-9.965 0 7.044 7.044 0 0 1-1.528-7.66l-9.5-9.497V59.36a7.04 7.04 0 0 1 1.86 11.29 7.04 7.04 0 0 1-9.957 0 7.04 7.04 0 0 1 0-9.958 7.06 7.06 0 0 1 2.304-1.539V33.926a7.049 7.049 0 0 1-3.82-9.234L29.242 14.272 1.73 41.777a5.925 5.925 0 0 0 0 8.371L41.852 90.27a5.925 5.925 0 0 0 8.37 0l39.934-39.934a5.925 5.925 0 0 0 0-8.371'/%3E%3C/g%3E%3C/svg%3E "View source code")
Introduction
The ActionButton web component, part of the Monster suite, elevates the standard button functionality by integrating a popper with actionable items, thus facilitating a dynamic user interface. This component is especially useful in web applications where actions need to be accessible directly from a button click, simplifying user workflows and enhancing interaction.
Key Features
- Actionable popper: Integrates a pop-up element (popper) that appears upon button click, offering additional interactive options directly accessible to the user.
- Dynamic configuration: Supports dynamic assignment of button options and actions through HTML data attributes, allowing for a highly customizable user experience.
- Accessibility: Built with accessibility best practices, ensuring that all users can efficiently interact with the web components irrespective of their browsing context.
- Internationalization ready: Comes with built-in support for internationalization, making it easy to adapt the button labels and tooltips for different languages dynamically.
- Extensible styling: The appearance of the button can be extensively customized using CSS, aligning with the branding and styling requirements of your application.
Improving the user experience
The ActionButton goes beyond a typical button by introducing an integrated popper that enhances the interactivity without leaving the current workflow. Its ability to dynamically change based on the context and provide immediate actions enhances user engagement and operational efficiency.
These functionalities align well with user expectations, offering a more intuitive and streamlined interaction model that is backed by user experience research, demonstrating its effectiveness in enhancing user satisfaction.
Efficiency in the development process
Incorporating the ActionButton into your projects is straightforward. It is designed to work seamlessly with existing web standards and frameworks, making it a versatile choice for developers looking to enhance the functionality of their applications with minimal overhead. Its modular design ensures that it can be easily integrated and customized within various development environments.
Action Button
This example demonstrates how to create an Action Button component.
Javascript
import '@schukai/monster/source/components/form/action-button.mjs';
const element = document.querySelector('monster-action-button');
element.setOption("buttons" , [
{
label: "Button 1",
class: "monster-button-primary-1",
action: () => {
console.log("Button 1 clicked");
}
},
{
label: "Button 2",
class: "monster-button-primary-2",
action: () => {
console.log("Button 2 clicked");
}
}
])HTML
<monster-action-button>
click me!
</monster-action-button>Stylesheet
/** no additional stylesheet is defined **/Component Design
The ActionButton component is built using the Shadow DOM to encapsulate its structure and styling. By utilizing a shadow root, the component ensures its internal elements and styles remain protected from unintended interference caused by external CSS or JavaScript.
Shadow DOM and Accessibility
The Shadow DOM encapsulates the component's internal structure, preventing direct access to its elements. This ensures a consistent and predictable design. The component is designed with accessibility in mind, supporting semantic structure and keyboard navigation to provide an inclusive user experience.
Customizing Through Exported Parts
Specific internal elements of the ActionButton component are made available for external styling through exported parts. These parts allow developers to apply custom styles to specific sections of the component while maintaining its encapsulation.
Available Part Attributes
control: Represents the main container for the button and its popper content.button: Represents the main button element that triggers the actions.popper: Represents the dropdown area where additional action buttons are displayed.content: Represents the container for the content inside the popper.buttons: Represents the group of action buttons displayed inside the popper.
Below is an example of how to use CSS part attributes to customize the ActionButton component:
monster-action-button::part(control) {
background-color: #f0f0f0;
border: 1px solid #d0d0d0;
border-radius: 4px;
padding: 5px;
}
monster-action-button::part(button) {
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
padding: 6px 12px;
font-size: 14px;
cursor: pointer;
}
monster-action-button::part(popper) {
background-color: #ffffff;
border: 1px solid #ddd;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 4px;
padding: 10px;
}
monster-action-button::part(buttons) {
display: flex;
flex-direction: column;
gap: 5px;
}
Explanation of the Example
monster-action-button::part(control): Styles the main container with padding, a border, and background color.monster-action-button::part(button): Customizes the trigger button with a background color, padding, and rounded corners.monster-action-button::part(popper): Adds styling to the dropdown container, including a border and shadow for visibility.monster-action-button::part(buttons): Ensures the action buttons inside the dropdown are displayed in a vertical layout with spacing.
Accessibility
The ActionButton component follows accessibility best practices, ensuring support for keyboard navigation and screen readers. Users can interact with the popper actions using standard navigation methods, making the component inclusive for all users.
HTML Structure
<monster-action-button></monster-action-button>JavaScript Initialization
const element = document.createElement('monster-action-button');
document.body.appendChild(element);Exported
ActionButtonDerived from
PopperButtonOptions
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 PopperButton.
- 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 PopperButton.
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 PopperButton.
Behavioral methods
showDialog()- {ActionButton}
monster-action-button-show-dialog
Static methods
[instanceSymbol]()- {symbol}
instanceof operator.getCSSStyleSheet()- {CSSStyleSheet[]}
getTag()- {string}
Lifecycle methods
Lifecycle methods are called by the environment and are usually not intended to be called directly.
[assembleMethodSymbol]()- {ActionButton}
Events
The component emits the following events:
monster-action-button-show-dialog
For more information on how to handle events, see the mdn documentation.