Skies.ui
元件 (Components)

Sheet 側邊面板

Skies.ui Sheet:右側滑出面板,表單/設定/詳情;Trigger、Header、Body、Footer 與關閉行為。

Sheet 側邊面板

Sheet 是適合 編輯表單檢視詳情 的側邊面板。它和 Modal 一樣支援 open / defaultOpen / onOpenChange,但內容會固定貼齊畫面邊緣,預設從 右側 出現。

預設用法

import {
  Button,
  Input,
  Label,
  Sheet,
  SheetBody,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
  Textarea,
} from "@skies-ui/ui";

export function Example() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="outline">編輯資料</Button>
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>編輯使用者</SheetTitle>
          <SheetDescription>右側表單面板</SheetDescription>
        </SheetHeader>
        <SheetBody>{/* form fields */}</SheetBody>
        <SheetFooter>
          <SheetClose asChild>
            <Button variant="outline">取消</Button>
          </SheetClose>
          <SheetClose asChild>
            <Button>儲存</Button>
          </SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  );
}

顯示詳情

若是詳情面板,可不放表單,直接放資訊區塊:

<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">查看詳情</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>訂單 #A-1024</SheetTitle>
      <SheetDescription>最近更新於 2026-04-06</SheetDescription>
    </SheetHeader>
    <SheetBody>
      <Card.Surface>
        <Card.Content className="p-4">
          <div className="grid gap-2 text-sm">
            <div>狀態:已付款</div>
            <div>收件人:王小明</div>
            <div>金額:NT$ 3,280</div>
          </div>
        </Card.Content>
      </Card.Surface>
    </SheetBody>
  </SheetContent>
</Sheet>

左側版本

可透過 side="left" 切換到左側:

<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">開啟左側面板</Button>
  </SheetTrigger>
  <SheetContent side="left">
    <SheetHeader>
      <SheetTitle>左側面板</SheetTitle>
    </SheetHeader>
  </SheetContent>
</Sheet>

自訂寬度

可透過 width prop 直接指定面板寬度,支援數字與 CSS 字串:

<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">開啟寬版面板</Button>
  </SheetTrigger>
  <SheetContent width={720}>
    <SheetHeader>
      <SheetTitle>寬版編輯面板</SheetTitle>
    </SheetHeader>
  </SheetContent>
</Sheet>
<SheetContent width="min(720px, 100vw)" />

自訂動畫

SheetContent 預設使用左右滑入動畫。你可以透過以下 props 自訂:

  • animation
    • "default":預設滑入滑出
    • "fade":淡入淡出
    • "none":不使用動畫
  • animationDuration:控制動畫時間(毫秒)
  • animationClassName:覆寫 / 疊加自訂動畫 class
  • overlayClassName:自訂遮罩動畫或樣式
<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">淡入面板</Button>
  </SheetTrigger>
  <SheetContent animation="fade" animationDuration={320}>
    <SheetHeader>
      <SheetTitle>淡入動畫</SheetTitle>
    </SheetHeader>
  </SheetContent>
</Sheet>
<SheetContent
  animationClassName="data-[state=open]:scale-100 data-[state=closed]:scale-95"
  overlayClassName="bg-black/30"
/>

受控開關

"use client";

import { useState } from "react";
import { Sheet, SheetContent } from "@skies-ui/ui";

export function ControlledSheet() {
  const [open, setOpen] = useState(false);

  return (
    <Sheet open={open} onOpenChange={setOpen}>
      <SheetContent />
    </Sheet>
  );
}

API 摘要

元件說明
Sheet根;open / defaultOpen / onOpenChange
SheetTrigger開啟面板;可 asChild
SheetContent右側 / 左側主體;支援 sidewidthanimationanimationDurationanimationClassNameoverlayClassName
SheetHeader標題區
SheetBody可捲動內容區
SheetFooter底部操作區
SheetTitle綁定 aria-labelledby
SheetDescription綁定 aria-describedby
SheetClose關閉面板;可 asChild

On this page