ng_bootstrap 1.2.0 
ng_bootstrap: ^1.2.0 copied to clipboard
Angular 2 and Bootstrap 4
ng_bootstrap #
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 'package:ng_bootstrap/ng_bootstrap.dart';
@Component(
// ...
directives: const [bsDirectives])
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>
Components #
- ✅ 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
Contribution #
TODO #
- ❌ support animation (in progress...)
Metadata
3
likes
20
points
81
downloads
Publisher
unverified uploader
Weekly Downloads
Metadata
Angular 2 and Bootstrap 4
Repository (GitHub)
View/report issues
License
MIT (license)
Dependencies
angular, angular_forms, bootstrap_sass, font_awesome, intl, js_shims, stream_transform
