Adds a complete Ember Bootstrap 4.x eco-system
THIS IS CURRENTLY A WORK IN PROGRESS ... it works but it will be "ready" pretty soon
# if you want to use SASS (recommended)
ember install ember-cli-sass
# then, either ...
ember install ui-bootstrap
# - or -
ember install ui-bootstrap-plusInstalling ui-bootstrap will install Bootstrap 4.x locally to your project as an NPM dependency. If you install ui-bootstrap-plus then it will include all of these complimentary plugins as well:
ui-icon- font icons at your fingertips (uses fontawesome by default)ui-button- bootstrap enabled button controls (includes tether and tooltips)ui-input- bootstrap enabled input controls (includes tether and tooltips)ui-tooltip- not done yetui-dropdown- not done yetember-cli-flash- great alert functionality that can be used with the Bootstrap alert stylingember-modal-dialog- Great support for modals in Ember.ember-tether- allows Ember to leverage all the positional panache of Hubspot Tether.
Note: starting with Bootstrap 4, glyphicons are no longer included in Bootstrap and are not part of this addon either. If you want some Ember help in using icon-libraries try
ui-icon
This plugin detects if you've installed the ember-cli-sass addon. If you have it will use SASS, not then it will fallback to CSS (you'll get an info message in this case when you run ember serve).
To get your Bootstrap mojo you'll need to include the following line to your app.scss:
@import 'bootstrap';
// ... or ...
@import 'bootstrap-flex';One of the really nice things about BS4 is that it can optionally use flexbox for all it's spacial positioning. You do lose a tiny bit of browser support but not much these days.
Note: that by importing either of the two above you are importing all of Bootstrap and that maybe more than you need. You can, when using SCSS, selectively import only what you need. As a targeted optimization for people using this plugin and sticking to it's no-JS metaphor you can use
ui-bootstrapandui-bootstrap-flexas more optimized targets.
If you are stuck using CSS rather than SCSS, you will need to change the options for this plugin in your environment.js file:
var ENV = {
uiBootstrap: {
useSASS: false
}
}That's all that's needed but of course with this change you loose the ability to modify the SCSS variables which Bootstrap exposes.
The philosophy with this addon is to NOT include bootstraps JS as in most cases there are better ways to achieve these goals with Ember addons. See our approach to each of these components below, and in the next section we'll discuss how to enable or disable various aspects.
In addition, where Bootstrap components don't have any javascript dependencies we have added Ember composable components. See the "component" tab on the demo site to find out more.
Copyright (c) 2016
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.