_Index
Learn Framework7 step by step. This guide covers UI components, routing, theming, and building mobile-optimized web apps and PWAs with practical examples.
Framework7 is a mobile-first framework for building iOS and Android style web applications. It provides native-like UI components, smooth animations, and a routing system designed for mobile app experiences inside a browser or as a PWA.
Published Topics
Framework7 Advanced List Views — Swipe Actions, Sortable, and Virtual Lists
Master Framework7 list view features: swipe-to-delete/actions, drag-to-sort, virtual lists for thousands of items, and accordion lists.
✓ LiveFramework7 Tabs and Tab Bars — Tab Layouts, Animated Transitions, and Routable Tabs
Learn Framework7 tabs: tab bar integration, animated transitions, routable tabs with history, and nested tabs.
✓ LiveFramework7 Smart Select — Picker-Based Form Selection
Learn Framework7 Smart Select: automatic picker/modal selection from lists, grouped options, and custom picker rendering.
✓ LiveFramework7 Icons — Framework7 Icons, Custom Icons, and SVG Integration
Learn icon usage in Framework7: built-in icon sets, custom SVG integration, icon colors and sizes, and icon fonts.
✓ LiveFramework7 Request Module — AJAX, File Upload, and Data Loading
Learn Framework7's request module: HTTP requests, file upload with progress, form data, and response caching.
✓ LiveFramework7 Notifications and Toasts — Alerts, Push Notifications, and Snackbars
Learn Framework7 notification components: modal alerts, toast messages, push notification simulation, and snackbars.
✓ LiveFramework7 Introduction — Mobile-First Framework for iOS and Android Apps
Learn Framework7 fundamentals: mobile-first UI components, iOS and Android themed widgets, routing system, DOM manipulation, and building native-like mobile web applications with Framework7.
✓ LiveFramework7 Views and Pages — Navigation, Lifecycle, and Dynamic Content
Learn Framework7 views and pages: view management, page lifecycle events, dynamic page loading, page parameters, embedded views, and tab-based navigation within Framework7 mobile apps.
✓ LiveFramework7 Navigation and Router — URL Routing, History, and Transitions
Learn Framework7 routing: route configuration, URL parameters, navigation methods, route guards, page transitions, history management, and lazy loading routes in Framework7 mobile apps.
✓ LiveFramework7 Toolbar and Tabbar — Bottom Navigation, Icons, and Badges
Learn Framework7 toolbars and tabbars: bottom navigation bars, tab links with icons, badge notifications, tab bar styling, animated tab switching, and toolbar integration with views.
✓ LiveFramework7 List View — Contacts, Media Lists, Swipe Actions, and Grouping
Learn Framework7 list views: simple lists, media lists, contact lists, swipe actions, accordion lists, grouping with dividers, virtualization for large lists, and list item customization.
✓ LiveFramework7 Form Elements — Input Fields, Toggles, Sliders, and Smart Select
Learn Framework7 form elements: text inputs, textarea, toggles, sliders, radio buttons, checkboxes, smart select lists, date pickers, form validation, and data submission in mobile forms.
✓ LiveFramework7 Cards and Panels — Content Containers, Expansion, and Side Panels
Learn Framework7 cards and panels: card components with headers and footers, expandable cards, left and right side panels, panel swipe gestures, and panel events for mobile app layouts.
✓ LiveFramework7 Modals and Popups — Dialogs, Action Sheets, Toasts, and Popovers
Learn Framework7 modals and popups: dialog alerts and confirms, action sheets, popovers, toast notifications, progress dialogs, login modals, and custom popup windows for mobile interactions.
✓ LiveFramework7 Side Panels Deep Dive — Advanced Navigation, Gestures, and Behaviors
Learn advanced Framework7 side panel techniques: panel sizing, swipe thresholds, multiple panels, panel events for navigation, panel animations, platform-specific panel behaviors, and responsive panel layouts.
✓ LiveFramework7 Data Table and Grid — Tabular Data, Sorting, and Responsive Layout
Learn Framework7 data tables: table components with sorting, pagination, row selection, striped rows, responsive collapse, and CSS grid layouts for organizing mobile data displays.
✓ LiveFramework7 Color Themes — Built-in Colors, CSS Variables, and Dynamic Theming
Learn Framework7 color themes: applying built-in color themes, custom CSS variable overrides, dynamic theme switching, dark mode, platform-specific theming, and theme persistence in mobile apps.
✓ LiveFramework7 Animations and Transitions — Motion Effects, Page Transitions, and Custom Animations
Learn Framework7 animations: built-in page transitions, custom CSS animations, parallax effects, animated page elements, transition events, smooth scrolling, and performance-optimized motion in mobile apps.
✓ LiveFramework7 PWA and Service Workers — Offline Support and App Installation
Learn Framework7 PWA features: service worker registration, caching strategies, offline fallback, installable app manifest, push notifications, background sync, and PWA deployment for mobile web apps.
✓ LiveFramework7 Storage and State Management — Data Persistence and App State
Learn Framework7 storage and state management: Framework7 Store reactive state, localStorage wrapper, app data sharing between views, form persistence, and state restoration in mobile apps.
✓ LiveFramework7 Complete Project — Building a Mobile App from Scratch
Build a complete Framework7 mobile application: plan architecture, implement views with routing, add bottom tab navigation, manage state with Store, implement PWA features, and deploy to production.
✓ LiveAll 21 topics in _Index are published.