Layout regions
There are four main regions. Page layout is controlled with a CSS grid. The components will automatically assign themselves to the correct region.
<!doctypehtml> <html lang=en> <header>...</header> <style>body:not(.mc-initiated) { visibility: hidden; }</style> <body> <mc-top-app-bar>...</mc-top-app-bar> <mc-navigation-drawer>...</mc-navigation-drawer> <mc-pane-container> <mc-pane>...</mc-pane> </mc-pane-container> <mc-navigation-bar>...</mc-navigation-bar> </body> </html> <!doctypehtml> <header>...</header> <div style="grid-area: header;">...</div> <div style="grid-area: navigation;">...</div> <main>...</main> <div style="grid-area: footer;">...</div>
Panes
Panes are used to group the UI
<!doctypehtml> <header>...</header> <mc-top-app-bar>...</mc-top-app-bar> <mc-navigation-drawer>...</mc-navigation-drawer> <mc-pane-container> <mc-pane>...</mc-pane> </mc-pane-container> <mc-navigation-bar>...</mc-navigation-bar> <mc-pane-container> <mc-pane>...</mc-pane> <mc-pane fixed>...</mc-pane> </mc-pane-container> <mc-pane-container resize> <mc-pane>...</mc-pane> <mc-pane>...</mc-pane> </mc-pane-container> <mc-pane-container default-percent=75> <mc-pane>...</mc-pane> <mc-pane>...</mc-pane> </mc-pane-container> <mc-pane-container remember resize> <mc-pane>...</mc-pane> <mc-pane>...</mc-pane> </mc-pane-container> <mc-pane-container scroll> <mc-pane>...</mc-pane> </mc-pane-container> <mc-pane-container resize> <mc-pane>...</mc-pane> <mc-pane collapsible>...</mc-pane> </mc-pane-container> <mc-pane-container> <mc-pane no-padding>...</mc-pane> </mc-pane-container>
Window sizes
Window size classes help create layouts that scale across devices of all shapes and sizes
Window size classes
- Compact
- Medium
- Exapnded
// Interact with mcDevice import { mcDevice } from '@theWebformaula/materially/services'; // import { mcDevice } from '@theWebformaula/materially'; console.log(mcDevice.state); // current state window.addEventListener('mcwindowstatechange', ({ detail }) => { console.log(detail.lastState); switch (detail.state) { case mcDevice.COMPACT; case mcDevice.MEDIUM; case mcDevice.EXPANDED; } });