The iOS-Inspired Bottom Sheet is a high-performance, gesture-driven UI component designed for both Mobile and Web applications. It mimics the native "pull-up" cards found in iOS (such as in Apple Maps or Apple Music), providing a sleek and space-saving way to display additional content, filters, or details without navigating away from the current screen.
Gesture-First Interaction: Built with advanced pointer-event listeners, allowing users to fluidly drag the sheet up to expand or down to collapse.
Persistent Peek State: The component maintains a 60px "handle bar" area at the bottom of the screen, ensuring users always know more content is available.
Performance Optimized: Leverages hardware-accelerated CSS transitions (transform: translateY) to ensure a buttery-smooth 60 FPS experience even on lower-end mobile devices.
transform: translateY
Adaptive & Responsive: Automatically switches between a full-width mobile layout and a centered, fixed-width floating panel for Desktop/Tablet views.
Dynamic Content Support: Designed to house any OutSystems content, from simple text and forms to complex data tables and lists, with built-in internal scrolling.
Smart Overlay: Features a backdrop overlay that dynamically darkens as the sheet is pulled up, focusing the user's attention on the active content.
Zero-Dependency: Uses vanilla JavaScript and CSS, making it lightweight and easy to integrate into any OutSystems Reactive or Mobile app.
State Synchronization: Includes built-in hooks (IsActive parameter) to sync the physical position of the sheet with your application's logic.
IsActive
Anti-Flicker Logic: Implements an initialization delay to ensure complex data (like Aggregates or Data Actions) is rendered before the sheet calculates its final position.
Data Drills: Showing detailed information about a selected row in a table.
Filters: Housing complex search filters that stay out of the way until needed.
Quick Actions: Displaying a menu of actions related to the main screen content.
Checkouts/Forms: Providing a focused area for user input without losing the background context.