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';
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() ;
}
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.