Skip to content
STYLESCAPE

Sheet

Examples for the ss-c-sheet module.

A panel that slides in from the bottom (default), left or right edge of its positioned parent, or of the viewport with --fixed. While closed only its __handle shows; the body is hidden from keyboard and screen readers. State is data-state="open" or "closed". SheetManager toggles it from the handle or any data-ss-sheet-toggle button, keeps aria-expanded in sync, opens and closes with the arrow keys on the handle, and closes on Escape. Size tokens: --ss-sheet-size, --ss-sheet-peek.

Bottom sheet

Buildings, roads and water.

HTML 
<div style="position: relative; height: 300px; overflow: hidden; background: var(--ss-color-surface-2);">
            <section class="ss-c-sheet" id="demo-sheet-bottom" data-state="closed" aria-label="Layers">
                <button type="button" class="ss-c-sheet__handle" aria-controls="demo-sheet-bottom"
                        aria-expanded="false">Layers</button>
                <div class="ss-c-sheet__body">
                    <p style="margin: 0">Buildings, roads and water.</p>
                </div>
            </section>
        </div>

Open

Wall 0042 · IfcWallStandardCase · 3.20 m

HTML 
<div style="position: relative; height: 300px; overflow: hidden; background: var(--ss-color-surface-2);">
            <section class="ss-c-sheet" id="demo-sheet-open" data-state="open" aria-label="Selection"
                     style="--ss-sheet-size: 60%">
                <button type="button" class="ss-c-sheet__handle" aria-controls="demo-sheet-open"
                        aria-expanded="true">Selection</button>
                <div class="ss-c-sheet__body">
                    <p style="margin: 0">Wall 0042 &middot; IfcWallStandardCase &middot; 3.20 m</p>
                </div>
            </section>
        </div>

Dock edges

--left and --right dock to a side; the handle becomes a vertical strip.

Camera, lights, meshes.

Nothing selected.

HTML 
<div style="position: relative; height: 300px; overflow: hidden; background: var(--ss-color-surface-2);">
            <section class="ss-c-sheet ss-c-sheet--left" id="demo-sheet-left" data-state="open" aria-label="Scene">
                <button type="button" class="ss-c-sheet__handle" aria-controls="demo-sheet-left"
                        aria-expanded="true">Scene</button>
                <div class="ss-c-sheet__body"><p style="margin: 0">Camera, lights, meshes.</p></div>
            </section>
            <section class="ss-c-sheet ss-c-sheet--right" id="demo-sheet-right" data-state="closed" aria-label="Properties">
                <button type="button" class="ss-c-sheet__handle" aria-controls="demo-sheet-right"
                        aria-expanded="false">Properties</button>
                <div class="ss-c-sheet__body"><p style="margin: 0">Nothing selected.</p></div>
            </section>
        </div>

Sheet on small screens, dock on large

--dock is a bottom sheet below md and a plain, always-open column from md up (the handle hides). Here it is the right column of a flex row.

Map

Panel one, panel two.

HTML 
<div style="position: relative; height: 300px; overflow: hidden; background: var(--ss-color-surface-2); display: flex">
            <div style="flex: 1; padding: var(--ss-space-4)">Map</div>
            <section class="ss-c-sheet ss-c-sheet--dock" id="demo-sheet-dock" data-state="closed"
                     aria-label="Panels" style="flex: 0 0 240px; border-inline-start: 1px solid var(--ss-color-border)">
                <button type="button" class="ss-c-sheet__handle" aria-controls="demo-sheet-dock"
                        aria-expanded="false">Panels</button>
                <div class="ss-c-sheet__body"><p style="margin: 0">Panel one, panel two.</p></div>
            </section>
        </div>