-
Get Started
-
Events
-
Router / Navigation
-
Components
- App / Core
- Accordion / Collapsible
- Action Sheet / Actions
- Autocomplete
- Badge
- Block / Content Block
- Button
- Calendar / Datepicker
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Data Table
- Dialog
- Floating Action Button
- Form Data / Storage
- Grid / Layout Grid
- Icons
- Infinite Scroll
- Inputs / Form Inputs
- Lazy Load
- Link
- List View
- List Index
- Login Screen
- Messagebar
- Messages
- Navbar
- Notification
- Page
- Panel / Side Panels
- Photo Browser
- Picker
- Popover
- Popup
- Preloader
- Progressbar
- Pull to Refresh
- Radio
- Range Slider
- Searchbar
- Sheet Modal
- Smart Select
- Sortable List
- Statusbar
- Stepper
- Subnavbar
- Swiper
- Swipeout
- Tabs
- Timeline
- Toast
- Toggle
- Toolbar / Tabbar
- Video Intelligence (vi)
- View / Router
- Virtual List
-
Framework7 Icons
-
Styling
-
Dom7
-
Template7
-
Fast Clicks
-
Utilities
-
Plugins API
-
Custom Build
Framework7 Custom Build
Custom Build
Framework7 comes with Gulp builder that allows to build custom library version where you may include only required components/modules. We need the following:
-
Download and unzip Framework7 GitHub repository to local folder
-
Install Node.js (if not installed)
-
Install Gulp (if not installed) by executing the following command in terminal:
$ npm install --global gulp
-
Now, we need to install required dependencies. Go to the folder with downloaded and unzipped Framework7 repository and execute in terminal:
$ npm install
- Copy
scripts/build-config.js
file to some place in the downloaded folder and rename it let's say toscripts/my-config.js
- Open this file and remove components that you don't need or modify color theme and included colors:
/* my-config.js */ const config = { target: 'universal', rtl: false, // change to true to generate RTL styles // remove any components you don't need components: [ 'dialog', 'popup', 'login-screen', 'popover', 'actions', 'sheet', 'toast', 'preloader', 'progressbar', 'sortable', 'swipeout', 'accordion', 'contacts-list', 'virtual-list', 'timeline', 'tabs', 'panel', 'card', 'chip', 'form', 'input', 'checkbox', 'radio', 'toggle', 'range', 'stepper', 'smart-select', 'grid', 'calendar', 'picker', 'infinite-scroll', 'pull-to-refresh', 'lazy', 'data-table', 'fab', 'searchbar', 'messages', 'messagebar', 'swiper', 'photo-browser', 'notification', 'autocomplete', 'vi', 'typography', ], // include/exclude dark theme styles darkTheme: true, // include/exclude themes themes: [ 'ios', 'md', ], // modify colors ios: { themeColor: '#007aff', colors: { red: '#ff3b30', green: '#4cd964', blue: '#007aff', pink: '#ff2d55', yellow: '#ffcc00', orange: '#ff9500', gray: '#8e8e93', white: '#ffffff', black: '#000000', }, }, md: { themeColor: '#2196f3', colors: { red: '#f44336', green: '#4caf50', blue: '#2196f3', pink: '#e91e63', yellow: '#ffeb3b', orange: '#ff9800', gray: '#9e9e9e', white: '#ffffff', black: '#000000', }, }, }; module.exports = config;
-
Now, we are ready to build custom version of Framework7. We need to execute:
$ npm run build:prod -- --config scripts/my-config.js --output path/to/output/folder
-
That is all. Now you should see newly generated js and css files in specified output folder
-
If You are in hurry and want to see how its working then do follow step no 1 to step no 4
$ npm run build:dev
The result is available in build/ folder.
-
To build production version of Framework7:
$ npm run build:prod
Production version will be available in dist/ folder.
- Run Kitchen Sink with development environment
$ npm run dev
- Run Kitchen Sink with Production environment
$ npm run prod
- YOUR FIRST APPLICATION IS LIVE
Visit http://localhost:3000/kitchen-sink/ From Youre Browser
ES Modules
If you use bundler like Webpack or Rollup you can use only required Framework7 JS components without that build process and by importing only required components:
// Import core framework
import Framework7 from 'framework7';
// Import additional components
import Searchbar from 'framework7/dist/components/searchbar/searchbar.js';
import Calendar from 'framework7/dist/components/calendar/calendar.js';
import Popup from 'framework7/dist/components/popup/popup.js';
// Install F7 Components using .use() method on Framework7 class:
Framework7.use([Searchbar, Calendar, Popup]);
// Init app
var app = new Framework({/*...*/});
The following components are available for importing (all other components are part of the core):
Component | Path | |
---|---|---|
Dialog | framework7/dist/components/dialog/dialog.js |
|
Popup | framework7/dist/components/popup/popup.js |
|
LoginScreen | framework7/dist/components/login-screen/login-screen.js |
|
Popover | framework7/dist/components/popover/popover.js |
|
Actions | framework7/dist/components/actions/actions.js |
|
Sheet | framework7/dist/components/sheet/sheet.js |
|
Toast | framework7/dist/components/toast/toast.js |
|
Preloader | framework7/dist/components/preloader/preloader.js |
|
Progressbar | framework7/dist/components/progressbar/progressbar.js |
|
Sortable | framework7/dist/components/sortable/sortable.js |
|
Swipeout | framework7/dist/components/swipeout/swipeout.js |
|
Accordion | framework7/dist/components/accordion/accordion.js |
|
ContactsList | framework7/dist/components/contacts-list/contacts-list.js |
|
VirtualList | framework7/dist/components/virtual-list/virtual-list.js |
|
ListIndex | framework7/dist/components/list-index/list-index.js |
|
Timeline | framework7/dist/components/timeline/timeline.js |
|
Tabs | framework7/dist/components/tabs/tabs.js |
|
Panel | framework7/dist/components/panel/panel.js |
|
Card | framework7/dist/components/card/card.js |
|
Chip | framework7/dist/components/chip/chip.js |
|
Form | framework7/dist/components/form/form.js |
|
Input | framework7/dist/components/input/input.js |
|
Checkbox | framework7/dist/components/checkbox/checkbox.js |
|
Radio | framework7/dist/components/radio/radio.js |
|
Toggle | framework7/dist/components/toggle/toggle.js |
|
Range | framework7/dist/components/range/range.js |
|
Stepper | framework7/dist/components/stepper/stepper.js |
|
SmartSelect | framework7/dist/components/smart-select/smart-select.js |
|
Grid | framework7/dist/components/grid/grid.js |
|
Calendar | framework7/dist/components/calendar/calendar.js |
|
Picker | framework7/dist/components/picker/picker.js |
|
InfiniteScroll | framework7/dist/components/infinite-scroll/infinite-scroll.js |
|
PullToRefresh | framework7/dist/components/pull-to-refresh/pull-to-refresh.js |
|
Lazy | framework7/dist/components/lazy/lazy.js |
|
DataTable | framework7/dist/components/data-table/data-table.js |
|
Fab | framework7/dist/components/fab/fab.js |
|
Searchbar | framework7/dist/components/searchbar/searchbar.js |
|
Messages | framework7/dist/components/messages/messages.js |
|
Messagebar | framework7/dist/components/messagebar/messagebar.js |
|
Swiper | framework7/dist/components/swiper/swiper.js |
|
PhotoBrowser | framework7/dist/components/photo-browser/photo-browser.js |
|
Notification | framework7/dist/components/notification/notification.js |
|
Autocomplete | framework7/dist/components/autocomplete/autocomplete.js |
|
Vi | framework7/dist/components/vi/vi.js |
|
Typography | framework7/dist/components/typography/typography.js |