bones_ui_bootstrap 1.0.1

Adds Bootstrap 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.4.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.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