Drawer Component: Combining features

[jmbishop97]

I would like to combine the Custom Size and Ignoring Clicks on Overlay features of the Drawer. I can get them to work individually but I'm stumped on how to combine the two.

Thx,
JBishop

[claviska]

That would look something like this. Example adapted from here.

<sl-drawer label="Drawer" class="drawer-no-overlay-dismiss" style="--size: 50vw;">
  This drawer will not be closed when you click outside of it.
  <sl-button slot="footer" type="primary">Close</sl-button>
</sl-drawer>

<sl-button>Open Drawer</sl-button>

<script>
  (() => {
    const drawer = document.querySelector('.drawer-no-overlay-dismiss');
    const openButton = drawer.nextElementSibling;
    const closeButton = drawer.querySelector('sl-button[type="primary"]');

    openButton.addEventListener('click', () => drawer.show());
    closeButton.addEventListener('click', () => drawer.hide());

    drawer.addEventListener('sl-overlay-dismiss', event => event.preventDefault());
  })();
</script>

You could also add the custom size to your stylesheet if you don't want to inline it with a style attribute.

sl-drawer {
  --size: 50vw;
}