北京
Sheet組件會從屏幕邊緣滑入，不像模態框那樣在屏幕中央彈出。你可能在電商網站打開購物車時用過它，也可能在點擊篩選圖標后看到選項從側面滑出。
要讓一個Sheet在包含長內容時正確滾動、確保頭部和底部固定位置、并且在管理表單或計數器狀態時不出現bug，可不僅僅是給div加個滑動動畫這么簡單。
這篇教程會帶你用shadcn/ui和基于Base UI原語的Shadcn Space構建兩個可實際投入使用的Sheet組件。第一個是帶數量調節、商品刪除和實時小計的購物車側滑面板。第二個是包含類別復選框、價格區間滑塊、星級評分和活躍篩選計數的篩選面板。
開始之前需要準備好環境：Node.js 18或更高版本、在項目中已初始化shadcn/ui（運行npx shadcn@latest init），以及React和TypeScript的基礎知識。如果還沒初始化，在項目根目錄執行那條命令并按提示操作即可。
組件來自Shadcn Space注冊表，這是一個開源的shadcn/ui組件和UI塊集合。每個組件都同時支持Radix UI和Base UI原語，還提供復制提示功能，你可以把組件規范粘貼到v0、Lovable或Bolt這類工具里快速搭建原型。
購物車面板（sheet-03）是一個從右側滑入的面板，帶有購物車圖標觸發器和商品數量角標。它支持每個商品數量的增減和刪除，會根據購物車狀態實時計算小計和總價。頭部和底部固定，中間是商品列表的可滾動區域。
篩選面板（sheet-04）從左側滑入，提供多選的類別復選框、帶實時最小最大值顯示的價格區間滑塊、單選星級評分篩選器，以及活躍篩選數量角標和一個不清空面板的"清除全部"操作按鈕。
安裝組件前，需要在項目的components.json文件中注冊Shadcn Space注冊表。打開該文件，在registries字段中添加@shadcn-space對應的URL地址。這樣shadcn CLI才能解析帶@shadcn-space/前綴的組件。如果跳過這一步，后續的安裝命令會失敗。
你可以在Shadcn Sheet組件庫中瀏覽完整的組件集合。如果偏好可視化操作，Shadcn Space還提供了MCP服務器，你可以直接從編輯器里瀏覽和安裝組件，前提是你的工作流使用了MCP工具鏈。
特別聲明：以上內容(如有圖片或視頻亦包括在內)為自媒體平臺“網易號”用戶上傳并發布，本平臺僅提供信息存儲服務。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
