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
    } 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" selectionBinding="selected" label="content" optionLabelPath="content.name" optionValuePath="content.internalName"}}
</script>

Building Ember Bootstrap

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

Authors & contributors

Jiri Zajpt [email protected]
Damien Mathieu [email protected]
Franck Verrot [email protected]
Bradley Priest [email protected]

myusernamejeep / ember-bootstrap Goto Github PK

ember-bootstrap's Introduction