Dart pub

 

ng_bootstrap 1.1.1

Published Nov 24, 2018 • Updated: 1.1.1 / 1.2.0-alpha.1
web
  • Readme
  • Changelog
  • Installing
  • Versions
  • 61

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
    ...

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 #

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...)

1.1.1 #

  • fix bs_tabx not working correctly when it is inside a ngIf template element (fix #109)

1.1.0 #

  • add editable attribute to bs_table
  • add searchable attribute and search fields row to bs_table (fix #85)
  • add hideSelectColumn attribute to bs_table (fix #92)

1.0.3 #

  • upgrade dart-sdk version to >=2.1.0-dev <3.0.0

1.0.2 #

  • fix sorting by number or date (fix #117)
  • fix pagination greater than 10 (fix #116)
  • add examples to remote data with bs-table
  • fix remote sorting for bs-table
  • fix column width for select column

1.0.1 #

  • upgrade bootstrap_sass to version ^4.1.3
  • fix demo links
  • fix accordion style

1.0.0 #

  • Add ngClass to bs-column
  • rename constants to camelcase
  • fix bsTable
  • add vertical tabs support to bs-tabsx
  • bs-progress is resizeable
  • fix bug on active tab not set correctly (fix #19)

1.0.0-beta+1 #

  • Add ability to edit table inline
  • upgrade dependencies to support dart-sdk 2.0.0
  • move css from file_upload_demo.html to file_upload_demo.scss

1.0.0-beta+0 #

  • remove validators since angular ones accomplish the same
  • upgrade to angular: 5.0.0-beta+3

1.0.0-alpha+4 #

  • upgrade angular to 5.0.0-alpha+15
  • upgrade angular_forms to 2.0.0-alpha+7
  • enhance bs-inputs

1.0.0-alpha+3 #

  • upgrade angular to 5.0.0-alpha+13
  • upgrade angular_forms to 2.0.0-alpha+5

1.0.0-alpha+2 #

  • upgrade angular to ^5.0.0-alpha+2
  • upgrade stream_transform to ^0.0.11
  • change bootstrapStatic by runApp
  • fixes #103
  • fixes #104
  • fixes #105

1.0.0-alpha+1 #

  • upgrade angular to version 5.0.0-alpha+9
  • upgrade bootstrap_sass to version 4.0.0
  • add class modal-open to body when modal is open
  • add $dropdown-link-hover-bg: #e9ecef !default; to make background color of dropdown links darker

1.0.0-alpha #

  • upgrade angular to version 5.0.0-alpha+7
  • upgrade build_runner to version ^0.7.0
  • fix bug in bs-rating component
  • fix bug in progress caused by adding bootstrap@^4.0.0-beta
  • add ability to create components inside modal

0.9.2 #

  • add bsPattern to bsInput
  • add ability to override error messages to bsInput

0.9.1 #

  • add example of pagination custom text
  • add card header
  • fix card for bootstrap
  • update tooltip_demo.html

0.9.0 #

  • add popover component (fixes: #82)
  • fix tooltip styles

0.8.6 #

  • upgrade to bootstrap@^4.0.0-beta

0.8.5 #

  • correct tooltip placement inside table element (fixes: #76)
  • correct tooltip placement after fast hide and show
  • correct accordion expand/collapse timing

0.8.4 #

  • Upgrade to angular_forms@^1.0.0 (fixes: #80)

0.8.3 #

  • Upgrade to angular@4.0.0

0.8.2 #

  • support DDC (fixes: #71)
  • change stream_transformers library by stream_transform
  • add input listener to components that extends DefaultValueAccessor

0.8.1 #

  • Upgrade to angular@4.0.0-beta (fixes: #78)

0.8.0 #

  • Upgrade to angular@4.0.0-alpha+3
  • Change bs-modal logic to pass buttons instead actions
  • Add BsPromptService to create a modal from a function

0.7.1 #

  • Upgrade to angular@4.0.0-alpha+2
  • add bsPrompt

0.7.0 #

  • Upgrade to angular@4.0.0-alpha+1

0.6.7 #

  • add BsInput to BS_DIRECTIVES list

0.6.6 #

  • enhance BsInput component
  • add BsMinLength Directive
  • add BsMaxLength Directive

0.6.5 #

  • remove date_picker_inner files and activeDate attribute from date-picker
  • remove initDate from date-picker (fixes: #68)
  • enhance layout and styling of date-picker

0.6.4 #

  • upgrade sass_builder to ^0.1.1

0.6.3 #

  • replace EventEmitter by Stream and StreamController

0.6.2 #

  • upgrade markdown to version 0.11.3

0.6.1 #

  • upgrade to angular 3.0.0-beta+2

0.5.3 #

  • use sass_builder 0.0.2
  • use angular2 3.0.0-alpha+1
  • bs-table allows row selection and cell templates

0.5.2 #

  • upgrade to sass 1.0.0-alpha.9
  • upgrade to intl 0.14.0

0.5.1 #

  • correct date-picker-popup not updating values correctly

0.5.0 #

  • upgrade to bootstrap_sass v4.0.0-alpha.5
  • remove unneded code in date_picker_popup

0.4.6 #

  • add format and locale to datepicker-popup (fixes #51 and #45)

0.4.5 #

  • correct path to font-awesome (fixes #59)

0.4.4 #

  • make accordion panel grow to fit the content (fixes #55)

0.4.3 #

  • Use grinder and dart-sass instead sass_transformer and ruby-sass.
  • Upgrade angular to 2.2.0 and remove Renderer from files. (fixes #56)

0.4.2 #

  • Typeahead:
    • increase the options limit to 200
    • process matches always user clicks dropdown button, or whenever user change search value
    • add clear text button
    • add _typeahead.scss which contains the styles for clear-button

0.4.1 #

  • increase version of angular2 to 2.0.0-beta.22
  • change path of fontawesome in all.scss to use packages directory
  • remove web folder. The content is going to be in gh-pages branch and it is going to work as separate project.
  • remove print from BsModalComponent constructor

0.4.0 #

  • rename NG_BOOTSTRAP_TABLE_DIRECTIVES to BS_TABLE_DIRECTIVES
  • rename NG_BOOTSTRAP_TABSX_DIRECTIVES to BS_TABSX_DIRECTIVES
  • rename NG_BOOTSTRAP_DIRECTIVES to BS_DIRECTIVES
  • add file-upload directives

0.3.4 #

  • correct wrong totalChange value change in pagination
  • correct modal demo button class
  • use totalPages value from pagination instead calculating it in table-demo
  • correct back removeTab as proposed on PR #23

0.3.3 #

  • correct bug of accordion-panel not opening by default

0.3.2 #

  • add ability to use complex objects as data input for table component

0.3.1 #

  • upgrade bootstrap_sass to v4.0.0-alpha.3+4
  • upgrade sass_transformer to v0.1.1
  • change sass to sass_transformer in README

0.3.0+1 #

  • use sass_transformer 0.1.0 instead dart-sass 0.5.0
  • remove packages path from all.scss

0.3.0 #

  • Rename components to use pattern Bs<name>Component
  • Rename directives to use pattern Bs<name>Directive
  • Make BsTimePickerComponent.writeValue method async
  • Make BsDatePickerComponent.writeValue method async
  • Add styling for bs-pager
  • Add min-width to bs-pagination components in bs-pagination-demo
  • Upgrade to angular 2.0.0-alpha.20

0.2.3 #

  • add BsTableComponent and BsColumnComponent:
    • no column template supported
    • no complex objects as row input supported
    • no selection
    • no actions (delete, edit, view, ...)
  • correct pagination directive totalItems change
  • Collapse directive: - correct collapsing animation - remove isCollapse and isCollapsed attributes   - add bsCollapseChange and collapsingChange event-emitters
  • upgrade bootstrap_sass to 4.0.0-alpha.3+1
  • use $ling-height-base instead $line-height in _panel.scss
  • rename css-class scrollable-menu to scrollable-navbar-menu to avoid crashes with class in _dropdown.scss
  • fix collapse_demo.html: collapse not being hidden
  • correct panel-title font too big

0.2.2 #

  • make TypeAhead.dropdownMenu scrollable. Fixes #7.
  • add noResults and loading messages to TypeAhead.dropdownMenu
  • correct TypeAhead case sensitivity results
  • remove TypeAhead._queryStream.distinct processing, this avoids values not gotten when same value has been typed before after passing debounce time

0.2.1 #

  • rename n2sCollapse to bsCollapse
  • fix bug in accordion caused when closeOthers attribute is null
  • remove unneeded code on DatePickerPopup (solves #26)
  • correct error caused by entering wrong date onto DatePickerPopup-TextBox

0.2.0 #

  • upgrade to angular 2.0.0-beta.19
  • Fix Removing tabs sometimes didn't work #23
  • Added support for typeaheads to specify a optionField in complex Objects
  • Rename NG_BOOTSTRAP_TABS_DIRECTIVES to NG_BOOTSTRAP_TABSX_DIRECTIVES
  • Add NG_BOOTSTRAP_TABS_DIRECTIVES constant
  • Remove components.dart and put the code into ng_bootstrap.dart directly
  • Rename NGBS_CAROUSEL_DIRECTIVES to NG_BOOTSTRAP_CAROUSEL_DIRECTIVES

0.1.1 #

  • correct bug sass not founding files doubt to usage of relative path instead of packages path
  • change caret icon of typeahead to font-awesome icon
  • Remove Getting Started and Migration links from demo header
  • correct visual errors in dropdown demo
  • add style display inline-block to bs-dropdown

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  ng_bootstrap: ^1.1.1

2. Install it

You can install packages from the command line:

with pub:


$ pub get

Alternatively, your editor might support pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use: 


import 'package:ng_bootstrap/ng_bootstrap.dart';
Popularity:
Describes how popular the package is relative to other packages. [more]
78
Health:
Code health derived from static analysis. [more]
45
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
40
Overall:
Weighted score of the above. [more]
61
Learn more about scoring.

We analyzed this package on Nov 11, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.6.0
  • pana: 0.12.21

Platforms

Detected platforms: web

Primary library: package:ng_bootstrap/ng_bootstrap.dart with components: html, js.

Health suggestions

Fix lib/components/datepicker/date_picker.dart. (-9.08 points)

Analysis of lib/components/datepicker/date_picker.dart reported 19 hints, including:

line 4 col 30: Avoid const keyword.

line 20 col 17: Avoid const keyword.

line 27 col 16: Avoid const keyword.

line 48 col 16: Unnecessary new keyword.

line 108 col 14: Unnecessary new keyword.

Fix lib/components/typeahead/typeahead.dart. (-8.17 points)

Analysis of lib/components/typeahead/typeahead.dart reported 17 hints, including:

line 17 col 17: Avoid const keyword.

line 34 col 24: Unnecessary new keyword.

line 43 col 26: Unnecessary new keyword.

line 48 col 35: Unnecessary new keyword.

line 103 col 28: Unnecessary new keyword.

Fix lib/components/table/table_component.dart. (-7.24 points)

Analysis of lib/components/table/table_component.dart reported 15 hints, including:

line 19 col 17: Avoid const keyword.

line 57 col 25: Unnecessary new keyword.

line 101 col 33: Unnecessary new keyword.

line 106 col 33: Unnecessary new keyword.

line 117 col 22: Unnecessary new keyword.

Fix additional 36 files with analysis or formatting issues. (-53.97 points)

Additional issues in the following files:

  • lib/components/datepicker/day_picker.dart (10 hints)
  • lib/components/rating/rating.dart (9 hints)
  • lib/components/collapse/collapse.dart (7 hints)
  • lib/components/timepicker/timepicker.dart (6 hints)
  • lib/core/position.dart (6 hints)
  • lib/components/accordion/accordion.dart (5 hints)
  • lib/components/alert/alert.dart (5 hints)
  • lib/components/carousel/carousel.dart (5 hints)
  • lib/components/file_upload/file_drop_directive.dart (5 hints)
  • lib/components/input/input.dart (5 hints)
  • lib/components/tabsx/tabsx.dart (5 hints)
  • lib/components/tooltip/tooltip.dart (5 hints)
  • lib/components/datepicker/month_picker.dart (4 hints)
  • lib/components/datepicker/year_picker.dart (4 hints)
  • lib/components/modal/modal.dart (4 hints)
  • lib/components/tabs/tabs.dart (4 hints)
  • lib/components/datepicker/date_picker_popup.dart (3 hints)
  • lib/components/pagination/pager.dart (3 hints)
  • lib/components/file_upload/file_select_directive.dart (2 hints)
  • lib/components/progress/progress.dart (2 hints)
  • lib/components/datepicker/index.dart (1 hint)
  • lib/components/dropdown/dropdown.dart (1 hint)
  • lib/components/dropdown/index.dart (1 hint)
  • lib/components/dropdown/toggle.dart (1 hint)
  • lib/components/file_upload/file_upload.dart (1 hint)
  • lib/components/pagination/pagination.dart (1 hint)
  • lib/components/popover/popover.dart (1 hint)
  • lib/components/prompt/prompt.dart (1 hint)
  • lib/components/table/table_directives.dart (1 hint)
  • lib/ng_bootstrap.dart (1 hint)
  • lib/components/button/toggle.dart (Run dartfmt to format lib/components/button/toggle.dart.)
  • lib/components/dropdown/menu.dart (Run dartfmt to format lib/components/dropdown/menu.dart.)
  • lib/components/prompt/prompt_service.dart (Run dartfmt to format lib/components/prompt/prompt_service.dart.)
  • lib/components/table/column_directive.dart (Run dartfmt to format lib/components/table/column_directive.dart.)
  • lib/components/table/column_editor_directive.dart (Run dartfmt to format lib/components/table/column_editor_directive.dart.)
  • lib/components/table/column_filterer_directive.dart (Run dartfmt to format lib/components/table/column_filterer_directive.dart.)

Maintenance issues and suggestions

Support latest dependencies. (-30 points)

The version constraint in pubspec.yaml does not support the latest published versions for 3 dependencies (angular, font_awesome, intl).

The package description is too short. (-20 points)

Add more detail to the description field of pubspec.yaml. Use 60 to 180 characters to describe the package, what it does, and its target use case.

Maintain an example. (-10 points)

Create a short demo in the example/ directory to show how to use this package.

Common filename patterns include main.dart, example.dart, and ng_bootstrap.dart. Packages with multiple examples should provide example/README.md.

For more information see the pub package layout conventions.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0-dev <3.0.0
angular ^5.1.0 5.3.1 6.0.0-alpha+1
angular_forms ^2.0.0 2.1.2 2.1.4
bootstrap_sass ^4.1.3 4.3.1
font_awesome ^4.7.0 4.7.0+1 5.10.1
intl ^0.15.0 0.15.8 0.16.0
js_shims ^1.0.0 1.0.0
stream_transform ^0.0.11 0.0.20
Transitive dependencies
analyzer 0.35.4 0.39.1
analyzer_plugin 0.2.1
angular_ast 0.5.9 0.5.11
angular_compiler 0.4.3 0.4.5
args 1.5.2
async 2.4.0
build 1.2.1
build_config 0.4.1+1
built_collection 4.2.2
built_value 6.8.2 7.0.0
built_value_generator 6.8.2 7.0.0
charcode 1.1.2
checked_yaml 1.0.2
code_builder 3.2.0
collection 1.14.12
convert 2.1.1
crypto 2.1.3
csslib 0.14.6+1 0.16.1
dart_style 1.2.4 1.3.3
fixnum 0.10.11
front_end 0.1.14 0.1.29
glob 1.2.0
html 0.14.0+3
js 0.6.1+1
json_annotation 3.0.0
kernel 0.3.14 0.3.29
logging 0.11.3+2
matcher 0.12.6
meta 1.1.8
node_interop 1.0.3
node_io 1.0.1+2
package_config 1.1.0
path 1.6.4
pedantic 1.8.0+1
pub_semver 1.4.2
pubspec_parse 0.1.5
quiver 2.1.2+1
source_gen 0.9.4+4 0.9.4+6
source_span 1.5.5
stack_trace 1.9.3
string_scanner 1.0.5
term_glyph 1.1.0
typed_data 1.1.6
watcher 0.9.7+12
yaml 2.2.0
Dev dependencies
build_runner any
sass_builder ^2.1.1