Dart pub

 

ng_bootstrap 1.1.1

Published Nov 24, 2018 • Updated: 1.1.1 / 1.2.0-alpha.1
0 likes
dart
js
flutter
web

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

with Flutter:


$ flutter pub get

Alternatively, your editor might support pub get or flutter 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]
71
Health:
Code health derived from static analysis. [more]
75
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
16
Overall:
Weighted score of the above. [more]
61
Learn more about scoring.

We analyzed this package on Feb 19, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.5

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 (font_awesome, intl, stream_transform).

Package is getting outdated. (-23.84 points)

The package was last published 64 weeks ago.

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.1
js_shims ^1.0.0 1.0.0
stream_transform ^0.0.11 0.0.20 1.1.0
Transitive dependencies
analyzer 0.35.4 0.39.4
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.2
build_config 0.4.2
built_collection 4.3.2
built_value 7.0.9
charcode 1.1.3
checked_yaml 1.0.2
code_builder 3.2.1
collection 1.14.12
convert 2.1.1
crypto 2.1.4
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
js 0.6.1+1
json_annotation 3.0.1
kernel 0.3.14 0.3.29
logging 0.11.4
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.9.0
pub_semver 1.4.3
pubspec_parse 0.1.5
quiver 2.1.2+1
source_gen 0.9.4+4 0.9.4+7
source_span 1.6.0
stack_trace 1.9.3
string_scanner 1.0.5
term_glyph 1.1.0
typed_data 1.1.6
watcher 0.9.7+13
yaml 2.2.0
Dev dependencies
build_runner any
sass_builder ^2.1.1