Sing App Vue v5.0.0
Built with Flot JS. Required libs:
Built with jqeruy.sparkline.
Realtime chart is based on Rickshaw realtime example.
Sparkline Pie Charts
Same as interactive sparklines based on jqeruy.sparkline.
Built with Morris JS.
Easy Pie Charts
Built with Easy Pie Chart.
Same as Flot Charts built with Flot. A bit different dependencies:
Form ElementsForm Elements are bootsrap components imported from bootsrap-vue
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 wrapping in
<Col sm="*" xs="*"> component. For vertical sizing
size="sm" props are available.
Auto-growing textarea uses Textarea Autosize to increase area size dynamically. Imports:
Wysiwyg editor is based on Trumbowyg. Imports:
Markdown editor is built with Mavon Editor. Imports:
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.
Bootstrap Select code example:
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 button, so using it to imitate checkbox or radio buttons.
Any field may have either vue2-datepicker or vue-color attached.
To make any input accept only formatted values there is a great plugin to use - MaskedInput.
Sing sliders are styled version of vue-bootstrap-slider.
Dead simple file upload plugin with image preview vue-dropzone.
Sing App have a good validation component directive.
This page contain Sing-y styled versions of Bootstrap (bootstrap-vue) All components styles are in bootstrap-override.scss.
For progress bars there is a small Sing extension which allows you to change progress bars sizes by adding className:
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 or use
<v-button> component. Sing App
replaces default bootstrap colors with theme specific and adds two more:
You can read more at bootstrap-vue buttons page.
Tabs component may be placed both inside of
.widget element or directly into main
For more info check bootstrap-vue 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
>bootstrap-vue vollapse component.
Sing App grouped lists is a styled version of jQuery UI vue-draggable-nested-tree.
This nestable draggable lists are built with vuedgraggable .
Sing App inherits 12-column grid system from Bootstrap's great one with bootstrap-vue.
For one of our previous works we have developed a custom component called Widget based on Widgster which provides an easy way to handle basic widget functions like collapsing, closing, refreshing & fullsreening.
- 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
- 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
To embed Google Maps into Sing App great package is used - vue-google-maps
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-vue tables with additional styling.
Tables aviable in different sizes:
Also, don't forget about
responsive prop which adds horizontal scrollbar
to tables for small screens.
Dynamic tables built with fully custamizable vue-tables-2.