bones_ui_bootstrap 5.1.0

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.7
• Bootstrap Icons: 1.13.1
• JQuery: 3.7.1 (only loaded when needed, e.g. by BSDateRangePicker)
• Moment: 2.30.1
• Date Range Picker: 3.1

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:

Bootstrap.load(loadCss: false);

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.

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.

License

Apache License - Version 2.0