Sheet React Component

Sheet Modal is a special overlay type. Such modal allows to create custom picker overlays with custom content.

Sheet Modal Components

There are following components included:

  • Sheet - sheet modal element

Sheet Props

NameTypeDefaultDescription
backdropbooleantrue

Enables Sheet modal backdrop (dark semi transparent layer behind)

colorsobject

Object with Tailwind CSS colors classes

colors.bgstring'bg-white dark:bg-black'

Sheet bg color

componentstring'div'

Component's HTML Element

openedbooleanfalse

Allows to open/close Sheet modal and set its initial state

onBackdropClickfunction(e)

Click handler on backdrop element

Examples

SheetModal.jsx
import React, { useState } from 'react';
import {
Page,
Navbar,
NavbarBackLink,
Sheet,
Block,
Button,
Toolbar,
Link,
} from 'tailwind-mobile/react';
export default function SheetModalPage() {
const [sheetOpened, setSheetOpened] = useState(false);
return (
<Page>
<Navbar
title="Sheet Modal"
/>
<Block strong className="space-y-4">
<p>
Sheet Modals slide up from the bottom of the screen to reveal more
content. Such modals allow to create custom overlays with custom
content.
</p>
<p>
<Button onClick={() => setSheetOpened(true)}>Open Sheet</Button>
</p>
</Block>
<Sheet
className="pb-safe"
opened={sheetOpened}
onBackdropClick={() => setSheetOpened(false)}
>
<Toolbar top>
<div className="left" />
<div className="right">
<Link toolbar onClick={() => setSheetOpened(false)}>
Done
</Link>
</div>
</Toolbar>
<Block>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum ad
excepturi nesciunt nobis aliquam. Quibusdam ducimus neque
necessitatibus, molestias cupiditate velit nihil alias incidunt,
excepturi voluptatem dolore itaque sapiente dolores!
</p>
<div className="mt-4">
<Button onClick={() => setSheetOpened(false)}>Action</Button>
</div>
</Block>
</Sheet>
</Page>
);
}
Code licensed under MIT.
2021 © Tailwind Mobile by nolimits4web.