Task Bar

The Task Bar component provides a Windows-like shell interface at the bottom or top of a desktop container. It features a Start Menu with application search, a Widgets Board with active system performance monitoring, a System Tray (volume controller, Wi-Fi networks, battery status), and a live real-time clock linked to a Calendar flyout.

Interactive Desktop Simulation

Use the Taskbar controls below to open system utilities, widgets, or check settings.

<div class="desktop-container" style="height: 550px; position: relative;">
    <!-- Dragable Windows -->
    <div class="window" style="position: absolute; top: 50px; left: 50px;">
        <div class="window-header">
            <span>Welcome</span>
            <div class="window-controls">
                <button class="btn-min">−</button>
                <button class="btn-max">□</button>
                <button class="btn-close">×</button>
            </div>
        </div>
        <div class="window-content">
            Welcome to the desktop!
        </div>
    </div>

    <!-- Windows-like Taskbar -->
    <div class="taskbar"></div>
</div>

<script>
    // Initialized automatically if loaded with all.js, 
    // or manually initialized:
    document.addEventListener('DOMContentLoaded', () => {
        Window.init();
        Taskbar.init();
    });
</script>

Features & API Reference

The Taskbar component exposes the following capabilities:

JavaScript API Methods

Method	Description
Taskbar.init()	Finds and initializes any `.taskbar` elements on the page.
Taskbar.launchApp(appId)	Programmatically launches a built-in application: `'browser'`, `'explorer'`, `'settings'`, `'calculator'`, or `'terminal'`.
Taskbar.closeAllFlyouts()	Closes all active popover flyouts (Start Menu, Widgets, Clock Calendar, Volume, Network).
Window.create(options)	Creates a draggable window in the desktop container dynamically. Returns the window element.