stable css 1.0.1 · js 1.1.0

Overlay

The drawer / offcanvas primitive: a fixed backdrop holding a sliding ng-overlay-panel. There is no separate “drawer” component — a drawer is an overlay, from the left by default or from the right with right. Link ng_overlay.js.

Any element with data-ng-overlay="id" opens the overlay with that id (note: the id, not a selector). It closes from a ng-overlay-close, a click on the backdrop, or Esc. The script manages role="dialog", focus trap and return-focus.

Drawer (left, default)

Navigation

Dashboard
Projects

12
Notifications

3
Settings

overlay.html

<button type="button" class="ng-btn ng-btn-primary-outline" data-ng-overlay="ov-left">Open left drawer</button>

<div class="ng-overlay" id="ov-left">
    <div class="ng-overlay-panel">
        <header class="ng-overlay-header pxy-16">
            <h3 class="fs-lg fw-700 myx-zero" id="ov-left-title">Navigation</h3>
            <button type="button" class="ng-btn ng-btn-mute-ghost circle ng-overlay-close" aria-label="Close"><i class="ph ph-x"></i></button>
        </header>
        <div class="ng-overlay-body pxy-16">
            <ul class="ng-list divided hover">
                <li class="ng-list-item">
                    <span class="ng-list-media"><i class="ph ph-squares-four"></i></span>
                    <div class="ng-list-content"><div class="ng-list-title">Dashboard</div></div>
                </li>
                <li class="ng-list-item">
                    <span class="ng-list-media"><i class="ph ph-folder-open"></i></span>
                    <div class="ng-list-content"><div class="ng-list-title">Projects</div></div>
                    <div class="ng-list-action"><span class="ng-badge ng-badge-primary-soft pill">12</span></div>
                </li>
                <li class="ng-list-item">
                    <span class="ng-list-media"><i class="ph ph-bell"></i></span>
                    <div class="ng-list-content"><div class="ng-list-title">Notifications</div></div>
                    <div class="ng-list-action"><span class="ng-badge ng-badge-danger pill">3</span></div>
                </li>
                <li class="ng-list-item">
                    <span class="ng-list-media"><i class="ph ph-gear"></i></span>
                    <div class="ng-list-content"><div class="ng-list-title">Settings</div></div>
                </li>
            </ul>
        </div>
        <footer class="ng-overlay-footer pxy-16">
            <button type="button" class="ng-btn ng-btn-mute-soft ng-100"><i class="ph ph-sign-out"></i>&nbsp; Sign out</button>
        </footer>
    </div>
</div>

Right drawer

Add right on the root to slide in from the right edge.

Notifications

Dashboard
Projects

12
Notifications

3
Settings

overlay.html

<button type="button" class="ng-btn ng-btn-primary-outline" data-ng-overlay="ov-right">Open right drawer</button>

<div class="ng-overlay right" id="ov-right">
    <div class="ng-overlay-panel">
        <header class="ng-overlay-header pxy-16">
            <h3 class="fs-lg fw-700 myx-zero" id="ov-right-title">Notifications</h3>
            <button type="button" class="ng-btn ng-btn-mute-ghost circle ng-overlay-close" aria-label="Close"><i class="ph ph-x"></i></button>
        </header>
        <div class="ng-overlay-body pxy-16">
            <ul class="ng-list divided hover">
                <li class="ng-list-item">
                    <span class="ng-list-media"><i class="ph ph-squares-four"></i></span>
                    <div class="ng-list-content"><div class="ng-list-title">Dashboard</div></div>
                </li>
                <li class="ng-list-item">
                    <span class="ng-list-media"><i class="ph ph-folder-open"></i></span>
                    <div class="ng-list-content"><div class="ng-list-title">Projects</div></div>
                    <div class="ng-list-action"><span class="ng-badge ng-badge-primary-soft pill">12</span></div>
                </li>
                <li class="ng-list-item">
                    <span class="ng-list-media"><i class="ph ph-bell"></i></span>
                    <div class="ng-list-content"><div class="ng-list-title">Notifications</div></div>
                    <div class="ng-list-action"><span class="ng-badge ng-badge-danger pill">3</span></div>
                </li>
                <li class="ng-list-item">
                    <span class="ng-list-media"><i class="ph ph-gear"></i></span>
                    <div class="ng-list-content"><div class="ng-list-title">Settings</div></div>
                </li>
            </ul>
        </div>
        <footer class="ng-overlay-footer pxy-16">
            <button type="button" class="ng-btn ng-btn-mute-soft ng-100"><i class="ph ph-sign-out"></i>&nbsp; Sign out</button>
        </footer>
    </div>
</div>

Form drawer

Add form for a panel tuned to host form fields — the classic “edit in a side panel” pattern.

Edit customer

overlay.html

<button type="button" class="ng-btn ng-btn-primary-outline" data-ng-overlay="ov-form">Open form drawer</button>

<div class="ng-overlay right form" id="ov-form">
    <div class="ng-overlay-panel">
        <header class="ng-overlay-header pxy-16">
            <h3 class="fs-lg fw-700 myx-zero" id="ov-form-title">Edit customer</h3>
            <button type="button" class="ng-btn ng-btn-mute-ghost circle ng-overlay-close" aria-label="Close"><i class="ph ph-x"></i></button>
        </header>
        <div class="ng-overlay-body pxy-16">
            <form class="ng-form">
                <div class="ng-field">
                    <label class="ng-label ng-label-required" for="ov-name">Customer</label>
                    <input type="text" class="ng-input" id="ov-name" placeholder="Jane Doe">
                </div>
                <div class="ng-field">
                    <label class="ng-label" for="ov-plan">Plan</label>
                    <select class="ng-select" id="ov-plan">
                        <option>Starter</option>
                        <option>Pro</option>
                    </select>
                </div>
                <div class="ng-field">
                    <label class="ng-label" for="ov-note">Notes</label>
                    <textarea class="ng-textarea" id="ov-note" rows="4" placeholder="Internal notes…"></textarea>
                </div>
            </form>
        </div>
        <footer class="ng-overlay-footer pxy-16">
            <div class="ng-form-actions myx-zero">
                <button type="button" class="ng-btn ng-btn-mute-soft ng-overlay-close">Cancel</button>
                <button type="button" class="ng-btn ng-btn-primary ng-overlay-close">Save changes</button>
            </div>
        </footer>
    </div>
</div>

Hamburger toggle

The companion trigger: a ng-overlay-toggle with a ng-toggle-box burger (three-line icon). Box shapes: ng-toggle-square / ng-toggle-circle. Add data-ng-mobile to show it only below md.

<button type="button" class="ng-overlay-toggle" data-ng-overlay="ov-burger" aria-label="Menu">
    <span class="ng-toggle-box burger"></span>
</button>

<div class="ng-overlay right" id="ov-burger">
    <div class="ng-overlay-panel">
        <header class="ng-overlay-header pxy-16">
            <h3 class="fs-lg fw-700 myx-zero" id="ov-burger-title">Menu</h3>
            <button type="button" class="ng-btn ng-btn-mute-ghost circle ng-overlay-close" aria-label="Close"><i class="ph ph-x"></i></button>
        </header>
        <div class="ng-overlay-body pxy-16">
            <ul class="ng-list divided hover">
                <li class="ng-list-item">
                    <span class="ng-list-media"><i class="ph ph-squares-four"></i></span>
                    <div class="ng-list-content"><div class="ng-list-title">Dashboard</div></div>
                </li>
                <li class="ng-list-item">
                    <span class="ng-list-media"><i class="ph ph-folder-open"></i></span>
                    <div class="ng-list-content"><div class="ng-list-title">Projects</div></div>
                    <div class="ng-list-action"><span class="ng-badge ng-badge-primary-soft pill">12</span></div>
                </li>
                <li class="ng-list-item">
                    <span class="ng-list-media"><i class="ph ph-bell"></i></span>
                    <div class="ng-list-content"><div class="ng-list-title">Notifications</div></div>
                    <div class="ng-list-action"><span class="ng-badge ng-badge-danger pill">3</span></div>
                </li>
                <li class="ng-list-item">
                    <span class="ng-list-media"><i class="ph ph-gear"></i></span>
                    <div class="ng-list-content"><div class="ng-list-title">Settings</div></div>
                </li>
            </ul>
        </div>
    </div>
</div>

Anatomy

ng-overlay ng-overlay-panel ng-overlay-header ng-overlay-body ng-overlay-footer ng-overlay-close data-ng-overlay="id"

Variants & state

right form is-active

Toggle

ng-overlay-toggle ng-toggle-box burger ng-toggle-square ng-toggle-circle data-ng-mobile

Reference

Generated from the component source (_ng_overlay.scss · ng_overlay.js).

Component info

Name	`overlay`
Type	`css+js`
Version	`css 1.0.1 · js 1.1.0`
Status	`stable`
CSS	`/assets/css/components/_ng_overlay.scss`
JS	`/assets/js/ng_overlay.js`

Classes

.ng-overlay .ng-overlay-body .ng-overlay-close .ng-overlay-footer .ng-overlay-header .ng-overlay-panel .ng-overlay-toggle .ng-toggle-box .ng-toggle-circle .ng-toggle-square

Tokens

--ng-overlay-bg --ng-overlay-divider --ng-overlay-duration --ng-overlay-panel-bg --ng-overlay-width