元件 (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:覆寫 / 疊加自訂動畫 classoverlayClassName:自訂遮罩動畫或樣式
<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 | 右側 / 左側主體;支援 side、width、animation、animationDuration、animationClassName、overlayClassName |
SheetHeader | 標題區 |
SheetBody | 可捲動內容區 |
SheetFooter | 底部操作區 |
SheetTitle | 綁定 aria-labelledby |
SheetDescription | 綁定 aria-describedby |
SheetClose | 關閉面板;可 asChild |