Page
Material Design 3-styled page shell web component (lit-material-page) — a header/sidebar/main content grid.
- 670 B gzipped
- @lit-material/page 0.0.3
- Renders on the server
Example
Page
The outermost app-shell grid: a header row spanning the full width, and a sidebar/main-content row below it.
<lit-material-page style="height: 100vh;">
<lit-material-top-app-bar slot="header">My App</lit-material-top-app-bar>
<lit-material-navigation-drawer slot="sidebar">
<!-- nav items -->
</lit-material-navigation-drawer>
<p>Main content goes here.</p>
</lit-material-page>
Install
npm install @lit-material/page @lit-material/tokensimport "@lit-material/page";Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide
API
<lit-material-page>
The outermost app-shell grid: a header row spanning the full width, and a
sidebar/main-content row below it. A pure layout primitive — it renders
whatever's slotted into header/sidebar (typically
lit-material-top-app-bar and lit-material-navigation-drawer or
-rail) without knowing anything about their specific behavior, so it has
no opinion on responsive collapsing, drawer toggling, or the sidebar's
width — that's already each of those components' own responsibility, and
duplicating it here would just create two sources of truth. main and
sidebar scroll independently of each other and of the header, which
stays put across both — the usual app-shell scrolling behavior — with no
JS required.
Slots
| Slot | Description |
|---|---|
header | The page header (masthead). |
sidebar | Primary navigation. |
| default | The main content. |
CSS parts
| Part | Description |
|---|---|
header | The header row's container. |
sidebar | The sidebar column's container. |
main | The main content column's container. |