VCL toolbar
Horizontal bar which can contain navigation elements,
buttons, form controls etc.
Features
Multiple levels can be visualized with the modifiers vclLeveln
where n
is the level number. The first level (n = 1) is the default and does
not require a modifier.
Usage
Website or App Main Toolbar
A toolbar with logo, controls and a navigation menu
as typically found as main application toolbar.
To manifest its hierarchy level visually, it is enlarged by 10%.
main toolbar example
Input
A variant with an embedded input.
input example
Second Level
Second level toolbar with textual title in the middle.
secondary example
Classes
vclToolbar
vclToolbarTitle
Modifiers
vclSecondary
: Make is appear less important (level 2).vclTransparent
: Make the background color transparent.
Variables
--toolbar-l1-bg-color
--toolbar-l2-bg-color
Demo
example.html on GH-pages.