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])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>- Accordion
- Alert
- Buttons
- Carousel
- Collapse
- DatePicker
- DatePickerPopup
- Dropdown
- Modal
- Pagination
- Popover
- Progressbar
- PromptService
- Rating
- Tabs
- Timepicker
- Tooltip
- Typeahead
- Grid/Table
- FileInput
- TextInput
- ImageInput
- SignItInput
- SignInput
- Charts
- Header Bar
- Scafold - Base Layout
- BsTemplateOutlet - to transclude templates (Most likely will be removed in future versions)
- positional service
- support animation (in progress...)