First look at the Ionic Bottom Sheet Drawer with map - Ionic V6 Beta (React)
The announcement today of the v5 of the v6 beta for Ionic Framework, brought the addition of the Bottom Sheet or "Sheet Modal" component to our toolbox.
It's very simple to implement - all we need to do is supply breakpoints to the IonModal to create snap and swipe regions for the drawer. I thought I'd take a first look into it and show you how to implement it using React.
#############################
🔗 Ionic React Restaurant App (with code) - App in video
https://ionicreacthub.com/ionic-resta...
🔗 Ionic Bottom Sheet - Simple example and sticky
https://github.com/alanmontgomery/ion...
🔗 Pigeon Maps (React package)
https://pigeon-maps.js.org
🔗 IonModal - Sheet Modal docs
https://beta.ionicframework.com/docs/...
🎉 Reach out to me
/ 93alan
💙 UI Examples with Code and Live Demos
https://ionicreacthub.com
#############################
00:00 Introduction
00:20 Announcement Tweet
00:47 Sheet Modal Documentation
02:01 Show me the code!!
03:05 Implementation of Bottom Sheet
05:40 Bottom Sheet working!
06:17 Backdrop Opacity showcase
06:53 Outro
#ionic #capacitor #webnative #react #reactjs #ionicreact