BottomSheet

Bottom Sheet

  • draggable only by touch
  • max, start, and min are percentages from the top, so a max of 10 will let the sheet be dragged up to a height of 90%.

<Story knobs={{ max: 10, start: 40, contentHeight: 500, duration: 150 }} let:knobs={{ max, start, contentHeight, duration }} let:set

{#if show}
Title

Content

 {/if} {#if show}

Content

 {/if} {#if show}

Content

 {/if}

Notes

  • auto-resizes to fit content, up until max or start value (whichever is the larger restriction in terms of percentage distance from top) (janky on mobile, but see BottomSheet.svelte file history if ever wanting to look at the code)
  • It doesn't make sense to set the start to a greater value than max.
  • Press escape to close

Inspiration

Edit page in GitHub