App > Documentation > Components > UI Elements
For progress bars there is a small Flatlogic One extension which allows you to change progress bars sizes:
Flatlogic One uses HubSpot's Messenger library. It's a client-side growl-like notifications with actions and auto-retry.
Read more at Messenger website.
To create button you can style any html element with
.btn class. Flatlogic One
replaces default bootstrap colors with theme specific and adds two more:
You can read more at 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 Flatlogic One keeps it:
<div class="tabbable tabs-left"> <ul id="tabs2" class="nav nav-tabs"> <li class=""><a href="#tab12" data-toggle="tab">Basic</a></li> <li class="active"><a href="#tab22" data-toggle="tab">Assumtion</a></li> <li class=""><a href="#tab32" data-toggle="tab">Works</a></li> </ul> <div id="tabs2c" class="tab-content"> <div class="tab-pane" id="tab12"> 1 </div> <div class="tab-pane active" id="tab22"> 2 </div> <div class="tab-pane" id="tab32"> 3 </div> </div> </div>
For more info check Bootstrap Tabs.
In case you want your tabs to become accordion for small screens checkout our tabcollapse plugin.
Same as Tabs Accordion may be placed both as a widget inside
.content or inside of
.widget. Flatlogic One's accordion is a styled version of
Bootstrap Collapse component.