0.6.3 • Published 5 years ago

@vcl/panel v0.6.3

Weekly downloads
7
License
MIT
Repository
-
Last release
5 years ago

VCL panel

Container element to group and highlight content.

Features

A panel consisting a body, header and footer. All elements are optional. The panel body may for example hold textual content, tables, dividers etc.

There are two variants, a dialog variant optimized for modal dialogs and a card variant with a card like visual appearance.

Usage

The content of the body can be wrapped in a panel content (vclPanelContent) which adds padding.

basic example

A Panel with text and a table as content.

table example

Dialog variant.

panel example

Card variant.

card example

Classes

  • vclPanel
  • vclPanelHeader
  • vclPanelHeading
  • vclPanelTitle
  • vclPanelBody
  • vclPanelContent
  • vclPanelFooter

Modifiers

  • vclPanelCard
  • vclPanelDialog

Semantic coloring:

  • vclDanger

Variables

  • --panel-bg-color
  • --panel-hf-line-height
  • --panel-border-color
  • --panel-header-color
  • --panel-header-bg-color
  • --panel-footer-color
  • --panel-footer-bg-color
  • --panel-border-radius--card

Demo

example.html on GH-pages.

1.0.0-alpha.2

5 years ago

0.7.0-alpha.3

5 years ago

0.7.0-alpha.1

5 years ago

0.6.3

5 years ago

0.6.2

5 years ago

0.6.1

5 years ago

0.6.0-6

5 years ago

0.6.0-1

5 years ago

0.5.3

5 years ago

0.4.6

5 years ago

0.4.5

5 years ago

0.4.2

6 years ago

0.4.0

6 years ago

0.4.0-beta.3

6 years ago

0.4.0-beta.1

6 years ago

0.4.0-beta.0

6 years ago

0.4.0-0

6 years ago

0.3.0-0

6 years ago

0.3.0-2

6 years ago

0.3.0

6 years ago

0.2.3

6 years ago

0.2.2

6 years ago

0.2.1

6 years ago

0.2.0

7 years ago