Dialog

Модальные окна. Бесплатно, MIT · Окна и уведомления › Окна и панели

Установка

npx valyro-cli@latest add dialog

npx shadcn@latest add https://valyro.xyz/r/dialog.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { Dialog } 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.
`title`	`ReactNode`		Heading; becomes the dialog's accessible name.
`description`	`ReactNode`		Supporting text; becomes the dialog's accessible description.
`footer`	`ReactNode`		Action bar under the body, usually buttons.
`size`	`'sm' \| 'md' \| 'lg' \| 'full'`	`'md'`	On phones (≤ 480px) every size becomes a bottom sheet, except small Glass dialogs, which stay iOS alerts.
`showClose`	`boolean`	`true`	Show the × button (default true).
`closeLabel`	`string`	`'Close'`	Accessible name of the × button.
`children`	`ReactNode`		Body content; it scrolls between the header and the footer when it overflows. In the compound form, a `Dialog.Trigger` and a `Dialog.Content` (with `Dialog.Header`, `.Title`, `.Description`, `.Body`, `.Footer`, `.Close`).
`closeOnOverlayClick`	`boolean`
`closeOnEscape`	`boolean`
`initialFocusRef`	`RefObject<HTMLElement \| null>`
`returnFocusRef`	`RefObject<HTMLElement \| null>`		Where focus goes on close when the element that opened the modal is no longer on the page (a deleted row's menu). Without it, focus moves to the first Tab stop near where that element was.
`layerClassName`	`string`		Class for the full-screen layer (positioning wrapper).
`animation`	`'default' \| 'spring'`		`spring`: the panel springs in (centred panels drop in from `from` with a slight tilt, edge panels slide in critically damped). `default`: the theme's own enter and exit.
`from`	`'top' \| 'bottom' \| 'left' \| 'right'`		Side a centred panel springs in from with `animation="spring"` (default `top`).

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

Dialog.Trigger (DialogTrigger), Dialog.Content (DialogContent), Dialog.Header (DialogHeader), Dialog.Title (DialogTitle), Dialog.Description (DialogDescription), Dialog.Body (DialogBody), Dialog.Footer (DialogFooter), Dialog.Close (DialogClose)

Dialog

Установка

Пропсы

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

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