Skip to content

_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.

Back to Home

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.

✓ Live

Framework7 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.

✓ Live

Framework7 Smart Select — Picker-Based Form Selection

Learn Framework7 Smart Select: automatic picker/modal selection from lists, grouped options, and custom picker rendering.

✓ Live

Framework7 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.

✓ Live

Framework7 Request Module — AJAX, File Upload, and Data Loading

Learn Framework7's request module: HTTP requests, file upload with progress, form data, and response caching.

✓ Live

Framework7 Notifications and Toasts — Alerts, Push Notifications, and Snackbars

Learn Framework7 notification components: modal alerts, toast messages, push notification simulation, and snackbars.

✓ Live

Framework7 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.

✓ Live

Framework7 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.

✓ Live

Framework7 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.

✓ Live

Framework7 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.

✓ Live

Framework7 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.

✓ Live

Framework7 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.

✓ Live

Framework7 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.

✓ Live

Framework7 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.

✓ Live

Framework7 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.

✓ Live

Framework7 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.

✓ Live

Framework7 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.

✓ Live

Framework7 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.

✓ Live

Framework7 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.

✓ Live

Framework7 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.

✓ Live

Framework7 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.

✓ Live

All 21 topics in _Index are published.