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.
<!-- Components automatically assign to grid areas Grid areas are not visible if empty --> <!DOCTYPE html> <html lang="en"> <header>...</header> <!-- Hide content while site loads to prevent layout shifts --> <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> <!-- Custom grid area assignment --> <!DOCTYPE html> <html lang="en"> <header>...</header> <body> <div style="grid-area: header;">...</div> <div style="grid-area: navigation;">...</div> <main>...</main> <div style="grid-area: footer;">...</div> </body> </html>
Panes
Panes are used to group the UI
<!DOCTYPE html> <html lang="en"> <header>...</header> <body> <mc-top-app-bar>...</mc-top-app-bar> <mc-navigation-drawer>...</mc-navigation-drawer> <!-- [scroll] makes the panes scroll individually. Otherwise they will scroll as one. [default-percent] Percentage width of pane 1 [resize] Adds draggable bar between pane 1 and pane 2 --> <mc-pane-container resize default-percent="75" scroll> <mc-pane>...</mc-pane> <!-- You can have 2 panes Allow collaspable second pane <mc-pane collapsible>...</mc-pane> --> </mc-pane-container> <mc-navigation-bar>...</mc-navigation-bar> </body> </html> <!-- Fixed panes lock pane width based on content --> <mc-pane-container> <mc-pane>...</mc-pane> <mc-pane fixed>...</mc-pane> </mc-pane-container> <!-- Resizable panes --> <mc-pane-container resize> <mc-pane>...</mc-pane> <mc-pane>...</mc-pane> </mc-pane-container> <!-- Default percent based size --> <mc-pane-container default-percent="75"> <mc-pane>...</mc-pane> <!-- 75% --> <mc-pane>...</mc-pane> <!-- 25% --> </mc-pane-container> <!-- Remember resize state. Stored in local storage --> <mc-pane-container resize remember> <mc-pane>...</mc-pane> <mc-pane>...</mc-pane> </mc-pane-container> <!-- Make panes scroll in stead of document This means your document body will always be 100vh This also means top an bottom app bars will always show. --> <mc-pane-container scroll> <mc-pane>...</mc-pane> </mc-pane-container> <!-- Collapsable panes --> <mc-pane-container resize> <mc-pane>...</mc-pane> <mc-pane collapsible>...</mc-pane> <!-- You can mix collapsable and fixed <mc-pane fixed collapsible>...</mc-pane> --> </mc-pane-container> <!-- Remove padding --> <mc-pane-container> <mc-pane no-padding>...</mc-pane> </mc-pane-container>
// capture pane positions for storing // Panes will store their sized in localstorage also window.addEventListener('mcpaneresived', e => console.log(e.details));
Window sizes
Window size classes help create layouts that scale across devices of all shapes and sizes
Window size classes
- Compact
- Medium
- Exapnded
<!-- Class names are added to the body for the current window size --> <body class="window-compact"></body> <body class="window-medium"></body> <body class="window-exapnded"></body>
// 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; } });