vcl-button-group

Arrangement of multiple buttons as group.

Usage no npm install needed!

<script type="module">
  import vclButtonGroup from 'https://cdn.skypack.dev/vcl-button-group';
</script>

README

VCL button-group

Arrangement of multiple buttons as group.

Features

Horizontal (default) and vertical alignment of group members.

Usage

Two group members can be used to create a split button.

split-button example

Besides just a set of independent buttons, a button group can function as toggle button group. Such a group may allow for selection of a single button (radio button like) as the following.

toggle-group-radio example

With the possibility to select multiple ones, a button group forms a check box like group.

A horizontally justified layout can be realized with the properties of the layout component.

toggle-group-check example

Using layout classes, the items can be justified.

toggle-group-justified example

A vertical group can be built using the vclVertical modifier.

toggle-group-justified example

Classes

  • vclButtonGroup

Modifiers

  • vclVertical

Variables

Demo

example.html on GH-pages.