bones_ui_bootstrap 5.3.1

Adds Bootstrap 5 support to Dart package bones_ui, allowing use of Bootstrap components and CSS.

Bones_UI Bootstrap

Adds Bootstrap 5 to Dart package Bones_UI, allowing use of Bootstrap components and CSS.

Embedded JavaScript Libraries

This package automatically loads (and bundles) the necessaries JavaScript libraries for Bootstrap.

• Bootstrap: 5.3.8
• Bootstrap Icons: 1.13.1
• JQuery: 3.7.1 (not loaded by this package: only with JQuery.load())
• Moment: 2.30.1
• Date Range Picker: vanilla-datetimerange-picker (Dan Grossman's daterangepicker 3.1 without JQuery), used by BSDateRangePicker

NOTE: You don't need to add any HTML or JavaScript code to your project to have full integration of Bootstrap with Bones_UI.

Bootstrap 4

Version 5.x of this package uses Bootstrap 5. For Bootstrap 4 use version 4.x (maintained on branch 4.x).

To migrate from 4.x, see the CHANGELOG (5.0.0) and the official Bootstrap 5 migration guide.

Usage

A simple usage example:

import 'package:bones_ui/bones_ui_kit.dart';
import 'package:bones_ui_bootstrap/bones_ui_bootstrap.dart';

class MyUI extends UIRoot {
  MyUI(super.rootContainer);

  @override
  void configure() {
    Bootstrap.load();
  }

  @override
  UIComponent renderContent() {
    return MyPage(content) ;
  }

}

class MyPage extends UIComponent {
  MyPage(super.parent);

  @override
  dynamic render() {
    return [
      $header(content: '''
        <nav class="navbar navbar-dark fixed-top bg-dark">
          <a class="navbar-brand" href="#">Fixed navbar</a>
        </nav>
      '''),
      $div(classes: 'container', content: '''
        <br>
        <h1 class="mt-5">Welcome</h1>
        This is <b>Bones_UI</b> with <b>Bootstrap</b>!
      '''),
      $footer(
          classes: 'footer fixed-bottom',
          content: [
            $hr,
            $div(
              classes: 'container text-muted pb-2',
              content: 'Copyright © ${ DateTime.now().year } Some Example')
          ]
      )
    ];
  }
}

void main() {

  var output = document.querySelector('#output');

  var myUI = MyUI( output ) ;
  myUI.initialize() ;

}

BSAccordion

BSAccordion(parent, [
  AccordionItem('Item A', 'Content A'),
  AccordionItem('Item B', 'Content B'),
], expandIndex: 0);

// Without outer borders and rounded corners (`accordion-flush`):
BSAccordion(parent, items, flush: true);

Custom Bootstrap theme (SCSS)

The Bootstrap SCSS sources are bundled (lib/bootstrap-5/scss, the same version as the bundled CSS and JS), so an app can compile its own themed Bootstrap CSS (e.g. with sass_builder):

// Theme variables, before the import:
$primary: #a2a2a2;
$body-bg: #1b1a16;

@import "package:bones_ui_bootstrap/bootstrap-5/scss/bootstrap";

The path has only the major version, so Bootstrap 5.x updates of this package don't change the import.

Then load only the Bootstrap JS, so the bundled (non-themed) CSS isn't loaded too. Set it at the app start, before any Bootstrap.load (including the ones made by this package, e.g. Bootstrap.enableTooltip):

Bootstrap.defaultLoadCss = false;

(Or Bootstrap.load(loadCss: false), when it's surely the first load call: only the first call loads.)

To keep the bundled CSS and only add theme overrides, import just functions, variables, variables-dark, maps, mixins and utilities (they don't output any CSS) and write the overrides with them.

Note: Bootstrap 5.3 SCSS uses @import and global built-in functions, so Dart Sass prints deprecation warnings.

Bootstrap 4 compatibility

For apps moving from version 4.x (Bootstrap 4), bootstrap-5/bs4-compat normalizes Bootstrap 5 to look like Bootstrap 4: import it instead of bootstrap-5/scss/bootstrap.

// Theme variables, before the import:
$primary: #a2a2a2;

@import "package:bones_ui_bootstrap/bootstrap-5/bs4-compat/bootstrap";

It's the Bootstrap 5 SCSS between:

• bs4-compat/_variables.scss: Bootstrap 4 values for the variables whose defaults changed (border radius, no responsive font sizes, links without underline, <small>, <hr>, .badge, .card, .form-control, .table, .navbar, ...). All !default: the app variables set before the import win.
• bs4-compat/_rules.scss: Bootstrap 4 styles without a Bootstrap 5 variable: checkboxes and radios without padding, date inputs height, lists indent, inherited .badge/.card colors, .table borders, .navbar-brand, and the accordion (BSAccordion) with the look of the Bootstrap 4 BSAccordion (each item a .card, the header a .card-header, the button a .btn-link).

Accordion items or headers styled by app classes: Bootstrap 5 sets the item radius and border color, and the expanded button color, with rules more specific than a single class. An item class with its own radius or border color also sets --bs-accordion-border-radius/--bs-accordion-border-color, and a header class that colors its contents (.x-head * { color: ... }) also sets --bs-accordion-btn-color/--bs-accordion-active-color:

.my-item {
  --bs-accordion-border-radius: 14px;
  border-radius: var(--bs-accordion-border-radius);
}

As in Bootstrap 4, the line under an accordion header keeps the .card-header border color ($accordion-border-color), even when the item has its own border color.

Color modes: the compatibility targets the Bootstrap 4 (light) look, which had no color modes. .card, .form-control, .table and the accordion have fixed light colors, so they don't follow data-bs-theme="dark". To use color modes, set those variables (e.g. $card-bg, $input-bg, $accordion-bg) back to the Bootstrap 5 CSS variables before the import.

Optionally, the Bootstrap 4 class names (float-right, text-left, ml-2, font-weight-bold, sr-only, badge-pill, ...), for markup that can't be easily renamed:

@import "package:bones_ui_bootstrap/bootstrap-5/bs4-compat/bootstrap";
@import "package:bones_ui_bootstrap/bootstrap-5/bs4-compat/class-aliases";

Tooltips

Use the Bootstrap 5 attributes (data-bs-*) and enable them with Bootstrap.enableTooltip() (or Bootstrap.enableTooltipOnRender(component)):

<button class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-title="Hello">Hover me</button>

Bootstrap Icons

You can use class BootstrapIcons to load SVG icons of Bootstrap Icons.

  var iconName = 'person-fill' ;
  var iconPath = BootstrapIcons.getIconPath(iconName) ;
  var svg = UISVG(parent, iconPath, width: '1.5em', color: '#0000FF', title: 'User') ;

Features and bugs

Please file feature requests and bugs at the issue tracker.

Colossus.Services

This is an open-source project from Colossus.Services: the gateway for smooth solutions.

Author

Graciliano M. Passos: gmpassos@GitHub.

See also

Related projects:

• Bones_UI: the UI framework this package extends.
• Bones_API: the server side counterpart of Bones_UI.
• DOM_Builder and DOM_Tools: DOM construction and utilities used by Bones_UI.
• Swiss_Knife: general utilities (date ranges, events, loaders, ...).
• Intl_Messages: internationalization messages.
• AMDJS: loads the bundled JavaScript libraries.
• Web_Utils: web (package:web) utilities.

Bundled libraries:

• Bootstrap and Bootstrap Icons.
• vanilla-datetimerange-picker, based on Dan Grossman's daterangepicker.
• Moment.js and jQuery.

License

Apache License - Version 2.0