Sing App Angular v4.4.1
Angular 5 version based on the angular-cli. So if you want to add any lib in the bundle, just put PATH to this lib in angular-cli.json. JQuery should always be the first. Example:
scripts: [ "../node_modules/jquery/dist/jquery.js", ..., "../node_modules/jquery-flot/jquery.flot.js", ... ]
For the most components directives are used. Learn more about directives Available directives/components:
- Dropzone - an open source library that provides drag’n’drop file uploads with image previews.
- Morris - the library that powers the graphs.
- nvd3 - this project is an attempt to build re-usable charts and chart components for d3.js
- Rickshaw - a toolkit for creating interactive real-time graphs.
- Sparkline - this plugin generates sparklines (small inline charts) directly in the browser.
- Wizard - this Twitter Bootstrap plugin builds a wizard using a formatted tabbable structure
Built with Flot JS. Add this in angular-cli.json to add lib in a bundle. Required libs:<
Same as Flot Charts built with Flot. A bit different dependencies:
Built with jqeruy.sparkline.
Sparkline Pie Charts
Same as interactive sparklines based on jqeruy.sparkline.
Realtime chart is based on Rickshaw realtime example.
These charts are based on amazing D3.js library. Here is what D3 says about itself:
So it means that graphs are drawn with standard SVG and styled with CSS. You can customize all you like with techniques you already know.
There are two libraries used in Sing App which work on top of D3.js:
- nvd3 - which is focused on developing re-usable charts and chart components for d3.js without taking away the power that d3.js gives to developer, and
Built with Morris JS.
Easy Pie Charts
Built with Easy Pie Chart.
.form-inline class to display a series of labels, form controls, and buttons on a single horizontal row.
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.
Any input can be sized by adding
.col-*-* class. For vertical sizing
.form-control-sm are available.
Prepended and appended inputs
Again Bootstrap helps. It has everything we need to prepend and append inputs.
Auto-growing textarea uses ng-autosize directive to increase area size dynamically. Imports:
Wysiwyg editor is based on Tinymce. Imports:
Markdown editor. Code example:
Two different type of selects avaiables in Sing template:
- Select2 - is a really powerful tool used to convert default selects to interactive search-enabled widgets.
- Bootstrap Select - is Bootstrap based custom select, designed to behave like regular Bootstrap selects. This one can be colored as any button.
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.
Bootstrap has a great api to handle button states - bootstrap buttons, so using it to imitate checkbox or radio buttons.
Any field may have either ng2-datetime or Colorpicker attached. Required files:
To make any input accept only formatted values there is a great package to use - angular2-text-mask. Imports:
Sing sliders are styled version of Bootstrap Slider plugin.
Simple file uploads
Dead simple file upload plugin with image preview Dropzone.
Sing App uses really great validation plugin - parsley.js. It's better to let it say itself:
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.
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.<
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.
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:
Sing App 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.
200 icons in pictographic font form provided by Glyphicons.
To create button you can style any html element with
.btn class. Sing App
replaces default bootstrap colors with theme specific and adds two more:
You can read more at ngx-bootstrap Buttons page.
Tabs component may be placed both inside of
.widget element or directly into main
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 Sing App keeps it:
For more info check ngx-bootstrap Tabs.
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.
Sing App grouped lists is a styled version of jQuery UI Sortable component.
This nestable draggable lists are built with jQuery based lib - Nestable.
Sing App inherits 12-column grid system from Bootstrap's great one.
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:
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:
As you could guess
data-widgster attribute defines widget action to be performed when link is clicked.
- collapsed - if true collapses widget after page load;
- fullscreened - if true fullscreens widget after page load;
- bodySelector - widget body selector. Used for loading and collapsing. Default is
- load - an url to fetch widget body from. Default is
- showLoader - whether to show a loader when ajax refresh performed. Default is
- autoload - whether to automatically perform ajax refresh after page load. May be set to an integer value. If set, for example, to 2000 will refresh the widget every 2 seconds. Default is
- closePrompt(callback) - a function to be called when closing. Closing is
only performed when
Widgster accepts an object with options:
- close - closes the widget;
- collapse - collapses (minimizes) the widget. An element holding this data attribute will be hidden when widget gets expanded;
- expand - expands the widget. An element holding this data attribute will be hidden when widget gets collapsed;
- fullscreen - fullscreens the widget. An element holding this data attribute will be hidden when widget gets restored;
- restore - restores the widget back to its position. An element holding this data attribute will be hidden when widget gets fullscreened;
- load - reloads widget content from the url provided with
All actions may be called via js:
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:
To embed Google Maps into Sing App great package is used - AGM.
Sometimes you need to use just simplified version of map. Jvectormap does a great job in such cases.
Sing App tables are based on Bootstrap tables with additional styling.
Sing introduces two new table classes
for decreased and increased table paddings accordingly.
Also, don't forget about
.table-responsive class which adds horizontal scrollbar
to tables for small screens.
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
Dynamic tables built with angular2-datatables and ng2-table