Search documentation v0.6.1

Sheet

Slide in dialog boxes from the edge of the screen

Source ↗️ Report Issue ↗️

Use Sheet components to create a dialog box that slide in from the edge of the screen, covering part of the main content, temporarily blocking interaction with the rest of the application until the sheet is closed. Use them for additional options, content preview or confirmation steps.

Preview
How to use Sheets in Astro
---
import { Button, Sheet } from 'webcoreui/astro'
---
<Button className="button">Open Sheet</Button>
<Sheet className="sheet">
Sheet with text only.
</Sheet>
<script>
import { modal } from 'webcoreui'
modal({
trigger: '.button',
modal: '.sheet'
})
</script>
How to use Sheets in Svelte
<script>
import { onMount } from 'svelte'
import { Button, Sheet } from 'webcoreui/svelte'
import { modal } from 'webcoreui'
let sheetInstance
onMount(() => {
sheetInstance = modal('.sheet')
})
</script>
<Button onClick={() => sheetInstance.open()}>
Open Sheet
</Button>
<Sheet className="sheet">
Sheet with text only.
</Sheet>
How to use Sheets in React
import React, { useState, useEffect } from 'react'
import { Button, Sheet } from 'webcoreui/react'
import { modal } from 'webcoreui'
const Component = () => {
const [sheetInstance, setSheetInstance] = useState(null)
useEffect(() => {
setSheetInstance(modal('.sheet'))
}, [])
return (
<React.Fragment>
<Button onClick={() => sheetInstance.open()}>
Open Sheet
</Button>
<Sheet className="sheet">
Sheet with text only.
</Sheet>
</React.Fragment>
)
}
export default Component

The Sheet component is an extended Modal component, therefore the API is equivalent to the Modal component. You can use the modal and closeModal utility functions to handle sheets.

Once you created a Modal component, you can trigger it by calling the modal function with either a selector that targets the Sheet component, or a configuration object. You can open sheets in two different ways:

  1. Open: Pass a configuration object with a trigger property that specifies a query selector for a trigger element, and pass a modal property to target the Sheet component. Clicking on the trigger element will now open the component. The Astro example follows this approach.
  2. Open via JS: Pass a query selector to the modal function that targets the component, and assign the function to a variable. You can call the open method on the assigned variable. This lets you trigger the component programmatically, for example, after a network request finishes. This approach is used in the Svelte/React examples above.

Titles

Sheets can be configured to have titles and subtitles by using the title and subTitle props:

<Sheet
title="Information"
subTitle="Before continuing, please read carefully"
>
<p>This sheet was created with the <code>title</code> and <code>subTitle</code> props.</p>
</Sheet>

Configuring Close

A sheet can be closed in four different ways. Using the close icon, clicking on the overlay, hitting the esc key on the keyboard, or calling the closeModal function from JavaScript. For example, the following sheet can only be closed with the “Close” button inside the sheet.

---
import { Button, Sheet } from 'webcoreui/astro'
---
<Button className="button">Show sheet with close button</Button>
<Sheet
className="sheet"
title="Alert"
subTitle="This sheet can only be closed with the button below."
showCloseIcon={false}
closeOnEsc={false}
closeOnOverlay={false}
>
<p>...</p>
<Button className="close">Close sheet</Button>
</Sheet>
<script>
import { modal, closeModal } from 'webcoreui'
modal({
trigger: '.button',
modal: '.sheet'
})
const closeButton = document.querySelector('.close')
closeButton.addEventListener('click', () => closeModal('.sheet'))
</script>
<script>
import { onMount } from 'svelte'
import { Button, Sheet } from 'webcoreui/svelte'
import { modal, closeModal } from 'webcoreui'
let sheetInstance
onMount(() => {
sheetInstance = modal('.sheet')
})
</script>
<Button onClick={() => sheetInstance.open()}>
Show sheet with close button
</Button>
<Sheet
className="sheet"
title="Alert"
subTitle="This sheet can only be closed with the button below."
showCloseIcon={false}
closeOnEsc={false}
closeOnOverlay={false}
>
<p>...</p>
<Button onClick={() => closeModal('.sheet')}>Close sheet</Button>
</Sheet>
import React, { useState, useEffect } from 'react'
import { Button, Sheet } from 'webcoreui/react'
import { modal, closeModal } from 'webcoreui'
const Component = () => {
const [sheetInstance, setSheetInstance] = useState(null)
useEffect(() => {
setSheetInstance(modal('.sheet'))
}, [])
return (
<React.Fragment>
<Button onClick={() => sheetInstance.open()}>
Show sheet with close button
</Button>
<Sheet
className="sheet"
title="Alert"
subTitle="This sheet can only be closed with the button below."
showCloseIcon={false}
closeOnEsc={false}
closeOnOverlay={false}
>
<p>...</p>
<Button onClick={() => closeModal('.sheet')}>Close sheet</Button>
</Sheet>
</React.Fragment>
)
}
export default Component

By default, every close option is enabled due to accessibility. Only disable these options if you’d like your users to take mandatory actions before closing the sheet.

Positions

A sheet can be configured to be displayed in four different positions: top, bottom, left, and right. By default, a Sheet component is displayed on the right side of the screen.

<Sheet
className="top-sheet"
title="Top"
subTitle="Before continuing, please read carefully"
position="top"
>
<p>This sheet was created with <code>position</code> set to <code>top</code>.</p>
</Sheet>
<Sheet
className="bottom-sheet"
title="Bottom"
subTitle="Before continuing, please read carefully"
position="bottom"
>
<p>This sheet was created with <code>position</code> set to <code>bottom</code>.</p>
</Sheet>
<Sheet
className="left-sheet"
title="Left"
subTitle="Before continuing, please read carefully"
position="left"
>
<p>This sheet was created with <code>position</code> set to <code>left</code>.</p>
</Sheet>
<Sheet
className="right-sheet"
title="Right"
subTitle="Before continuing, please read carefully"
>
<p>This sheet was created with the default position.</p>
</Sheet>

Sheet Callback

When a Sheet is created through the modal function, you can also optionally pass an onOpen and onClose property to the configuration object to execute code when the sheet is opened or closed:

modal({
trigger: '.trigger',
modal: '.sheet',
onOpen: ({ trigger, modal }) => {
console.log('Sheet opened')
},
onOpen: ({ trigger, modal }) => {
console.log('Sheet closed')
}
})

Both methods has access to an object with the following properties:

API

type SheetProps = {
title?: string
subTitle?: string
showCloseIcon?: boolean
closeOnEsc?: boolean
closeOnOverlay?: boolean
id?: string
className?: string
position?: 'left'
| 'top'
| 'bottom'
}
PropPurpose
title Set a title for the sheet.
subTitle Set a subtitle for the sheet.
showCloseIcon Shows a close icon in the top-right corner of the sheet. Defaults to true.
closeOnEsc Makes the sheet closable by hitting the esc key. Defaults to true.
closeOnOverlay Makes the sheet closable by clicking on the overlay. Defaults to true.
id Pass an ID for the sheet.
className Pass additional CSS classes for the sheet.
position Set the position of your sheet. Can be one of top, bottom, left.
JavaScript API
type ModalCallback = {
trigger: Element | null
modal: HTMLElement
}
type Modal = {
trigger: string
modal: string
onOpen?: (args: ModalCallback) => unknown
onClose?: (args: ModalCallback) => unknown
}
const modal: (config: Modal | string) => {
open: () => void
remove: () => void
} | void
const closeModal: (modal: string) => void
PropertyPurpose
config.trigger Query selector that targets the trigger element.
config.modal Query selector that targets the Sheet component.
config.onOpen Callback function executed after a sheet is opened.
config.onClose Callback function executed after a sheet is closed.
instance.open Open the sheet programmatically.
instance.remove Remove the event listeners created for the sheet.

Request improvement for this page

Sheet with text only. Close by clicking on the X icon, on the overlay, or hitting esc on your keyboard.

Information
Before continuing, please read carefully

This sheet was created with the title and subTitle props.

Alert
This sheet can only be closed with the button below.

The default close options have been disabled. You can only close the sheet by using the button below.

Top
Before continuing, please read carefully

This sheet was created with position set to top.

Bottom
Before continuing, please read carefully

This sheet was created with position set to bottom.

Left
Before continuing, please read carefully

This sheet was created with position set to left.

Right
Before continuing, please read carefully

This sheet was created with the default position.