[筆記] 哎呀！不小心刻了一套 React UI 元件庫 21 – Drawer

近期為了熟悉元件 Component 的客製化，便參照「哎呀！不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Drawer 的實踐方法 ( 需搭配 Portal 一起使用 )。

---

[ Repo ]：https://github.com/andy922200/practice-storybook-react

---

內容

參數

isOpen – 抽屜是否顯示
placement – 抽屜的方向
animationDuration – 定義動畫完成的時間
children – 抽屜要顯示的東西
onClose – 觸發抽屜關閉

---

概念

1. 從外部控制狀態，點擊後就開啟。
2. 當點擊遮罩的時候，要觸發 onClose 來關閉抽屜。同時搭配 keyframes 的動畫效果，將 opacity 的屬性做改變
3. 開關時，要有動畫 (利用 keyframes 的變化， 由 0% -> 100% 或 100% -> 0% )
例如 rightStyle 就是改變 right 的屬性
4. 當動畫完成後，將整個元件消失掉
5. 遮罩要設定 position:fixed，以免當被遮住的內容可以 scroll 時，遮罩不會跟著動
6. animation-fill-mode 設定為 forwards，可以讓樣式停留在結束時的狀態

---

程式碼

https://github.com/andy922200/practice-storybook-react/commit/8f026e25d5807c5dbad28c07538b0993a5a1f7fd

---

相關文章

按讚加入粉絲團

延伸閱讀

• [筆記] 程式必修課！離散數學與演算法 – 21
• [筆記] Vue3 實作類似 Checkbox 的 Radio 元件
• [筆記] 程式必修課！離散數學與演算法 – 16
• [筆記] 程式必修課！離散數學與演算法 – 15
• [筆記] FullCalendar V6 eventsSet 觸發邏輯