Version 2.0

• Breaking change: no longer accepts baseClass prop. Use the class prop instead with the important (!) modifier for all tailwind classes.

• Added subtle overdrag resistance when dragging beyond max height

Diaper

A advanced bottom sheet component for Svelte5

See the demo.

Install

npm install @devantic/diaper

Components

Bottomsheet

The main component.

import Bottomsheet from '@devantic/diaper'

- or -

import { Bottomsheet } from '@devantic/diaper'

Detachedsheet

A convenience component - a thin wrapper around Bottomsheet with small margin and more rounded corners. Same props as Bottomsheet, but don't go nuts.

import { Detachedsheet } from '@devantic/diaper'

Fullsheet

A convenience component - a thin wrapper around Bottomsheet for sheets that cover the entire screen. Same props as Bottomsheet.

import { Fullsheet } from '@devantic/diaper'

Longsheet

For long content. The entire sheet scrolls in the viewport rather than just the content. Only needs the open prop.

import { Longsheet } from '@devantic/diaper'

Usage

See the code for the examples used in the demo.

Types and Props

export type BottomsheetProps = {
	open?: boolean
	height?: string
	maxHeight?: string
	snapPoints?: number[] | 'auto'
	initialIndex?: number
	canDragSheet?: boolean
	headerOverlaysContent?: boolean
	stickyHeader?: boolean
	openSticky?: boolean
	toggleOnHeaderTap?: boolean
	closeOnBackdropTap?: boolean
	flat?: boolean
	nonmodal?: boolean | number
	onclose?: () => void
	onsnap?: (progress: number) => void
	header?: Snippet
	children?: Snippet
	snapPoint1Content?: Snippet
	snapPoint2Content?: Snippet
	class?: string
	style?: string
}

export type LongsheetProps = {
	open?: boolean
	children?: Snippet
	class?: string
	style?: string
}

open - optional, bindable

A boolean value controlling the open/closed state of the bottom sheet. You can bind:open to it which is the prefered method of control. Or you can bind:this to the component instance and control it using the showModal() or show(), and close() methods - see Programmatic Control

height - optional

A string specifying the the height of the dialog. Defaults to maxHeight (93% of view height). Values can be specified using any valid css unit, e.g. '75%', '75vh', '400px', etc. A value of 'auto' will auto-size the sheet to fit content.

maxHeight - optional

Overrides the maxHeight of the sheet, defaults to 93% of the view height to accommodate the 3D stacked sheets effect. It is not recommended to change this unless you want a full screen sheet for example. Accepts any valid css unit like the height prop

snapPoints - optional

Accepts an array of numbers between 0 and 1 or the string value 'auto'. E.g. [0.25, 0.5, 0.75]. Values are relative to the height of the sheet and specified top down. I.e. 0.25 is 1/4 from the top of the sheet and 0.75 is 1/4 from the bottom.

The special value 'auto' will auto-calculate snappoints where possible. E.g. If there is a lot of space at the bottom of the sheet, a snappoint will be set to allow the sheet to be minimized to fit content.

Snappoints are also auto-calculated when this value is set to 'auto' and the sheet has dynamic sheet content. See snippets.

initialIndex - optional

An integer specifying the snappoint at which the sheet will open. For practical purposes, indexing starts at 1. E.g. given the array [0.25, 0.5. 0.75], 0.25 is at index 1, not 0!

If omitted, the sheet opens full height. Values outside the range will either open the sheet full height, or not open it.

canDragSheet - optional

A boolean specifying if the sheet can be dragged on the content. Defaults to true. The header is always draggable.

headerOverlaysContent - optional

Boolean. For scrollable sheets, if set to true, the content will scroll behind the header. I.e. the scrollable region takes up the full height of the dialog. A background blur is applied to the header. Defaults is false.

stickyHeader - optional

Boolean. If true the header will stick to the bottom of the page and can only be closed programatically. Default is false.

openSticky - optional

Boolean. When true, and stickyHeader is true, the sheet will open with the header in the sticky position 😉. Default is false.

toggleOnHeaderTap - optional

Boolean. Enables tap on header to minimize and maximize the sheet when stickyHeader is true. If stickyHeader is false, a header tap will close the sheet. The maximized state is either the full height, or, if set, the intial snapPoint. Default is false.

closeOnBackdropTap - optional

Boolean. Defaults to true.

flat - optional

Boolean. Don't scale the background. Defaults to false.

nonmodal - optional

Boolean or integer (snappoint index). For sheets that are not full height, allow the background to be interacted with while the sheet is open. If a snappoint index is specified, e.g. nonmodal={1} , the sheet will become nonmodal at that snappoint. Can be used to create a "detent" that sticks to the bottom of the screen. Defaults to false, i.e. modal.

onclose() - optional

A function to run when the sheet has completely closed, i.e. the close transition has completed.

onsnap() - optional

A function to run when the snappoint changes. Runs before the the transition to the new snappoint. Passes the snappoint as parameter, e.g. 0.25, not the index

Snippets

children() - required (unless you want a blank sheet)

The main content for the bottom sheet

header()- optional

The header content

snapPoint1Content() - optional

If specified, the content of the sheet will change to this content when dragged to the first snappoint.

snapPoint2Content()- optional

If specified, the content of the sheet will change to this content when dragged to the second snappoint.

Programmatic control

Use the bind:this directive to expose the instance methods:

• showModal()
• show()
• close()
• snapTo(index)

See programmaticcontrol.svelte for an example.

Styling

The sheet can be styled using tailwind or css by passing a class prop or style prop (or both) on the component instance.

Tailwind

You must use the important (!) modifier!

<Bottomsheet bind:open class="p-4! pt-0! bg-red-500!">...</Bottomsheet>

CSS

<Bottomsheet bind:open style="padding: 1rem; padding-top: 0; background-color: red;">...</Bottomsheet>

Other methods

Alternatively you can pass css classes to the component using these methods:

Scoped, the way svelte likes it!

You can pass css classes to style the sheet using the container method:

<div class="container">
	<Bottomsheet bind:open class="sheet">...</Bottomsheet>
</div>

<style>
	.container :global(.sheet) {
		padding: 1rem;
		padding-top: 0;
		background-color: red;
	}
</style>

External stylesheet

Or you can import a stylesheet

<script>
	import './sheet.css'
</script>

<div class="container">
	<Bottomsheet bind:open class="sheet">...</Bottomsheet>
</div>

sheet.css

.sheet {
	padding: 1rem;
	padding-top: 0;
	background-color: red;
}