bones_ui_bootstrap

Creator: coderz1093

Last updated:

0 purchases

bones_ui_bootstrap Image
bones_ui_bootstrap Images

Languages

Categories

Add to Cart

Description:

bones ui bootstrap

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() ;

}

copied to clipboard
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') ;

copied to clipboard
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

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Files In This Product:

Customer Reviews

There are no reviews.