Run the generator to install the dependencies
ember g ember-cli-foundation-6-sass
Then, either let the generator add the app.scss
file, or include the following in your existing one:
@import 'foundation';
@include foundation-everything;
See Foundation 6 documentation for details.
http://foundation.zurb.com/sites/docs/
npm install --save-dev ember-cli-sass
ember install ember-cli-foundation-6-sass
ember g ember-cli-foundation-6-sass
To use Foundation's Javascript features add foundationJS
to your Ember app's options.
// ember-cli-build.js
/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
// Add options here
'ember-cli-foundation-6-sass': {
'foundationJs': 'all'
}
});
return app.toTree();
};
All of the Foundation components which require Javascript have been turned into Ember components.
The vast majority of the Foundation Javascript options have been exposed as component parameters. See the Zurb Foundation for Sites documentation for any specifics.
Any exceptions are documented below.
Each Foundation Javascript widget can be directly accessed through the zfUi property. For example, the following would call the open method on the reveal component:
myRevealComponent.get('zfUi').open();
A full sample is available in tests/dummy/app/templates/application.hbs
To run the sample, clone this repo and run:
ember serve
Usage
Usage
Usage
Usage
Usage
Usage
There are several additional options outside of the documented options on the Zurb Foundation site.
Option | Description |
---|---|
showLeftOffCanvas | Show left off-canvas element |
showRightOffCanvas | Show right off-canvas element |
Accessing the zf widget directly is a bit different with the off-canvas component. In the case of a single off canvas element (i.e. left or right ) the zfUi element can be accessed. However, if both the showLeftOffCanvas and showRightOffCanvas flags are set, this is a bit problematic. An array containing both of the elements can be accessed as the zfUiList member.
Usage. This illustrates both a left and right off-canvas widget.
The following options are not yet supported:
- animInFromRight
- animOutToRight
- animInFromLeft
- animOutToLeft
- useMUI
Usage
The following options are not yet supported:
- animationIn
- animationOut
Usage
Usage
Usage
The template option has been renamed to zf-template as this causes a collision with an existing Ember component member.
Usage
- Improve unit and integration tests
- Improve documentation
- Create an adapter so Liquid Fire can be used natively instead of Motion