Dowe

LAYOUT

Scaffold

Scaffold composes the complete application shell from explicit bar, side, main, and overlay regions.

MENTAL MODEL

One owner for the application shell

Use one Scaffold in a nested layout chain. boxed:true centers only the start, main, and end body at 96rem on web or 1536 logical units on Android and iOS. AppBar, BottomBar, and overlays remain full width.

layout DocsLayout
  signal openDrawer value:false
  Scaffold boxed:true
    appBar
      AppBar variant:"soft" scheme:"surface" position:"fixed" bordered:true
        start
          IconButton label:"Open navigation" variant:"ghost" show:{ xs:true md:false } onClick:{ set:openDrawer value:!openDrawer } icon:"menu-dots"
          Text weight:"bold"
            "Dowe"
    start
      Sidebar show:{ xs:false md:true } variant:"soft" scheme:"surface"
        body
          SideNav variant:"ghost" scheme:"muted" size:"sm" wide:true
            item label:"Overview" href:"/docs"
    main
      children
    bottomBar
      BottomBar variant:"soft" scheme:"surface" bordered:true
        tab href:"/docs" label:"Overview"
          Icon name:"home"
        tab href:"/docs/views/layout/scaffold" label:"Scaffold"
          Icon name:"layers"
    overlays
      Drawer open:openDrawer position:"start" variant:"soft" scheme:"surface" show:{ xs:true md:false }
        body
          SideNav variant:"ghost" scheme:"muted" size:"sm" wide:true
            item label:"Overview" href:"/docs"

LIVE EXAMPLE

A complete shell in one preview

The example keeps the AppBar, desktop Sidebar, mobile Drawer, main content, and BottomBar in one routed shell so their responsive placement can be inspected together.

REGIONS

Explicit shell structure

Each region appears at most once. main is required; the remaining regions are optional and preserve the same order on web, Android, and iOS.

Region	Required	Purpose
No data There are no records to display

API

Props

Scaffold also accepts applicable common spacing, sizing, visibility, and accessibility props. boxed defaults to false; when enabled, it constrains only the shell body independently from any boxed width owned by its layout bars.

Prop	Type	Default
No data There are no records to display

No data

No data