Transform your app's user experience with Bottom Sheet Pro - the most advanced and customizable bottom sheet plugin for Bubble. Create stunning mobile-first interfaces that feel native and professional. Simply assign an ID to any group, and instantly transform it into a smooth, interactive bottom sheet with just one click.

🔗 DEMO LINKS:

Live Demo
https://emotix-plugins.bubbleapps.io/version-test/bottom_sheet_pro

Editor View
https://bubble.io/page?id=emotix-plugins&tab=Design&name=bottom_sheet_pro&type=page


🚀 WHAT MAKES IT SPECIAL:

    - Zero coding required - works with any existing group
    - Drag-to-close with physics-based animations
    - Complete visual customization (colors, spacing, borders)
    - Professional handle with size and color options
    - Workflow actions for open/close operations
    - Event triggers for advanced automation
    - Multiple bottom sheets on the same page
    - Mobile-optimized touch interactions


💡 PERFECT FOR:

    - Mobile app interfaces
    - Settings panels and forms
    - Product details and shopping carts
    - User profiles and account options
    - Notification centers
    - Any content that needs elegant presentation


⚙️ HOW TO USE BOTTOM SHEET PRO:

📝 1. SETUP:
    • Add "Bottom Sheet Pro" element to your page
    • Create a group with your content
    • Set an ID for your group (e.g., "my-settings")
    • In Bottom Sheet Pro element, enter the Group ID: "my-settings"

🎨 2. CUSTOMIZATION:
    • Background Color: Choose your brand colors
    • Padding: Adjust spacing (Top/Bottom/Left/Right)
    • Border Radius: Set corner roundness
    • Max Height: Control maximum size (% of screen)
    • Handle: Show/hide, customize size and color
    • Overlay: Set background color and transparency
    • Animation Speed: Control open/close timing

⚡ 3. ADD ELEMENT ACTIONS:
    • For opening: Select any element → Element Actions → "Open Bottom Sheet"
    • For closing: Select any element → Element Actions → "Close Bottom Sheet"

🔧 4. ADVANCED FEATURES:
    • Use "Bottom sheet is opened" event to trigger other actions
    • Use "Bottom sheet is closed" event for cleanup or navigation
    • Users can drag down to close (mobile-friendly)
    • Support multiple bottom sheets per page

💡 TIPS:

Test on mobile devices for best experience
Use 80vh max height for optimal mobile viewing
Set handle color to match your design theme
Lower overlay opacity for subtle backgrounds