bones_ui_bootstrap 2.3.0

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

Bones_UI Bootstrap

Adds Bootstrap 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: 4.6.1
• Bootstrap Icons: 1.8.1
• JQuery: 3.5.1
• Moment: 2.25.2

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

Usage

A simple usage example:

import 'dart:html';

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

class MyUI extends UIRoot {
  MyUI(Element rootContainer) : super(rootContainer);

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

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

}

class MyPage extends UIComponent {
  MyPage(Element parent) : 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() ;

}

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