Question: how to enable bootstrap style

[hy-brasil]

Hi, using the tabs and find em great.
I see on the demo (at http://indexiatech.github.io/ember-components/#/component/component.tabs/simple)
that there is Classic style and Bootstrap style.
I'd like to use the Bootstrap look, but its not shown how to go about doing that.
Could you tell me how I would do this?
Thanks

[asaf]

I'll document it, just try to add configName="bs" for the main tabs component.

[hy-brasil]

@asaf, thank you very much.

I did that :

{{#em-tabs configName="bs"}}

and now the tabs have no styling at all... it appears.
Its like I don't have the config or something...
Do I need to have something else installed other than just the tabs?
Or is there something I should be adding to my brocfile?

Currently looks like this:

var EmberApp = require('ember-cli/lib/broccoli/ember-app');

var app = new EmberApp();
app.import('bower_components/bootstrap/dist/js/bootstrap.js');
app.import('bower_components/bootstrap/dist/css/bootstrap.css');
app.import('bower_components/ember-addons.bs_for_ember/dist/js/bs-core.min.js');
app.import('bower_components/ember-addons.bs_for_ember/dist/js/bs-modal.min.js');
app.import('bower_components/ember-addons.bs_for_ember/dist/js/bs-alert.min.js');
app.import('bower_components/ember-addons.bs_for_ember/dist/js/bs-button.min.js');
app.import('bower_components/ember-addons.bs_for_ember/dist/js/bs-progressbar.min.js');
app.import('bower_components/ember-addons.bs_for_ember/dist/js/bs-breadcrumbs.min.js');
app.import('bower_components/ember-addons.bs_for_ember/dist/js/bs-nav.min.js');
app.import('bower_components/d3/d3.js');
app.import('bower_components/ember-data/ember-data.js');
app.import('bower_components/jquery-cookie/jquery.cookie.js');
//app.import('bower_components/ember-components/dist/globals/main.js');
//app.import('bower_components/ember-utils/dist/globals/main.js');

//app.import('node_modules/ember-radio-button/app/components/radio-button.js');
//app.import('bower_components/ic-ajax/lib/main.js');
var mergeTrees = require('broccoli-merge-trees');
var pickFiles = require('broccoli-static-compiler');


var bootstrapTree =
pickFiles('bower_components/bootstrap/fonts', {
   srcDir: '/',
   files: [
     'glyphicons-halflings-regular.svg',
     'glyphicons-halflings-regular.ttf',
     'glyphicons-halflings-regular.eot',
     'glyphicons-halflings-regular.woff'
   ],
   destDir: '/fonts'
});

module.exports = mergeTrees([app.toTree(),bootstrapTree]);

[shaunc]

It seems the bootstrap css requires that you wrap the content inside em-tab in an "a" element.

I had (in emblem):

    = em-tab role="presentation":  | Users
    = em-tab role="presentation":  | Organizations

and saw no styling. When I changed to:

    = em-tab role="presentation": a: | Users
    = em-tab role="presentation": a: | Organizations

.. it worked!

[hy-brasil]

I apologise in advance for my ignorance.. but whats emblem?
And I'm afraid I don't recognise that code above.. where would I put that ?

Thanks

[shaunc]

emblem is to handlebars very roughly what coffeescript is to javascript.

So... in handlebars:

{{# em-tab}}<a>Users</a>{{/em-tab}}

ie -- just wrap your labels in "a" tags. (I think that role="presentation" is superfluous. I copied from bootstrap doc when idx-table didn't work to try and get as close as possible to bootstrap examples.)

[hy-brasil]

Ahh Brilliant!
Thanks so much for that !

[shaunc]

glad it works... @asaf -- you might consider either an addition to the layout of em-tab, or a documentation change....

[masciugo]

thanks for the solution.. but what if I'd like to use nav-pills instead of default? How can I add a new config?
It would be great to provide css classes directly when using the component

[vluoto]

@masciugo AFAIK the only way to do this at the moment is to override the "ember-idx-tabs" initializer and define your classes there. Would definitely be nice to have a more convenient way to do it though. 👍