Ember Bootstrap
A set of UI elements styled using Twitter Boostrap toolkit to use with Ember.js
Modal panes
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
}
}
});
Sample
Radio button groups
Bootstrap.RadioButtonGroup.create({
content: ["A", "B", "C"],
allowsEmptySelection: true
}).append();
Sample
Nav List
Bootstrap.NavList.create({
content: ["A", "B", "C"],
selectionBinding: "App.navListController.selection"
}).append();
Sample
Tabs
Bootstrap.Tabs.create({
content: ["A", "B", "C"],
selectionBinding: "App.tabsController.selection"
}).append();
Sample
Stacked tabs
Bootstrap.Tabs.create({
content: ["A", "B", "C"],
isStacked: true,
selectionBinding: "App.tabsController.selection"
}).append();
Sample
Pills
Bootstrap.Pills.create({
content: ["A", "B", "C"],
selectionBinding: "App.pillsController.selection"
}).append();
Sample
Stacked pills
Bootstrap.Pills.create({
content: ["A", "B", "C"],
isStacked: true,
selectionBinding: "App.stackedPillsController.selection"
}).append();
Sample
Alert messages
Bootstrap.AlertMessage.create({
message: "Sample alert message",
type: "warning"
}).append();
Sample
Block alert messages
Bootstrap.BlockAlertMessage.create({
message: "Sample alert message",
type: "warning"
}).append();
Sample
Progress bars
Bootstrap.ProgressBar.create({
isStriped: true,
progress: 50
}).append();
Sample
Badges
Bootstrap.Badge.create({
contentBinding: 'SampleApp.TodoController.completed',
type: 'success'
}).append();
Sample
Labels
Bootstrap.Label.create({
content: 'Important',
type: 'important'
}).append();
Sample
Wells
Bootstrap.Well.create({
content: 'Important note about Ember and Bootstrap'
}).append();