Ember CLI Framework7
Ember CLI Framework7 brings the great mobile development framework to Ember CLI. We try to integrate it as good as possible, since the framework itself is developed for use with Angular JS.
Please note, that this version is kind of a minimal viable product at the moment but we will keep improving it. If you are interested to support us, we will be excited to receive your pull requests.
npm install --save-dev ember-cli-framework7 ember g ember-cli-framework7
Import Framework7 css files
For Material Design add to ember-cli-build.js
For iOS Design add to ember-cli-build.js
After you installed Ember CLI Framework7, you can just start using it within your app. Please refer to the Framework7 documentation to see the markup structure.
a service is registered within the routes, controllers and components as
f7. Within the further documentation we will use the EmberScript
notation for explanations.
# EmberScript@f7alert 'Some alert'
# CoffeeScript@get'f7'alert 'Some alert'
We will also use the Emblem syntax to explain templates.
f7 service extends an instance of the Framework7 class, it
All this methods can be found in the Framework7 documentation.
In order to simplify the work with Framework7 within Ember, we added
some component and additional methods on the
= f7-page-container.navbar/ ....page-content/ ...
Framework7 requires to call
sizeNavbars after rendering a navbar in
order to ensure the title is centered. Therefore we included a component
creating the required markup for navbars and ensuring the title to be
= f7-navbar.lefta.link.icon-only href="#" click="toggleSidePanel"i.icon.icon-bars
For creating the side panel markup and knowing how to toggle it, please refer to the side panel documentation of Framework7.
In order to support opening and closing the side panel by swiping, you need to initialize the listeners within an initializer.
Framework7Initializer =name: 'framework7'after: 'framework7-service':Emberrunschedule 'afterRender'->containerlookup'service:framework7'initSwipePanels 'left'``
The preloader shows a loading mask as an overlay on the application. To see how it works, please refer to the preloader documentation of Framework7. In order to ensure to only show the preloader for long running requests, we added an delay option to it, so it only shows up if the request was not finished within the given amount of time.
# ...actions:: ->@f7showPreloader delay: 300@modelsavethen =>@f7hidePreloader@transitionToRoute 'index'=>@f7alert 'error'
Pull to refresh is supported by Framework7 but there is a bit work to do to make it run in Ember. In order to understand how pull-to-refresh works in Framework7, please refer to the pull-to-refresh documentation. To make it as easy as possible to integrate pull-to-refresh into your Ember application, we wrapped all the magic into the f7-page-content component.
.pages.page.navbar-fixed= f7-page-content onPullToRefresh="refresh".list-blockul/...
The refresh action gets a deferred promise passed as the first parameter which must either be resolved or rejected in order to close the pull-to-refresh indicator.
# ...actions::Emberrunlater this->deferredresolve1000
Infinite scroll is also supported by Framework7 and available through the f7-page-content component.
.pages.page.navbar-fixed= f7-page-content onInfiniteScroll="loadMore".list-blockul/...
The loadMore action gets a deferred promise as the first argument and the component as the second argument, so it's possible to detach the infinite scroll from the page if there is no more need for it.
# ...hasMoreData: trueactions::Emberrunlater this->if @get'hasMoreData'deferredresolveelsecomponentdetachInfiniteScroll1000
To use Swipeout, you need to include the
ApplicationViewMixin into the
application view. In order to animate removing the item use the
.list-blockul= each= f7-swipeout.swipeout-contenta.item-link.item-content href="#" click="'itemClicked' this".item-inner.item-title = this.swipeout-actions-lefta href="#"| Action 1a href="#"| Action 2.swipeout-actions-righta href="#"| Action 1a.swipeout-delete.swipeout-overswipe" href="#" click="delete this"| Delete
Use this component.
- searchList Selector of the search list (default: .list-block-search)
- searchIn Selector of the list item element to search in. If this is
set, Framework7 is filtering the data, if set to
undefined, Framework7 will do nothing and you have to take care of filtering the data. (default: undefined)
- action is called when the search term is changed and receives the new search term as a parameter.
= f7-search-bar action="filter"= f7-pull-to-refresh action="refresh".list-block.list-block-search.searchbar-foundul= each.item-inner.item-title = this
In order to use the sortable feature, add the required markup to the
list item and add the
ApplicationViewMixin to your application view.
Then enable the sorting by using the
f7 service and the methods
described in the Framework7 documentation.
Running the dummy app
The dummy app is a small example of Framework7 within an Ember CLI application.
git clone firstname.lastname@example.org:ember-mobile/ember-cli-framework7.git
- Visit your app at http://localhost:4200.
For more information on using ember-cli, visit http://www.ember-cli.com/.