Adds Bootstrap to Dart package Bones_UI, allowing use of Bootstrap components and CSS.
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.
A simple usage example:
import'dart:html';
import'package:bones_ui/bones_ui_kit.dart';
import'package:bones_ui_bootstrap/bones_ui_bootstrap.dart';
classMyUIextendsUIRoot {
MyUI(Element rootContainer) :super(rootContainer);
@overridevoidconfigure() {
Bootstrap.load();
}
@overrideUIComponentrenderContent() {
returnMyPage(content) ;
}
}
classMyPageextendsUIComponent {
MyPage(Element parent) :super(parent);
@overridedynamicrender() {
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')
]
)
];
}
}
voidmain() {
var output = document.querySelector('#output');
var myUI =MyUI( output ) ;
myUI.initialize() ;
}
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') ;
Please file feature requests and bugs at the issue tracker.
This is an open-source project from Colossus.Services: the gateway for smooth solutions.
Graciliano M. Passos: gmpassos@GitHub.