roaringbits / ember-cli-f7

Ember CLI plugin wrapping Framework7

Ember-cli-f7

Ember CLI Framework7 addon

Installation

• npm install --save-dev ember-cli-f7
• ember g ember-cli-f7

Theme configuration

At the moment Framework7 provides styles for material and iOs themes. You'll also get handy helpers like currentDevice, isAndroid, isOs, matherialTheme and iosTheme to use in your templates.

By default it'll use ios theme, you can change settings in your config/enviroment.js file:

// config/environment.js
/* jshint node: true */
module.exports = function(environment) {
  var ENV = {
    framework7: {
      theme: 'material' // supported themes 'ios' and 'material'
    }
  };

  return ENV;
};

Components Included

• {{f7-views}}
• {{f7-view}}
• {{f7-navbar}}
• {{f7-page-container}}
• {{f7-page-content}}
• {{f7-panel}}
• {{f7-search-bar}}
• {{f7-swipeout}}
• {{f7-toggle-panel}}
• {{f7-toggle-sortable}}

Mixins Included

• f7-route

Important!

You'll need to add data: attribute to to your config/environment.js file. This will allow svg icons been properly displayed.

  // config/environment.js
  contentSecurityPolicy: {
    'img-src': "'self' data:",
  }

Dependency Docs

• ember-cli
• framework7
• liquid-fire

For more information on using ember-cli, visit http://www.ember-cli.com/.

Example Demo

  git clone [email protected]:chukcha-wtf/ember-cli-f7.git
  cd ember-cli-f7
  npm i; bower i
  ember server

Then visit the demo app: http://localhost:4200 in your browser