Light Blue Angular v7.1.7

  1. Charts
  2. Forms
  3. UI
  4. Grid
  5. Maps
  6. Tables

Charts

Apex Charts

Built with Apex Charts.

Ngx Charts

Built with Ngx Charts.

Echarts

Built with Echarts.

Highcharts

Built with Highcharts.

Form Elements

Ngx-bootstrap is used for all bootstrap components in Light Blue.

Use the .form-inline class to display a series of labels, form controls, and buttons on a single horizontal row.

Code example:

<form class="form-inline">
    <div class="form-group">
        <label for="formGroupExampleInput">Example label</label>
        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
    </div>
    <div class="form-group">
        <label for="formGroupExampleInput2">Another label</label>
        <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
    </div>
</form>

Inputs

Bootstrap styles input by default, so there is no need to add any classes to inputs. Just use them. Don't forget to include input type.

Bootstrap has a great documentation about forms.

Input Sizing

Any input can be sized by adding .col-*-* class. For vertical sizing .form-control-lg and .form-control-sm are available.

Prepended and appended inputs

Again Bootstrap helps. It has everything we need to prepend and append inputs.

Textareas

Auto-growing textarea uses ng-autosize directive to increase area size dynamically. Imports:

import { Autosize } from 'ng-autosize';

Wysiwyg editor is based on Tinymce. Imports:

import { EditorModule } from '@tinymce/tinymce-angular';

Markdown editor. Code example:

<textarea class="form-control" id="markdown-editor" data-provide="markdown" rows="6">
    ### Hello there
</textarea>

Selects

Two different type of selects avaiables in Sing template:

Imports:

import { Select2Module } from 'ng2-select2';

PATH: "../node_modules/bootstrap-select/dist/js/bootstrap-select.js"

Checkboxes and Radio

To style default checkboxes and radio buttons Awesome Bootstrap Checkbox library is used. This lib was written specially for Sing, so in case you find some bugs or want some features - let us know.

Usage: 

<div class="form-check abc-checkbox">
    <input class="form-check-input" id="checkbox1" type="checkbox">
    <label class="form-check-label" for="checkbox1">
        Default
    </label>
</div>

Button-like checkboxes

Bootstrap has a great api to handle button states - bootstrap buttons, so using it to imitate checkbox or radio buttons.

iOS-like switches

Usage example:

<div class="display-inline-block checkbox-ios">
    <label class="form-check-label" for="checkbox-ios1" class="switch">
        <input class="form-check-input" type="checkbox" class="ios" checked id="checkbox-ios1"><i></i>
    </label>
</div>

Pickers

Any field may have either ng2-datetime or Colorpicker attached. Required files:

import { NKDatetimeModule } from 'ng2-datetime/ng2-datetime';

PATHS: "../node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js",
       "../node_modules/bootstrap-timepicker/js/bootstrap-timepicker.min.js",
       "../node_modules/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js"

Masked Inputs

To make any input accept only formatted values there is a great package to use - angular2-text-mask. Imports:

import { TextMaskModule } from 'angular2-text-mask';

Sliders

Sing sliders are styled version of Bootstrap Slider plugin.

PATH: "../node_modules/bootstrap-slider/dist/bootstrap-slider.js"

Simple file uploads

Code example:

<div class="fileinput fileinput-new input-group" data-provides="fileinput">
    <div class="form-control" data-trigger="fileinput">
        <i class="glyphicon glyphicon-file fileinput-exists"></i>
        <span class="fileinput-filename"></span>
    </div>
    <span class="input-group-addon btn btn-default btn-file">
        <span class="fileinput-new">Select file</span>
        <span class="fileinput-exists">Change</span>
        <input name="..." type="file">
    </span>
    <a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
</div>

Dropzone

Dead simple file upload plugin with image preview Dropzone.

PATH: "../node_modules/dropzone/dist/dropzone.js"

Validation

Light Blue uses really great validation plugin - parsley.js. It's better to let it say itself:

Javascript forms validation. Powerful, UX aware & Dead simple. Never write a single javascript line anymore to validate your forms FrontEnd. Parsley will do that for you – and do it right –, thanks to its powerful DOM-API !

To activate it you need to add data-validate="parsley" to your form to make it work. That's it.

If you want to add step-by-step validation with wizard please check this guide.

PATH: "../node_modules/parsleyjs/dist/parsley.js"

Wizard

Twitter Bootstrap Wizard Plugin is used to build wizard-enabled widget.

This twitter bootstrap plugin builds a wizard out of a formatter tabbable structure. It allows to build a wizard functionality using buttons to go through the different wizard steps and using events allows to hook into each step individually.

To activate it you need to call bootstrap-wizard directive on your markup to create wizard.

If you want to add step-by-step wizard validation please check this guide.

<
PATH: "../node_modules/twitter-bootstrap-wizard/jquery.bootstrap.wizard.js"

Example Markup:

<div bootstrap-wizard data-height="444" class="form-wizard">
    <ul class="flex-md-row flex-column mb-sm nav nav-pills nav-fill">
        <li class="nav-item">
            <a class="nav-link" href="#tab1" data-toggle="tab">First</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#tab2" data-toggle="tab">Second</a>
        </li>
    </ul>
    <div class="bg-gray-lighter progress progress-xs">
        <div id="bar" class="progress-bar progress-xs progress-bar-gray-light" style="width: 50%;"></div>
    </div>
    <div class="tab-content">
        <div class="tab-pane bg-gray-lighter" id="tab1">
        <form action='' method="POST"
            data-parsley-priority-enabled="false"
            novalidate="novalidate">
            <fieldset>
                form fields
            </fieldset>
        </form>
        </div>
        <div class="tab-pane bg-gray-lighter" id="tab2">
            other inputs goes here
        </div>
    </div>
</div>

Application Wizard

Bootstrap Application Wizard is a ready to use wizard component with simple install process. You don't even need to have any special markup to instantiate it.

PATH: "../node_modules/bootstrap-application-wizard/src/bootstrap-wizard.js"

Components

This page contain Sing-y styled versions of Bootstrap Alerts, Labels, Tooltips, Popovers, Modals and Progress Bars. All styles are in bootstrap-override.scss.

For progress bars there is a small Sing extension which allows you to change progress bars sizes: .progress-sm, .progress-xs.

Notifications

Light Blue uses HubSpot's Messenger library. It's a client-side growl-like notifications with actions and auto-retry.

Read more at Messenger website.

Font Awesome Icons

Font Awesome is iconic font originally designed for Bootstrap (Font Awesome works great with all frameworks). It contains 439 icons in pictographic font form.

Read more at Font Awesome website.

Glyphicons Icons

200 icons in pictographic font form provided by Glyphicons.

Buttons

To create button you can style any html element with .btn class. Light Blue replaces default bootstrap colors with theme specific and adds two more: .btn-gray and .btn-inverse.

You can read more at ngx-bootstrap Buttons page.

Tabs

Tabs component may be placed both inside of .widget element or directly into main .content.

Originally Bootstrap has an option to put tabs on left and right. In Bootstrap 3 this feature was removed. We here think it was a pretty usable component, so Light Blue keeps it:

<div>
    <tabset>
        <tab heading="Basic title" id="tab1">Basic content</tab>
        <tab heading="Basic Title 1">Basic content 1</tab>
        <tab heading="Basic Title 2>Basic content 2</tab>
    </tabset>
</div>

For more info check ngx-bootstrap Tabs.

Accordion

Same as Tabs Accordion may be placed both as a widget inside .content or inside of .widget. Sing's accordion is a styled version of ngx-bootstrap Collapse component.

Grouped Lists

Light Blue grouped lists is a styled version of jQuery UI Sortable component.

List Groups

This nestable draggable lists are built with jQuery based lib - Nestable.

Grid System

Light Blue inherits 12-column grid system from Bootstrap's great one.

Widget Controls

For one of our previous works we have developed a custom jquery plugin called Widgster which provides an easy way to handle basic widget functions like collapsing, closing, ajax-refreshing & fullsreening.

Plugin is open-sourced. Check out Widgster repository.

To apply all these features to your default widget you have to add appropriate links (or buttons) to it:

<section class="widget" widget>
<header>
    <h6>
        Alert <span class="fw-semi-bold">Messages</span>
    </h6>
    <div class="widget-controls">
        <a href="#"><i class="glyphicon glyphicon-cog"v</i></a>
        <a href="#"><i class="fa fa-refresh"></i></a>
        <a href="#" data-widgster="close"><i class="glyphicon glyphicon-remove"></i></a>
    </div>
</header>
<div class="widget-body clearfix">
    <h3>Small <span class="fw-semi-bold">Elements</span></h3>
    <p class="mb-lg">Some content</p>
</div>
</section>

In the example above links are put into a .widget-controls but you can put them anywhere inside of widget.

Then widgster needs to be initialized via widget directtive and code:

$('.widget').widgster();

As you could guess data-widgster attribute defines widget action to be performed when link is clicked.

Options

Widgster accepts an object with options:

$('.widget').widgster({
    collapsed: true
});

Actions

All actions may be called via js:

$('.widget').widgster('close');

Events

Each action fires both before and after event. Events have the same names as actions. Before event may be canceled.

For example, to make refresh button spin:

$('.widget').on("load.widgster", function(){
    $(this).find('[data-widgster="load"] > i').addClass('fa-spin')
}).on("loaded.widgster", function(){
    $(this).find('[data-widgster="load"] > i').removeClass('fa-spin')
});

Google maps

To embed Google Maps into Light Blue great package is used - AGM.

Vector maps

Sometimes you need to use just simplified version of map. Jvectormap does a great job in such cases.

PATHS: "../node_modules/jvectormap/jquery-jvectormap.min.js",
       "../node_modules/jvectormap-world/jquery-jvectormap-world-mill-en.js"

Static Tables

Light Blue tables are based on Bootstrap tables with additional styling.

Sing introduces two new table classes .table-sm and .table-lg for decreased and increased table paddings accordingly.

Also, don't forget about .table-responsive class which adds horizontal scrollbar to tables for small screens.

Overflow Table

Add any non-bordered .table within a widget for a seamless design. Awesome look for no cost. Just wrap the table with simple css class .widget-table-overflow inside of widget: 

<table class="table table-sm">
<thead>
    <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Username</th>
    </tr>
</thead>
<tbody>
    <tr>
        <th scope="row">1</th>
        <td>Mark<td>
        <td>@mdo</td>
    </tr>
    <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>@fat</td>
    </tr>
    <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>@twitter</td>
    </tr>
</tbody>

Dynamic Tables

Dynamic tables built with angular2-datatables and ng2-table