Welcome Getting started Layout styles github-circle-black-transparent Source
Components
Badges
App bars
Bottom app bars Top app bars
Buttons
Common buttons FAB Icon buttons Segmented buttons
Cards Carousel Checkboxes Chips Date pickers Dialogs Forms Icons Lists Menus Navigation Progress indicators Pull to refresh Radios Search Selects
Sheets
Bottom sheets Side sheets
Sliders Snackbars Switches Tabs Text fields Time pickers Tooltips Utilities
home apps Buttons palette Two
Materially
github-circle-black-transparent

Layout

Layout is the visual arrangement of elements on the screens
Material Design Guidelines: Layout

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;
  }
});
            
menu home apps Get started