Ember Bootstrap

Ember Bootstrap is set of UI elements styled using Twitter Bootstrap (currently version 2) toolkit to use with Ember.js. The ultimate goal is to provide all elements from the Bootstrap toolkit.

Please respect the following convention : bug reports go in the issue tracker. Feature and big refactoring discussions go in the google group.

What's implemented so far?

Views

• Modal panes - Bootstrap.ModalPane
• Nav lists - Bootstrap.NavList
• Pills - Bootstrap.Pills
• Tabs (header) - Bootstrap.Tabs
• Alert messages - Bootstrap.AlertMessage
• Block alert messages - Bootstrap.BlockAlertMessage
• Progress bars - Bootstrap.ProgressBar
• Badges - Bootstrap.Badge
• Labels - Bootstrap.Label
• Wells - Bootstrap.Well
• Badges - Bootstrap.Badge
• Labels - Bootstrap.Label
• Wells - Bootstrap.Well

Forms

• Text Field - Bootstrap.Forms.TextField
• Text Area - Bootstrap.Forms.TextArea
• Select - Bootstrap.Forms.Select

Usage

Bootstrap.ModalPane

Bootstrap.ModalPane.popup({heading: "Sample modal pane",message: "Sample message...",primary: "OK",secondary: "Cancel",showBackdrop: true,callback: function(opts,event){if(opts.primary){// primary button was pressed}elseif(opts.secondary){// secondary button was pressed}else{// close was pressed}}});

Bootstrap.NavList

<scripttype="text/x-handlebars">{{viewBootstrap.NavListcontentBinding="SampleApp.navController.content"selectionBinding="SampleApp.navController.selection"}}</script>

Bootstrap.Tabs

<scripttype="text/x-handlebars">{{viewBootstrap.TabscontentBinding="SampleApp.tabsController.content"selectionBinding="SampleApp.tabsController.selection"}}</script>

Bootstrap.Pills

<scripttype="text/x-handlebars">{{viewBootstrap.PillscontentBinding="SampleApp.pillsController.content"selectionBinding="SampleApp.pillsController.selection"}}</script>

Bootstrap.AlertMessage

<scripttype="text/x-handlebars">{{viewBootstrap.AlertMessagetype="success"message="You did it!"}}</script>

Bootstrap.ProgressBar

<scripttype="text/x-handlebars">{{viewBootstrap.ProgressBarisStriped=trueisAnimated=trueprogressBinding="SampleApp.progressController.progress"}}</script>

Bootstrap.Label

<scripttype="text/x-handlebars">{{viewBootstrap.Labeltype="important"content="Important"}}</script>

Bootstrap.Badge

<scripttype="text/x-handlebars">{{viewBootstrap.Badgetype="success"contentBinding="SampleApp.TodoController.completed"}}</script>

Bootstrap.Well

<scripttype="text/x-handlebars">{{viewBootstrap.Wellcontent="Important note about Ember and Bootstrap"}}</script>

Bootstrap.Breadcrumbs

<scripttype="text/x-handlebars">{{viewBootstrap.BreadcrumbscontentBinding="SampleApp.breadcrumbsController.content"}}</script>

Bootstrap.Pager

<scripttype="text/x-handlebars">{{viewBootstrap.PagercontentBinding="SampleApp.pagerController.content"}}</script>

Bootstrap.Pagination

<scripttype="text/x-handlebars">{{viewBootstrap.PaginationcontentBinding="SampleApp.paginationController.content"selectionBinding="SampleApp.paginationController.selection"}}</script>

Bootstrap.Forms.TextField

<scripttype="text/x-handlebars">{{viewBootstrap.Forms.TextFieldvalueBinding="myObject.content"label="content"}}</script>

Bootstrap.Forms.TextArea

<scripttype="text/x-handlebars">{{viewBootstrap.Forms.TextAreavalueBinding="myObject.content"label="content"}}</script>

Bootstrap.Forms.Select

<scripttype="text/x-handlebars">{{viewBootstrap.Forms.SelectcontentBinding="content"selectionBinding="selected"label="content" optionLabelPath: 'content.name',optionValuePath: 'content.internalName'}}</script>

Building Ember Bootstrap

1. Run rake to build Ember Bootstrap. Three builds will be placed in the dist/ directory.

• ember-bootstrap.js, ember-bootstrap.min.js and ember-bootstrap.prod.js - unminified and minified builds as well as a production ready build with assertions, deprecations and warnings stripped.

If you are building under Linux, you will need a JavaScript runtime for minification. You can either install nodejs or gem install therubyracer.

Unit Tests

To run unit tests, run bundle exec rackup from the root directory and visit http://localhost:9292/tests/index.html?package=ember-bootstrap.

License

MIT License. Copyright 2012 Jiri Zajpt, Damien Mathieu

Authors & contributors

• Jiri Zajpt jz@blueberry.cz
• Damien Mathieu 42@dmathieu.com
• Franck Verrot franck@verrot.fr
• Bradley Priest hello@bradleypriest.com