Side sheets

Local side sheet

Contained inside of 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.

Headline

cancel

save

<div style="display: flex">
  <div>
    content...
  </div>
  <mc-side-sheet id="one" open="${page.oneOpen}" onchange="page.oneOpen = this.open">
    <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>
  
    <mc-button slot="action" onclick="this.parentElement.close()">cancel</mc-button>
    <mc-button slot="action" onclick="this.parentElement.close()">save</mc-button>
  </mc-side-sheet>
</div>


<!-- Attributes
    hideClose - Hide close icon button
    back - show back arrow
    modal - use modal
    scrim - show scrim (backdrop) when open
    prevent-close - prevents close for scrim click and form buttons(submit, cancel)
    onback - event attribute for back button
-->
<mc-side-sheet
  open
  hide-close
  modal
  scrim
  prevent-close
  back
  onback="fired on back click"
></mc-side-sheet>

Global

Place side sheet at the top level of the document, from any page

Headline

One

Two

cancel

save

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

Predictive back

On campact window size (mobile) you can swipe / drag from the edge of the sheet to close it

Predictive back

swipe / drag from the edge to close on campact screen (mobile)

cancel

save

  <!-- You can disable predictive back by adding [predictive-back-disable] -->
  <div style="display: flex">
    <div>
      content...
    </div>
    <mc-side-sheet predictive-back-disable>
      <div slot="headline">Headline</div>
    
      <h5>One</h5>
      <p>
        Lorem ipsum ...
      </p>
    
      <mc-button slot="action" onclick="this.parentElement.close()">cancel</mc-button>
      <mc-button slot="action" onclick="this.parentElement.close()">save</mc-button>
    </mc-side-sheet>
  </div>

Form with change detection

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

The close button will show a "discard changes" dialog if there are unsubmitted changes
prevent-close will prevent the side-sheep from closeing on submit or cancel action buttons. Normally these would close the side-sheet.

Headline

cancel

save

<mc-side-sheet id="formsheet">
  <div slot="headline">Headline</div>
  <form id="test" method="dialog">
    <div style="font-size: 14px; margin-bottom: 8px;"><strong>Cancel</strong> checks for form changes and presents dialog</div>
    <div style="font-size: 14px; margin-bottom: 24px;"><strong>Save</strong> will validate the form</div>
    <div style="font-size: 14px; margin-bottom: 24px;"><strong>Close</strong> will disregard the form and close the sheet</div>
    <mc-textfield label="Required" supporting-text="Required" required value="one"
      outlined></mc-textfield>
  </form>
  <mc-button slot="action" onclick="formsheet.close()">close</mc-button>
  <mc-button slot="action" form="test" type="cancel" oncancel="console.log('cancel')">cancel</mc-button>
  <mc-button slot="action" form="test" type="submit">save</mc-button>
</mc-side-sheet>

Style

CSS variables that allow you override default values

/* Optional variables for overriding */

--mc-side-sheet-shape: var(--mc-shape-large);
--mc-side-sheet-container-color: var(--mc-surface);