Sheet

Slide in dialog boxes from the edge of the screen

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

---
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>

<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>

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:

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.
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:

trigger: The DOM node for the trigger element. This can be null if the sheet was created without the trigger property, and instead, sheetInstance.open is used as a means to reveal the sheet.
modal: The DOM node for the Sheet component.

API

type SheetProps = {
    title?: string
    subTitle?: string
    showCloseIcon?: boolean
    closeOnEsc?: boolean
    closeOnOverlay?: boolean
    id?: string
    className?: string
    position?: 'left'
        | 'top'
        | 'bottom'
}

Prop	Purpose
`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`.

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

Property	Purpose
`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.

<- Select Popover ->

Request improvement for this page