ContainerBox Component Demo - @liwe3/webcomponents

Features

Wraps any HTML content (divs, images, custom elements)
Shows menu button on hover (or always visible)
Configurable menu position (4 corners)
Integrates with PopoverMenu component
Clicks pass through to wrapped content
Customizable with CSS variables
TypeScript support with full type definitions

Example 1: Basic Card with Menu

Hover over the card to see the menu button appear in the bottom-left corner (default position).

Welcome Card

This is a card wrapped in a ContainerBox. Hover over it to see the menu button appear. Click on menu items to see actions.

Output Console:

Hover over the card and click menu items...

Example 2: All Four Corner Positions

Demonstrates menu button in all four corner positions.

Top Left

Menu button appears in the top-left corner when you hover.

Top Right

Menu button appears in the top-right corner when you hover.

Bottom Left

Menu button appears in the bottom-left corner when you hover.

Bottom Right

Menu button appears in the bottom-right corner when you hover.

Output Console:

Click menu items to see output...

Example 3: Always Visible Menu

Menu button is always visible, not just on hover.

Always Visible

The menu button is always visible on this container, no hover required.

Output Console:

Menu is always visible...

Example 4: Image Container with Actions

ContainerBox wrapping an image with various image-related actions. Try clicking on the image itself.

🖼️

Output Console:

Click on the image or use the menu...

Example 5: Dynamic Configuration

Use the controls below to dynamically change the menu position and visibility.

Configurable Box

Use the buttons below to change the menu position and visibility settings dynamically.

Output Console:

Use controls to modify the box...

Example 6: Multiple Items with Submenus

Container with nested submenu items, demonstrating the full power of PopoverMenu integration.

Rich Menu

This container has a menu with nested submenus for more complex actions.

Output Console:

Explore the nested menu...

Usage Example

// Import the ContainerBox component
import { ContainerBoxElement } from '@liwe3/webcomponents';

// Get the container element
const box = document.querySelector('liwe3-container-box');

// Set menu items
box.setMenuItems([
  {
    label: 'Edit',
    onclick: () => console.log('Edit clicked')
  },
  {
    label: 'Delete',
    onclick: () => console.log('Delete clicked')
  },
  { label: '---sep' },
  {
    label: 'More',
    items: [
      {
        label: 'Share',
        onclick: () => console.log('Share clicked')
      },
      {
        label: 'Duplicate',
        onclick: () => console.log('Duplicate clicked')
      }
    ]
  }
]);

// Set menu position
box.setMenuPosition('top-right');

// Make menu always visible
box.setAlwaysShowMenu(true);

CSS Customization

/* Available CSS variables for customization */
liwe3-container-box {
  --container-box-menu-bg: #fff;
  --container-box-menu-border: #ddd;
  --container-box-menu-radius: 4px;
  --container-box-menu-padding: 6px 10px;
  --container-box-menu-shadow: 0 2px 8px rgba(0,0,0,0.15);
  --container-box-menu-color: #333;
  --container-box-menu-hover-bg: #f5f5f5;
  --container-box-menu-offset: 8px;
}