Null Pointer Micromanagement
Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@vcl/toolbar

0.6.3 • Public • Published

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.

Install

npm i @vcl/toolbar

DownloadsWeekly Downloads

11

Version

0.6.3

License

MIT

Unpacked Size

10.3 kB

Total Files

10

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar