Playground + API — Layout

Layout

Grid host that coordinates registered application zones and responsive insets.

Playground

Configure the baseline public contract and copy synchronized Vue markup.

Main layout zone

Properties

Full height

Vue

<m-layout
  :style='{&quot;width&quot;:&quot;100%&quot;,&quot;minHeight&quot;:&quot;320px&quot;,&quot;overflow&quot;:&quot;hidden&quot;,&quot;borderRadius&quot;:&quot;24px&quot;}'
  :full-height="false"
>
  <m-layout-header
    size-token="64px"
  >
    <m-app-bar
      title="Header"
     />
  </m-layout-header>
  <m-layout-main>
    <m-surface
      variant="filled"
      :style='{&quot;minHeight&quot;:&quot;220px&quot;,&quot;padding&quot;:&quot;24px&quot;}'
    >
      Main layout zone
    </m-surface>
  </m-layout-main>
</m-layout>