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.

What's implemented so far?

Views

• Buttons - Bootstrap.Button
• 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.Button

Button class automatically provides necessary classes (.btn) and binds type property to class (for example .btn-info for info type) and if button is disabled disabled class.

<script type="text/x-handlebars">
  {{view Bootstrap.Button type=info disabled=true}}Hello{{/view}}
</script>

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
    } else if (opts.secondary) {
      // secondary button was pressed
    } else {
      // close was pressed
    }
  }
});

Bootstrap.NavList

<script type="text/x-handlebars">
  {{view Bootstrap.NavList
      contentBinding="SampleApp.navController.content"
      selectionBinding="SampleApp.navController.selection"}}
</script>

Bootstrap.Tabs

<script type="text/x-handlebars">
  {{view Bootstrap.Tabs
      contentBinding="SampleApp.tabsController.content"
      selectionBinding="SampleApp.tabsController.selection"}}
</script>

Bootstrap.Pills

<script type="text/x-handlebars">
  {{view Bootstrap.Pills
      contentBinding="SampleApp.pillsController.content"
      selectionBinding="SampleApp.pillsController.selection"}}
</script>

Bootstrap.AlertMessage

<script type="text/x-handlebars">
  {{view Bootstrap.AlertMessage type="success" message="You did it!"}}
</script>

Bootstrap.ProgressBar

<script type="text/x-handlebars">
  {{view Bootstrap.ProgressBar isStriped=true isAnimated=true 
      progressBinding="SampleApp.progressController.progress"}}
</script>

Bootstrap.Label

<script type="text/x-handlebars">
  {{view Bootstrap.Label type="important" content="Important"}}
</script>

Bootstrap.Badge

<script type="text/x-handlebars">
  {{view Bootstrap.Badge type="success" contentBinding="SampleApp.TodoController.completed"}}
</script>

Bootstrap.Well

<script type="text/x-handlebars">
  {{view Bootstrap.Well content="Important note about Ember and Bootstrap" }}
</script>

Bootstrap.Breadcrumbs

<script type="text/x-handlebars">
  {{view Bootstrap.Breadcrumbs contentBinding="SampleApp.breadcrumbsController.content" }}
</script>

Bootstrap.Pager

<script type="text/x-handlebars">
  {{view Bootstrap.Pager contentBinding="SampleApp.pagerController.content" }}
</script>

Bootstrap.Pagination

<script type="text/x-handlebars">
  {{view Bootstrap.Pagination contentBinding="SampleApp.paginationController.content" selectionBinding="SampleApp.paginationController.selection" }}
</script>

Bootstrap.Forms.TextField

<script type="text/x-handlebars">
  {{view Bootstrap.Forms.TextField valueBinding="myObject.content" label="content"}}
</script>

Bootstrap.Forms.TextArea

<script type="text/x-handlebars">
  {{view Bootstrap.Forms.TextArea valueBinding="myObject.content" label="content"}}
</script>

Bootstrap.Forms.Select

<script type="text/x-handlebars">
  {{view Bootstrap.Forms.Select contentBinding="content" valueBinding="selected" label="content"}}
</script>

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, Franck Verrot

Authors & contributors

• Jiri Zajpt [email protected]
• Damien Mathieu [email protected]
• Franck Verrot [email protected]