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. 檢查清單
|
## 12. 檢查清單
|
||||||
|
|
||||||
在開發或審查頁面時,請確認以下項目:
|
在開發或審查頁面時,請確認以下項目:
|
||||||
|
|||||||
Reference in New Issue
Block a user