F7Wrapper Kitchen Sink

F7Wrapper Kitchen Sink is the showcase application for the F7Wrapper plugin in DroidScript. It provides a comprehensive, interactive demonstration of modern, mobile-first user interface components, animations, navigation patterns, and gestures powered by Framework7 without needing a local web server (cfg.Serv). ---

Overview

F7Wrapper seamlessly bridges DroidScript and Framework7, enabling developers to build high-performance hybrid mobile applications using standard web technologies (HTML5, CSS3, JavaScript) directly on Android.

The Kitchen Sink includes over 70 interactive component pages, demonstrating everything from navigation drawers and expandable searchbars to charts, virtual lists, and custom themes.

Key Features and Components

Themes and Customization

• Dual Themes: Switch seamlessly between iOS and Material Design (MD) themes in real-time.
• Dark Mode: Instant toggle for dark and light UI modes.
• Color Themes: Customizable primary accent colors (Blue, Red, Green, Orange, Purple, etc.) with real-time preview.

Navigation and Layouts

• Appbar and Navbars: Large titles, transparent navbars, hide-on-scroll headers, and subnavbars.
• Side Panels: Floating, resizable, and swipeable drawer panels (Left and Right navigation).
• Tabs and Tabbar: Routable tabs, animated tabs, swipeable tabs, scrollable tabbars, and bottom tab navigation with badges.
• Page Transitions: Smooth slide, cover, and fade transitions with full Android hardware back button support.

Modals and Popups

• Dialogs: Alerts, Confirmations, Prompts, Login and Password dialogs, Preloaders, and vertical buttons styled with tonal/filled rounded buttons.
• Action Sheets: iOS-style action sheets with single and grouped actions.
• Popovers and Popups: Push popups, full-screen popups, and contextual popovers.
• Sheet Modals: Swipe-to-close bottom sheets and push sheet modals.

Lists and Data Display

• Lists and Treeviews: Inset lists, contact lists, accordion lists, swipeout actions, sortable reordering, and collapsible treeviews.
• Virtual List: High-performance rendering of large datasets (10,000+ items) with virtual DOM virtualization and integrated search filtering.
• Data Tables: Sortable, selectable, and paginated data tables.
• Cards and Expandable Cards: Rich content cards with expandable full-screen reveals.

Inputs and Form Controls

• Interactive Forms: Floating labels, outline inputs, clearable fields, and date/time pickers.
• Specialty Controls: Steppers, Range Sliders, Toggles, Segmented buttons, Color Pickers, and rich Text Editors.
• Autocomplete and Smart Select: Dynamic search dropdowns, multiple selections, and modal pickers.

Media and Visualization

• Swiper Slider: Touch-enabled carousels with 3D Cube, Coverflow, Flip, Fade, Parallax, zoom, and nested sliders.
• Charts and Gauges: Interactive Area charts, Pie charts, and animated SVG Gauges.
• Photo Browser: Full-screen image galleries with pinch-to-zoom and swipe-to-close.
• Skeleton Elements: Modern shimmer loading states for skeleton text, avatars, and cards.
• Icons: Out-of-the-box support for both Framework7 Icons and Material Symbols / Icons.