Pop Banner Component

The Pop Banner component provides a flexible way to display temporary messages or notifications to users. It supports multiple positions, auto-dismiss functionality, and customizable content.

Key Features

• Flexible Positioning: Left, right, or center alignment options

• Auto-dismiss: Optional timeout for automatic hiding

• Customizable Content: Supports any HTML content

• Animated: Smooth show/hide transitions

Basic Usage

Create a basic pop banner with default settings:

1
<PopBanner>
2
    <p>This is a pop banner message!</p>
3
</PopBanner>

Variants

Default Center Position

1
<PopBanner>
2
    <p>A centered pop banner with default styling</p>
3
</PopBanner>

Left-Aligned with Timeout

1
<PopBanner position="left" timeout={5000}>
2
    <p>This banner will auto-dismiss after 5 seconds</p>
3
</PopBanner>

Pop Banner Component Props API

PopBanner Functions API

The Pop Banner component exposes methods for programmatic control:

1
// Show the banner
2
document.querySelector('pop-banner').toggle(true);
3
// Hide the banner
4
document.querySelector('pop-banner').toggle(false);
5
// Toggle the banner
6
document.querySelector('pop-banner').toggle();

Event Handling

The Pop Banner component emits custom events that you can listen to:

1
// Listen for the 'show' event
2
document.querySelector('pop-banner').addEventListener('show', () => {
3
  console.log('Banner is visible');
4
});

Common Use Cases