Popper
Floating overlay component with flexible positioning and interaction modes
import { Popper } from "@schukai/monster/source/components/layout/popper.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
This is a versatile web component. More than just a simple UI element, this component serves as a key element for enhancing interactivity and engagement within various web applications. Whether you are developing a basic website or a complex enterprise-level application, this component is designed to improve user interaction and satisfaction.
Key Features
- Dynamic interaction: Users can interact with content dynamically, making the web experience more intuitive and user-centric.
- Customizable appearance: Customize the appearance of the component to match the design of your brand or application, ensuring visual consistency.
- Accessibility: Designed with accessibility in mind to ensure that all users have a seamless experience, regardless of their browsing environment.
- Visual feedback effect: Provides subtle touch feedback to enhance user interaction, making actions more responsive and engaging.
- Programmatic Control: Offers methods such as trigger, focus, and deactivate, allowing developers to control the component's behavior programmatically and offering greater flexibility.
Improving the user experience
This component goes beyond its traditional functionality to offer an enhanced and interactive user experience. The combination of visual feedback effects and dynamic interaction with content is not only visually appealing, but also provides clear and responsive feedback to user actions, making the web environment more intuitive and user-friendly.
These improvements are supported by user studies that demonstrate a positive impact on user engagement and satisfaction.
Efficiency in the development process
Integrating this component into your development process is straightforward. Its compatibility with standard web technologies and ease of customization ensure seamless integration with your existing tools and libraries. Whether you're working on a small project or a large-scale application, the modular design of this component guarantees easy integration, streamlining your development process and enhancing productivity.
Popper Simple
This is a simple popper example. It is a popper with the text "Should I Stay or Should I Go?". Nothing more, nothing less.
Javascript
import "@schukai/monster/source/components/layout/popper.mjs";HTML
<monster-popper>
<div slot="button"
style="border:1px solid var(--monster-color-primary-2); padding: 10px; cursor: pointer;width: 100%; display:flex;align-items:center;justify-content:center;">
Hover me!
</div>
Should I Stay or Should I Go?
</monster-popper>Stylesheet
/** no additional stylesheet is defined **/Popper Click
This is a popper example, which is triggered by a click. It is a popper with the text "Should I Stay or Should I Go?". The attribute data-monster-option-mode="click" makes the trick. The popper will be shown when the button is clicked.
Javascript
import "@schukai/monster/source/components/layout/popper.mjs";HTML
<monster-popper data-monster-option-mode="click">
<div slot="button"
style="border:1px solid var(--monster-color-primary-2); padding: 10px; cursor: pointer;width: 100%; display:flex;align-items:center;justify-content:center;">
Click me!
</div>
Should I Stay or Should I Go?
</monster-popper>Stylesheet
/** no additional stylesheet is defined **/Component Design
The Monster Popper component is a floating UI element that can be toggled via various interaction modes such as click, hover, focus, or programmatically. Built using the Shadow DOM, it provides reliable encapsulation for styling and behavior, ensuring no conflicts with external code. It supports dynamic positioning using middleware for flexible placement.
Shadow DOM and Accessibility
The Monster Popper component leverages the Shadow DOM to isolate its internal structure. Accessibility is achieved through ARIA roles, focus management, and keyboard interaction support. Users relying on assistive technologies can interact seamlessly with the popper.
Customizing Through Exported Parts
The Monster Popper component exposes specific exported parts for precise styling using CSS. These parts allow developers to customize the popper's container, button, arrow, and content area.
Available Part Attributes
control: Represents the entire control container, including the button and popper content.popper: Targets the floating popper element.button: Refers to the button or trigger element used to toggle the popper.arrow: Styles the directional arrow of the popper.content: Targets the main content area within the popper.
Below is an example of how to style the popper and its arrow using CSS part attributes:
monster-popper::part(control) {
display: inline-block;
position: relative;
}
monster-popper::part(button) {
background-color: #007bff;
color: #fff;
padding: 10px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
monster-popper::part(popper) {
background-color: #ffffff;
border: 1px solid #ddd;
border-radius: 6px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 12px;
z-index: 1000;
}
monster-popper::part(arrow) {
width: 12px;
height: 12px;
background-color: #ffffff;
border: 1px solid #ddd;
transform: rotate(45deg);
position: absolute;
}
Explanation of the Example
monster-popper::part(control): Styles the main control container with relative positioning.monster-popper::part(button): Customizes the button with background, padding, and hover effects.monster-popper::part(popper): Styles the popper element with a white background, border, and box shadow.monster-popper::part(arrow): Styles the arrow with a rotated square design for visual indication.
Interaction Modes
The Monster Popper supports various interaction modes, which can be specified using the mode option:
click: Toggles the popper on click.focus: Opens the popper when the button is focused and closes on blur.enter: Shows the popper when the mouse enters the button.auto: Opens on hover (mouseenter) and closes on mouse leave.manual: The popper is controlled programmatically via methods.
Methods
The Monster Popper provides the following methods for programmatic control:
| Method | Description |
|---|---|
showDialog() | Displays the popper. |
hideDialog() | Hides the popper. |
toggleDialog() | Toggles the visibility of the popper. |
Accessibility
The Monster Popper ensures accessibility by:
- Using proper ARIA roles for open and closed states.
- Managing focus on the button or interactive elements.
- Providing smooth keyboard navigation for toggling the popper.
These features ensure that the component is usable by all users, including those relying on screen readers and keyboard interactions.
HTML Structure
<monster-popper></monster-popper>JavaScript Initialization
const element = document.createElement('monster-popper');
document.body.appendChild(element);Exported
PopperDerived from
CustomElementOptions
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.
- 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()- {popper}: popper instance
showDialog()- {popper}: popper instance
toggleDialog()- {popper}: popper instance
Static methods
[instanceSymbol]()- {symbol}: instance type symbol
getCSSStyleSheet()- {cssstylesheet[]}: of stylesheets
getTag()- {string}: tag name
Lifecycle methods
Lifecycle methods are called by the environment and are usually not intended to be called directly.
[assembleMethodSymbol]()connectedCallback()disconnectedCallback()Events
The component emits the following events:
monster-popper-hide
Fired when popper starts hidingmonster-popper-hidden
Fired when popper is fully hiddenmonster-popper-open
Fired when popper starts openingmonster-popper-opened
Fired when popper is fully opened
For more information on how to handle events, see the mdn documentation.