Side sheets

Side sheets are surfaces containing supplementary content or actions to support tasks as part of a flow

Material Design Guidelines: Side sheets

Local

Contained inside of div

Toggle

Close button hide

back arrow

Modal

Scrim (backdrop)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Headline

cancel

save

        
  <div style="display: flex">
    <div>
      content...
    </div>
    <wfc-side-sheet id="one" open="${page.oneOpen}" onchange="page.oneOpen = this.open" onback="this.close();">
      <div slot="headline">Headline</div>
    
      <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        Duis
        aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    
      <wfc-button slot="action" onclick="this.parentElement.close()">cancel</wfc-button>
      <wfc-button slot="action" onclick="this.parentElement.close()">save</wfc-button>
    </wfc-side-sheet>
  </div>
  
  
  <!-- Attributes
      hideClose - Hide close icon button
      back - show back arrow
      modal - use modal
      scrom - show scrim (backdrop) when open
      onback - event attribute for back button
  -->
  <wfc-side-sheet open hideClose back modal scrim onback="this.close();"></wfc-side-sheet>

Global

Fill entire page (modal only)

Toggle

Inset

Scrim (backdrop)

Headline

One

Two

cancel

save

        
  <div style="display: flex">
    <div>
      content...
    </div>
    <wfc-side-sheet global modal>
      <div slot="headline">Headline</div>
    
      <h5>One</h5>
      <p>
        Lorem ipsum ...
      </p>
    
      <wfc-button slot="action" onclick="this.parentElement.close()">cancel</wfc-button>
      <wfc-button slot="action" onclick="this.parentElement.close()">save</wfc-button>
    </wfc-side-sheet>
  </div>

Top level

You can have a side sheet at the top level. This would be usfule as a general secondary content container.

        
  <body>
    <wfc-navigation-drawer></wfc-navigation-drawer>
    <page-content></page-content>
    <wfc-side-sheet>
      <div slot="headline">Headline</div>
    
      <h5>One</h5>
      <p>
        Lorem ipsum ...
      </p>
    
      <wfc-button slot="action" onclick="this.parentElement.close()">cancel</wfc-button>
      <wfc-button slot="action" onclick="this.parentElement.close()">save</wfc-button>
    </wfc-side-sheet>
    <wfc-bottom-app-bar class="auto-hide"></wfc-bottom-app-bar>
  </body>

Form with change detection

Invalid forms prevent form submission. Cancel button will prevent click actions and show dialog when form has changes.

Toggle

Headline

cancel

save

        
  <wfc-side-sheet id="three" onback="this.close();">
    <div slot="headline">Headline</div>
    <form id="test" method="dialog" onsubmit="this.parentElement.close();">
      <wfc-textfield label="Required" supporting-test="Required" required value="one"></wfc-textfield>
    </form>
    <wfc-button slot="action" form="test" type="cancel" onclick="this.parentElement.close()">cancel</wfc-button>
    <wfc-button slot="action" form="test" typ="submit">save</wfc-button>
  </wfc-side-sheet>