Offcanvas

Offcanvas utilities to use with the dialog and popover component.

Source file: src/css/offcanvas.css
View on GitHub: https://github.com/pmbrown/ming-css/blob/main/src/css/offcanvas.css

Included with:

ming.css
ming.min.css
ming.mono.css
ming.mono.min.css

Dual-purpose (anchor)

The offcanvas utilities work with both the dialog and popover component styles.

Dialogs (anchor)

Example HTML

<button commandfor="dialog-start" command="show-modal">Dialog start</button>
  <dialog id="dialog-start" class="dialog offcanvas-start">
  <h3>Heading text</h3>
  <p>Far far away behind the word mountains there lived the blind texts.</p>
  <button commandfor="dialog-start" command="close">Close</button>
</dialog>

<button commandfor="dialog-end" command="show-modal">Dialog end</button>
  <dialog id="dialog-end" class="dialog offcanvas-end">
  <h3>Heading text</h3>
  <p>Far far away behind the word mountains there lived the blind texts.</p>
  <button commandfor="dialog-end" command="close">Close</button>
</dialog>

<button commandfor="dialog-top" command="show-modal">Dialog top</button>
  <dialog id="dialog-top" class="dialog offcanvas-top">
  <h3>Heading text</h3>
  <p>Far far away behind the word mountains there lived the blind texts.</p>
  <button commandfor="dialog-top" command="close">Close</button>
</dialog>

<button commandfor="dialog-bottom" command="show-modal">Dialog bottom</button>
  <dialog id="dialog-bottom" class="dialog offcanvas-bottom">
  <h3>Heading text</h3>
  <p>Far far away behind the word mountains there lived the blind texts.</p>
  <button commandfor="dialog-bottom" command="close">Close</button>
</dialog>

Popovers (anchor)

Example HTML

<button popovertarget="popover-start">Popover start</button>
<div class="popover offcanvas-start" id="popover-start" popover>
  <h3>Heading text</h3>
  <p>Far far away behind the word mountains there lived the blind texts.</p>
  <button popovertarget="popover-start" popovertargetaction="hide">Close</button>
</div>

<button popovertarget="popover-end">Popover end</button>
<div class="popover offcanvas-end" id="popover-end" popover>
  <h3>Heading text</h3>
  <p>Far far away behind the word mountains there lived the blind texts.</p>
  <button popovertarget="popover-end" popovertargetaction="hide">Close</button>
</div>

<button popovertarget="popover-top">Popover top</button>
<div class="popover offcanvas-top" id="popover-top" popover>
  <h3>Heading text</h3>
  <p>Far far away behind the word mountains there lived the blind texts.</p>
  <button popovertarget="popover-top" popovertargetaction="hide">Close</button>
</div>

<button popovertarget="popover-bottom">Popover bottom</button>
<div class="popover offcanvas-bottom" id="popover-bottom" popover>
  <h3>Heading text</h3>
  <p>Far far away behind the word mountains there lived the blind texts.</p>
  <button popovertarget="popover-bottom" popovertargetaction="hide">Close</button>
</div>

The rest of the property values are inherited from the component styles so if using the color classes for each modal type the offcanvas styles will inherit the colors.

Previous: Popovers

Next: Theme switch