Skies.ui元件 (Components)
Toast 通知
Skies.ui Toast：Radix 短通知，toast()／useToast、根版面 Toaster；堆疊與關閉行為。
Toast 通知
toast() 會把一則通知排進佇列，由 <Toaster />（請放在根 layout，與頁面內容並列）透過 Radix Toast 顯示在畫面角落。支援 title、description、variant（default | destructive）與 duration（毫秒，預設由 Provider 決定，單則可覆寫）。
即時試用
根版面
在 layout.tsx 內（例如 RootProvider 底下）加入 Toaster：
import { Toaster } from "@skies-ui/ui";
export default function RootLayout({ children }) {
return (
<html lang="zh-TW">
<body>
<RootProvider>
{children}
<Toaster />
</RootProvider>
</body>
</html>
);
}本文件站已在 apps/docs/src/app/layout.tsx 掛好 Toaster。
程式觸發
"use client";
import { Button, toast } from "@skies-ui/ui";
<Button
type="button"
onClick={() =>
toast({
title: "完成",
description: "操作已成功。",
})
}
>
顯示通知
</Button>toast() 回傳 { id, dismiss }，可手動關閉該則。
useToast
在 Client Component 內可訂閱目前列表（例如除錯或自訂 UI）：
"use client";
import { useToast } from "@skies-ui/ui";
const { toasts, toast, dismiss } = useToast();狀態以模組內 store 同步，不必再用 ToastProvider 包住整棵樹。
API 摘要
| 項目 | 說明 |
|---|---|
toast({ title?, description?, variant?, duration? }) | 推入一則通知；建議至少 title 或 description |
dismissToast(id) | 依 id 移除 |
useToast() | { toast, dismiss, toasts } |
Toaster | Radix Provider + Viewport + 依 store 渲染的項目 |
toastVariants | 需要自組 Toast 外觀時可匯出重用 |
Toaster、toast 相關 hook 皆為 Client 程式碼。