🚧 Under Construction

This component documentation is currently being developed. Some features may be incomplete.

Bottombar Dialog

HTML Markup

<dialog id="dlgbottombar" class="hoo-dlg bottombar">
    <div class="hoo-dlgheader">
        <div class="hoo-dlgheader-title">
            <h2>Dialog Header</h2>
        </div>
        <div class="hoo-dlgheader-closer">
            <button class="hoo-buttonicon" 
        
        
        ><span class="hoo-icon">
                <svg class="hoo-icon-svg icon-close" aria-hidden="true">
                    <use xlink:href="/htwoo-core/images/icons.svg#icon-close">
                    </use>
                </svg></span>
        </button>
    </div>
</div>
<div class="hoo-dlgcontent">
    <p>This dialog is a topbar . That automatically scales with the content.</p>
    <p>To make the height fixed add the CSS variable<code>--hoo-dlg-height</code>
</p>
<h2>Try to resize the sidebar</h2>
<button class="hoo-button-primary" id='height-unset'><span class="hoo-button-label">Unset / reset</span>
</button>
<button class="hoo-button-primary" id='height-20vw'><span class="hoo-button-label">20% height</span>
</button>
<button class="hoo-button-primary" id='height-50vw'><span class="hoo-button-label">50% height</span>
</button>
<button class="hoo-button-primary" id='height-75vw'><span class="hoo-button-label">75% height</span>
</button>
</div>
</dialog>
<!--- ⬇️ Script below is just for demo purposes ⬇️ -->
    <script>let dlg = document.querySelector('#dlgbottombar');

    if (dlg !== undefined && dlg.parentElement.className === 'dlg-background') {
        
        dlg.showModal()

        const resize = (event) => {

            console.debug(event.currentTarget.id);

            let newSize = null;

            switch (event.currentTarget.id) {
                case 'height-unset':
                    break;
                case 'height-20vw':
                    newSize = '20vh';
                    break;
                case 'height-50vw':
                    newSize = '50vh';
                    break;
                case 'height-75vw':
                    newSize = '75vh';
                    break;
                default:
                    break;
            }

            console.debug(dlg, newSize);

            if (dlg && newSize) {

                console.debug(' --- Update ....')
                dlg.style.setProperty('--hoo-dlg-height', newSize);

            } else {
                if (newSize === null) {
                    dlg.style.setProperty('--hoo-dlg-height', null);
                }
            }
        }

        let resizers = document.querySelectorAll("button[id^='height']");

        console.debug(resizers);

        resizers.forEach(resizer => resizer.addEventListener('click', resize));
    }</script>

Bottombar Dialog

The Bottombar Dialog component provides a horizontal panel that appears from the bottom of the screen. It’s useful for action bars, command panels, or notifications that need to be accessible but not interfere with the main content view.

Overview

Bottombar dialogs in HTWOO UI extend the HTML5 <dialog> element with special positioning to create a horizontal panel at the bottom of the viewport. They span the full width of the screen and can have a customizable height.

Features

Fixed positioning at the bottom of the viewport
Full-width display
Customizable height via CSS variables
Support for resizing through user interaction
Smooth animation transitions
Optional dialog header with title and close button
Dialog content area for main information
Optional backdrop when opened modally

Usage

The Bottombar Dialog can be implemented with the following structure:

<dialog id="myBottombar" class="hoo-dlg bottombar">
  <!-- Dialog header -->
  <div class="hoo-dlgheader">
    <h2>Bottombar Title</h2>
    <button class="hoo-button-icon" aria-label="Close">×</button>
  </div>
  
  <!-- Dialog content -->
  <div class="hoo-dlgcontent">
    <p>Bottombar content goes here</p>
  </div>
</dialog>

Opening the Dialog

Customizing Height

Bottombar dialog height can be customized using CSS variables:

<dialog class="hoo-dlg bottombar" style="--hoo-dlg-height: 20vh">
  <!-- Dialog content -->
</dialog>

SCSS Files

Dialog Styles:

src/styles/03-organism/dialog/_dialog.scss

Accessibility

Uses the native HTML5 <dialog> element
Ensures focus is trapped within the dialog when open
ESC key closes the dialog by default
Proper focus management with autofocus attribute
ARIA attributes for screen reader compatibility