Skip to main content

Overlay Container

The overlay stylesheet provides a standardized way to create consistent layouts within BwModal and BwDrawer components without using the built-in slots. This approach gives you more flexibility while maintaining design consistency.

Usage​

To use the overlay stylesheet, wrap your content in a container with the class bw-overlay-container and use the following classes for different sections:

  • .bw-overlay-header - For the header/toolbar area
  • .bw-overlay-content - For the main content area
  • .bw-overlay-footer - For the footer/action area

Basic Example​

<bw-modal>
  <bw-button slot="trigger">Open Modal</bw-button>
  
  <div class="bw-overlay-container">
    <bw-toolbar class="bw-overlay-header">
      <h2>Modal Title</h2>
    </bw-toolbar>
    
    <div class="bw-overlay-content">
      <p>Your main content goes here</p>
      <!-- Add any content, forms, etc. -->
    </div>
    
    <bw-toolbar class="bw-overlay-footer">
      <bw-button slot="end">Submit</bw-button>
    </bw-toolbar>
  </div>
</bw-modal>

With BwDrawer​

<bw-drawer>
  <bw-button slot="trigger">Open Drawer</bw-button>
  
  <div class="bw-overlay-container">
    <bw-toolbar class="bw-overlay-header">
      <h2>Drawer Title</h2>
    </bw-toolbar>
    
    <div class="bw-overlay-content">
      <p>Drawer content</p>
    </div>
    
    <bw-toolbar class="bw-overlay-footer">
      <bw-button slot="end">Save</bw-button>
    </bw-toolbar>
  </div>
</bw-drawer>

When to Use​

Use the overlay stylesheet when you have complex conditional rendering that makes it difficult to use the built in slots

For simpler use cases, you can still use the built-in slots on BwModal and BwDrawer:

  • header slot
  • content slot
  • footer slot