Bootstrap theme

Bootstrap theme

In the chapter about styles of the docs you've seen how, if you are a Sass user, you can customize the styles of the dropdown by defining some variables before importing the styles of the addon.

This approach can allow a great amount of customization with only a few lines of code. By example this is all that takes to create a Bootstrap 3 theme:

$ember-power-select-line-height: 2 !default;
$ember-power-select-border-color: #ccc !default;
$ember-power-select-trigger-icon-color: #999 !default;
$ember-power-select-focus-outline: 0 !default;
$ember-power-select-opened-border-radius: 4px !default;
$ember-power-select-search-input-border-radius: 3px !default;
$ember-power-select-dropdown-margin: 3px !default;
$ember-power-select-dropdown-box-shadow: rgba(black, 0.172549) 0px 6px 12px 0px !default;
$ember-power-select-highlighted-color: inherit !default;
$ember-power-select-highlighted-background: #f5f5f5 !default;
$ember-power-select-selected-background: #f5f5f5 !default;
$ember-power-select-focus-border-color: #66afe9 !default;
$ember-power-select-focus-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6) !default;
$ember-power-select-dropdown-border: 1px solid $ember-power-select-border-color !default;
$ember-power-select-dropdown-contiguous-border: $ember-power-select-dropdown-border !default;

@import 'ember-power-select';

Since bootstrap is so popular this theme comes already bundled in Ember Power Select, so the only thing you have to do is to import the theme file before the main one:

@import 'ember-power-select/themes/bootstrap';
@import 'ember-power-select';

The result looks like this:

If your project is not using sass, you can still use the precompiled bootstrap theme instead of the default one with just a couple lines of configuration when creating your app on the ember-cli-build.js file.

var app = new EmberApp(defaults, {
  'ember-power-select': {
    theme: 'bootstrap'
  }
});

Alternatively you can disable styling altogether by setting the theme to false.

var app = new EmberApp(defaults, {
  'ember-power-select': {
    theme: false
  }
});

Remember to restart ember-cli to pick up the changes.