Sheet

Выезжающая панель, открывающаяся со стороны экрана, на основе компонента dialog.

import { Button } from "@/components/ui/button";
import { Field, FieldLabel } from "@/components/ui/field";
import { Form } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import {
  Sheet,
  SheetClose,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetPanel,
  SheetPopup,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";

export default function Particle() {
  return (
    <Sheet>
      <SheetTrigger render={<Button variant="outline" />}>
        Открыть панель
      </SheetTrigger>
      <SheetPopup>
        <SheetHeader>
          <SheetTitle>Редактировать профиль</SheetTitle>
          <SheetDescription>
            Внесите изменения в профиль. Нажмите «Сохранить», когда закончите.
          </SheetDescription>
        </SheetHeader>
        <Form className="contents">
          <SheetPanel className="grid gap-4">
            <Field>
              <FieldLabel>Имя</FieldLabel>
              <Input defaultValue="Маргарита Уэлш" type="text" />
            </Field>
            <Field>
              <FieldLabel>Имя пользователя</FieldLabel>
              <Input defaultValue="@maggie.welsh" type="text" />
            </Field>
          </SheetPanel>
          <SheetFooter>
            <SheetClose render={<Button variant="ghost" />}>Отмена</SheetClose>
            <Button type="submit">Сохранить</Button>
          </SheetFooter>
        </Form>
      </SheetPopup>
    </Sheet>
  );
}

Установка


pnpm dlx shadcn@latest add @oracul/sheet

Использование

import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetPanel,
  SheetPopup,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"

<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetPopup>
    <SheetHeader>
      <SheetTitle>Are you absolutely sure?</SheetTitle>
      <SheetDescription>
        This action cannot be undone. This will permanently delete your account
        and remove your data from our servers.
      </SheetDescription>
    </SheetHeader>
    <SheetPanel>Content</SheetPanel>
    <SheetFooter>
      <SheetClose>Close</SheetClose>
    </SheetFooter>
  </SheetPopup>
</Sheet>

API

Sheet

Корневой компонент. Псевдоним для Dialog.Root из Base UI.

SheetTrigger

Кнопка-триггер, открывающая панель. Псевдоним для Dialog.Trigger из Base UI.

SheetPopup

Контейнер всплывающего окна, отображающий содержимое панели. Также экспортируется как SheetContent.

Свойство	Тип	По умолчанию	Описание
`side`	`"right" \| "left" \| "top" \| "bottom"`	`"right"`	Управляет тем, с какой стороны экрана открывается панель
`variant`	`"default" \| "inset"`	`"default"`	Управляет стилем панели. `inset` добавляет отступы вокруг панели на десктопных экранах
`showCloseButton`	`boolean`	`true`	Если true, отображает кнопку закрытия в правом верхнем углу
`closeProps`	`Dialog.Close.Props`	-	Свойства, передаваемые внутренней кнопке закрытия; удобно для переопределения `aria-label`
`portalProps`	`Dialog.Portal.Props`	-	Свойства, передаваемые внутреннему порталу (`keepMounted`, `container` и т. д.); см. API портала Dialog в Base UI

Пример:

// Right side sheet (default)
<SheetPopup side="right">
  ...
</SheetPopup>
 
// Left side sheet
<SheetPopup side="left">
  ...
</SheetPopup>
 
// Top sheet
<SheetPopup side="top">
  ...
</SheetPopup>
 
// Bottom sheet
<SheetPopup side="bottom">
  ...
</SheetPopup>
 
// Sheet with inset variant
<SheetPopup side="right" variant="inset">
  ...
</SheetPopup>

SheetHeader

Контейнер для заголовка и описания панели. Поддерживает свойство render для полиморфной композиции (например, render={<Link href="/" />}).

SheetFooter

Секция футера для кнопок действий. Поддерживает свойство render для полиморфной композиции.

Свойство	Тип	По умолчанию	Описание
`variant`	`"default" \| "bare"`	`"default"`	Управляет стилизацией футера. `default` включает границу и фон, `bare` убирает их

SheetTitle

Компонент заголовка. Псевдоним для Dialog.Title из Base UI.

SheetDescription

Компонент описания. Псевдоним для Dialog.Description из Base UI.

SheetPanel

Прокручиваемый контейнер содержимого. Автоматически оборачивает содержимое в компонент ScrollArea. Поддерживает свойство render для полиморфной композиции.

Свойство	Тип	По умолчанию	Описание
`scrollFade`	`boolean`	`true`	Если true, показывает эффект затухания у краёв прокрутки

Пример:

<SheetPanel>
  {/* Long content that will scroll if it exceeds the sheet height */}
  <div>...</div>
</SheetPanel>

import { Button } from "@/components/ui/button";
import { Field, FieldLabel } from "@/components/ui/field";
import { Form } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import {
  Sheet,
  SheetClose,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetPanel,
  SheetPopup,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";

export default function Particle() {
  return (
    <Sheet>
      <SheetTrigger render={<Button variant="outline" />}>
        Открыть панель
      </SheetTrigger>
      <SheetPopup variant="inset">
        <SheetHeader>
          <SheetTitle>Редактировать профиль</SheetTitle>
          <SheetDescription>
            Внесите изменения в профиль. Нажмите «Сохранить», когда закончите.
          </SheetDescription>
        </SheetHeader>
        <Form className="contents">
          <SheetPanel className="grid gap-4">
            <Field>
              <FieldLabel>Имя</FieldLabel>
              <Input defaultValue="Маргарита Уэлш" type="text" />
            </Field>
            <Field>
              <FieldLabel>Имя пользователя</FieldLabel>
              <Input defaultValue="@maggie.welsh" type="text" />
            </Field>
          </SheetPanel>
          <SheetFooter>
            <SheetClose render={<Button variant="ghost" />}>Отмена</SheetClose>
            <Button type="submit">Сохранить</Button>
          </SheetFooter>
        </Form>
      </SheetPopup>
    </Sheet>
  );
}

Боковые панели

import { Button } from "@/components/ui/button";
import {
  Sheet,
  SheetDescription,
  SheetHeader,
  SheetPanel,
  SheetPopup,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";

export default function Particle() {
  return (
    <div className="flex flex-wrap gap-2">
      <Sheet>
        <SheetTrigger render={<Button variant="outline" />}>
          Открыть справа
        </SheetTrigger>
        <SheetPopup showCloseButton={false}>
          <SheetHeader>
            <SheetTitle>Справа</SheetTitle>
            <SheetDescription>Правая сторона экрана.</SheetDescription>
          </SheetHeader>
          <SheetPanel>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
              reprehenderit in voluptate velit esse cillum dolore eu fugiat
              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
              sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
          </SheetPanel>
        </SheetPopup>
      </Sheet>
      <Sheet>
        <SheetTrigger render={<Button variant="outline" />}>
          Открыть слева
        </SheetTrigger>
        <SheetPopup showCloseButton={false} side="left">
          <SheetHeader>
            <SheetTitle>Слева</SheetTitle>
            <SheetDescription>Левая сторона экрана.</SheetDescription>
          </SheetHeader>
          <SheetPanel>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
              reprehenderit in voluptate velit esse cillum dolore eu fugiat
              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
              sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
          </SheetPanel>
        </SheetPopup>
      </Sheet>
      <Sheet>
        <SheetTrigger render={<Button variant="outline" />}>
          Открыть сверху
        </SheetTrigger>
        <SheetPopup showCloseButton={false} side="top">
          <SheetHeader>
            <SheetTitle>Сверху</SheetTitle>
            <SheetDescription>Верхняя часть экрана.</SheetDescription>
          </SheetHeader>
          <SheetPanel>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
              reprehenderit in voluptate velit esse cillum dolore eu fugiat
              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
              sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
          </SheetPanel>
        </SheetPopup>
      </Sheet>
      <Sheet>
        <SheetTrigger render={<Button variant="outline" />}>
          Открыть снизу
        </SheetTrigger>
        <SheetPopup showCloseButton={false} side="bottom">
          <SheetHeader>
            <SheetTitle>Снизу</SheetTitle>
            <SheetDescription>Нижняя часть экрана.</SheetDescription>
          </SheetHeader>
          <SheetPanel>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
              reprehenderit in voluptate velit esse cillum dolore eu fugiat
              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
              sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
          </SheetPanel>
        </SheetPopup>
      </Sheet>
    </div>
  );
}

На этой странице

Установка Использование API Sheet SheetTrigger SheetPopup SheetHeader SheetFooter SheetTitle SheetDescription SheetPanel SheetClose SheetPortal SheetBackdrop Примеры Панель с отступами (inset)Боковые панели