[![Join the chat at https://gitter.im/dart-league/ng_bootstrap](https://badges.gitter.im/dart-league/ng_bootstrap.svg)](https://gitter.im/dart-league/ng_bootstrap?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

Usage & Demo

Getting Started #

1. Create a new angular2-dart app: https://angular.io/docs/dart/latest/quickstart.html

2. Add ng_bootstrap to pubspect.yaml :

dependencies: ... ng_bootstrap: any ...

3. Add css stylesheet link to index.html :

<head> ... <link rel="stylesheet" href="packages/ng_bootstrap/all.css"> ... </head>

4. Add needed ng_bootstrap directives to your components:

import 'packages:ng_bootstrap/ng_bootstrap.dart' @Component( // ... directives: const [BS_DIRECTIVES])

Customize Styles - Create Custom Themes #

To customize default styles to create custom themes based on ng_bootstrap theme, the best option is to create an scss file that imports the package:ng_bootstrap/all.scss file, for example:

// variables should be set before importing default theme $brand-primary: red !important; // you could also import a custom variables theme if you prefer // but it should be done before importing default theme @import 'path/to/_my-variables'; @import 'package:ng_bootstrap/all';

Then in your index.html file change the link tag to point to the new theme.

<head> ... <link rel="stylesheet" href="path/to/my-theme.css"> ... </head>

[x] Accordion

[x] Alert

[x] Buttons

[x] Carousel

[x] Collapse

[x] DatePicker

[x] DatePickerPopup

[x] Dropdown

[x] Modal

[x] Pagination

[x] Popover

[x] Progressbar

[x] PromptService

[x] Rating

[x] Tabs

[x] Timepicker

[x] Tooltip

[x] Typeahead

[x] Grid/Table

[x] FileInput

[x] TextInput

[ ] ImageInput

[ ] SignItInput

[ ] SignInput

[ ] Charts

[ ] Header Bar

[ ] Scafold - Base Layout

[x] BsTemplateOutlet - to transclude templates (Most likely will be removed in future versions)

[x] positional service

Create new issues

Fork me