ng_bootstrap
Last updated:
0 purchases
Description:
ng bootstrap
ng_bootstrap #
Join the chat
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
...
copied to clipboard
3. Add css stylesheet link to index.html:
<head>
...
<link rel="stylesheet" href="packages/ng_bootstrap/all.css">
...
</head>
copied to clipboard
4. Add needed ng_bootstrap directives to your components:
import 'package:ng_bootstrap/ng_bootstrap.dart';
@Component(
// ...
directives: const [bsDirectives])
copied to clipboard
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';
copied to clipboard
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>
copied to clipboard
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 #
Create new issues
Fork me
TODO #
❌ support animation (in progress...)
License:
For personal and professional use. You cannot resell or redistribute these repositories in their original state.
Files In This Product:
Customer Reviews
There are no reviews.
