ng_bootstrap

[![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>

Components

Others

  • x BsTemplateOutlet - to transclude templates (Most likely will be removed in future versions)
  • x positional service

Contribution

Create new issues

Fork me

TODO

  • support animation (in progress...)

Libraries

accordion
alert
bs_date_picker
bs_dropdown
bs_table_directives
bs_template_outlet
collapse
file_drop_directive
file_select_directive
file_type_class
file_upload
input
max_length_validator
min_length_validator
ng_bootstrap
pager
pagination
pattern_validator
popover
position
progress
prompt
prompt_service
radio
rating
tabs
tabsx
timepicker
toggle
tooltip
typeahead