Bottom Sheet

Нижняя шторка в стиле iOS: точки остановки, свайп, режим «подглядывания». Бесплатно, MIT · Окна и уведомления › Окна и панели

Установка

npx valyro-cli@latest add bottom-sheet

npx shadcn@latest add https://valyro.xyz/r/bottom-sheet.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { BottomSheet } from 'valyro-ui';

Пропсы

Prop	Type	Default
`open`	`boolean`		Controlled `open`; use with `onOpenChange`.
`defaultOpen`	`boolean`	`false`	Initial `open` when uncontrolled.
`onOpenChange`	`(open: boolean) => void`		Called with the new `open` when it changes.
`snapPoints`	`SnapPoint[]`	`['50%', '92%']`	Heights the sheet rests at, lowest first: px (`320` or `'320px'`) or a share of the available height (`'50%'`). Default `['50%', '92%']` — iOS medium and large detents.
`snap`	`number`		Index of the current snap point (controlled).
`defaultSnap`	`number`	`0`	Snap point the sheet opens at (default 0, the lowest).
`onSnapChange`	`(index: number) => void`		Called with the new `snap` when it changes.
`modal`	`boolean`	`true`	`true` (default): backdrop, focus trap, page scroll lock. `false`: a "peek" sheet that leaves the page interactive, like the drawer of a maps app.
`dismissible`	`boolean`	`true`	Can be closed by dragging below the lowest snap point, Escape or a backdrop press (default true).
`dimFrom`	`number`	`0`	Snap index at which the backdrop is fully dimmed; it fades in below that (default 0).
`title`	`ReactNode`		Heading in the draggable header; also the dialog's accessible name.
`description`	`ReactNode`		Text under the title; also the dialog's accessible description.
`showHandle`	`boolean`	`true`	Show the grab handle (default true).
`container`	`HTMLElement \| null`		Render inside this element (which should be `position: relative; overflow: hidden`) instead of over the viewport — for sheets inside a panel, map or device frame.
`initialFocusRef`	`RefObject<HTMLElement \| null>`		Element focused when a modal sheet opens (default: the sheet itself).
`labels`	`Partial<BottomSheetLabels>`		Overrides for the built-in English text; keys left out keep their defaults.
`children`	`ReactNode`		Sheet body; it scrolls only at the highest snap point, otherwise dragging it moves the sheet. In the compound form, a `BottomSheet.Trigger` and a `BottomSheet.Content` (with `.Header`, `.Title`, `.Description`, `.Body`, `.Close`).

Составные части

BottomSheet.Trigger (BottomSheetTrigger), BottomSheet.Content (BottomSheetContent), BottomSheet.Header (BottomSheetHeader), BottomSheet.Title (BottomSheetTitle), BottomSheet.Description (BottomSheetDescription), BottomSheet.Body (BottomSheetBody), BottomSheet.Close (BottomSheetClose)

Bottom Sheet

Установка

Пропсы

Составные части

Похожие компоненты