docs(skill): 更新 UI 統一規範,新增對話框滾動規則
This commit is contained in:
@@ -706,6 +706,32 @@ import { SearchableSelect } from "@/Components/ui/searchable-select";
|
||||
|
||||
---
|
||||
|
||||
## 11.4 對話框 (Dialog) 滾動與佈局
|
||||
|
||||
當對話框內容可能超出螢幕高度時(如長表單或詳細資料),**請勿使用 `ScrollArea`**,應直接在 `DialogContent` 使用原生的 `overflow-y-auto`。
|
||||
|
||||
**原因**:`ScrollArea` 在 Flex 佈局計算高度時容易失效或導致雙重滾動條。以及與原生捲動行為不一致。
|
||||
|
||||
```tsx
|
||||
// ❌ 錯誤:使用 ScrollArea 或固定高度計算
|
||||
<DialogContent className="max-w-3xl">
|
||||
<ScrollArea className="h-[500px]">
|
||||
{/* 內容 */}
|
||||
</ScrollArea>
|
||||
</DialogContent>
|
||||
|
||||
// ✅ 正確:直接使用 overflow-y-auto 與 max-h
|
||||
<DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
|
||||
<DialogHeader>...</DialogHeader>
|
||||
<form className="p-6">
|
||||
{/* 內容會自動滾動 */}
|
||||
</form>
|
||||
<DialogFooter>...</DialogFooter>
|
||||
</DialogContent>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 12. 檢查清單
|
||||
|
||||
在開發或審查頁面時,請確認以下項目:
|
||||
|
||||
Reference in New Issue
Block a user