Getting started with ember.js Asynchronous Tasks in Components How to update Ember, Ember Data and Ember CLI Debugging Component - communication between child to parent component.Currency formatting template helper How to import JavaScript library/plugin Date Format Helper Initialize Foundation or Bootstrap on ember-cli in a proper way Testing

Initialize Foundation or Bootstrap on ember-cli in a proper way

Remarks:

Both addons are not mine, I thought it will be nice to present them to You, there are github pages of addons:

Ember Bootstrap: https://github.com/kaliber5/ember-bootstrap

Ember foundation 6 https://github.com/acoustep/ember-cli-foundation-6-sass

You can find documentation there.

Install ember-bootstrap with default version

ember install ember-bootstrap

Instal ember-bootstrap with version 4 and SASS - experimental

ember generate ember-bootstrap --bootstrap-version=4 --preprocessor=sass

Install SASS and Foundation

npm install --save-dev ember-cli-sass
ember install ember-cli-foundation-6-sass

Install Foundation dependencies

ember g ember-cli-foundation-6-sass

Ember build file with Foundation addons

// 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': [
                'core',
                'util.box',
                'util.keyboard',
                'util.mediaQuery',
                'util.motion',
                'util.nest',
                'util.timerAndImageLoader',
                'util.touch',
                'util.triggers',
                'abide',
                'accordion',
                'accordionMenu',
                'drilldown',
                'dropdown',
                'dropdownMenu',
                'equalizer',
                'interchange',
                'magellan',
                'offcanvas',
                'orbit',
                'responsiveMenu',
                'responsiveToggle',
                'reveal',
                'slider',
                'sticky',
                'tabs',
                'toggler',
                'tooltip'
            ]
        },
    }
  });

  return app.toTree();
};

Ember Bootstrap sample form

{{#bs-form model=this onSubmit=(action "submit") as |form|}}
  {{#form.element label="Email" placeholder="Email" property="email" as |el|}}
    <div class="input-group">
      <input value={{el.value}} class="form-control" placeholder="Email" oninput={{action (mut el.value) value="target.value"}} onchange={{action (mut el.value) value="target.value"}} id={{el.id}} type="text">
      <span class="input-group-addon">@example.com</span>
    </div>
  {{/form.element}}
  {{bs-button defaultText="Submit" type="primary" buttonType="submit"}}
{{/bs-form}}

Parameters:

Parameter	Usage
Ember install	Download a new extension package using Ember
npm install	Download a new extension package using node.js
SASS	CSS language necessary in Foundation
Ember-cli-build.js	File with Ember imports, configuration, etc.
{{#bs-modal-simple}}	Creation of a new bootstrap modal
fade=fade	Set the modal animations
{{#bs-button}}	Button with a Bootstrap cool look
{{#bs-form onSubmit(action = "Submit")}}	New form with an action after submitting

Contributors

Topic Id: 10176

Example Ids: 31189,31190,31191,31192,31193,31194

This site is not affiliated with any of the contributors.