@lit-element-bootstrap/button-group

An implementation of Bootstrap v4.3.1 button group components in LitElement.

Live demo

Go to live demo

Installation

Install via npm:

npm install @lit-element-bootstrap/button-group

Install via yarn:

yarn add @lit-element-bootstrap/button-group

Install via unpkg:

https://unpkg.com/@lit-element-bootstrap/button-group@latest/unpkg/index.bundled.js

Import

import all modules:

import '@lit-element-bootstrap/button-group';

import specific module (preferred):

import '@lit-element-bootstrap/button-group/bs-button-group.js';

import specific class:

// import specific class from all modules
import { BsButtonGroup } from '@lit-element-bootstrap/button-group';

// import specific class
import { BsButtonGroup } from '@lit-element-bootstrap/button-group/bs-button-group.js';

Examples

Button group

<bs-button-group>
    <bs-button context="secondary">Left</bs-button>
    <bs-button context="secondary">Middle</bs-button>
    <bs-button context="secondary">Right</bs-button>
</bs-button-group>

Toolbar with button groups

<bs-button-toolbar>
    <bs-button-group style="margin-right: 0.5rem;">
        <bs-button context="secondary">1</bs-button>
        <bs-button context="secondary">2</bs-button>
        <bs-button context="secondary">3</bs-button>
        <bs-button context="secondary">4</bs-button>
    </bs-button-group>
    <bs-button-group style="margin-right: 0.5rem;">
        <bs-button context="secondary">5</bs-button>
        <bs-button context="secondary">6</bs-button>
        <bs-button context="secondary">7</bs-button>
    </bs-button-group>
    <bs-button-group style="margin-right: 0.5rem;">
        <bs-button context="secondary">8</bs-button>
    </bs-button-group>
</bs-button-toolbar>

Toolbar with button group and input group

<bs-button-toolbar style="margin-bottom: 1rem;">
    <bs-button-group style="margin-right: 0.5rem;">
        <bs-button context="secondary">1</bs-button>
        <bs-button context="secondary">2</bs-button>
        <bs-button context="secondary">3</bs-button>
        <bs-button context="secondary">4</bs-button>
    </bs-button-group>
    <bs-input-group>
        <bs-input-group-prepend>
            <bs-input-group-text>@</bs-input-group-text>
        </bs-input-group-prepend>
        <bs-form-input placeholder="Input group example"></bs-form-input>
    </bs-input-group>
</bs-button-toolbar>

Button group sizes

<bs-button-group size="large">
    <bs-button context="secondary">Left</bs-button>
    <bs-button context="secondary">Middle</bs-button>
    <bs-button context="secondary">Right</bs-button>
</bs-button-group>

<bs-button-group>
    <bs-button context="secondary">Left</bs-button>
    <bs-button context="secondary">Middle</bs-button>
    <bs-button context="secondary">Right</bs-button>
</bs-button-group>

<bs-button-group size="small">
    <bs-button context="secondary">Left</bs-button>
    <bs-button context="secondary">Middle</bs-button>
    <bs-button context="secondary">Right</bs-button>
</bs-button-group>

Button group with a dropdown

<bs-button-group>
    <bs-button context="secondary">1</bs-button>
    <bs-button context="secondary">2</bs-button>
    <bs-button-group>
        <bs-dropdown>
            <bs-button context="secondary" dropdown-toggle>Dropdown</bs-button>
            <bs-dropdown-menu down x-placement="bottom-start">
                <bs-dropdown-item-link index="0" title="Dropdown link"></bs-dropdown-item-link>
                <bs-dropdown-item-link index="1" title="Dropdown link"></bs-dropdown-item-link>
            </bs-dropdown-menu>
        </bs-dropdown>
    </bs-button-group>
</bs-button-group>

Button group in a vertical direction

<bs-button-group direction="vertical">
    <bs-button context="secondary">Button</bs-button>
    <bs-button context="secondary">Button</bs-button>
    <bs-button context="secondary">Button</bs-button>
    <bs-button context="secondary">Button</bs-button>
    <bs-button context="secondary">Button</bs-button>
    <bs-button context="secondary">Button</bs-button>
</bs-button-group>

Components

Tag | Class | --- | --- | <bs-button-group> | BsButtonGroup | <bs-button-toolbar | BsButtonToolbar |

Components

Styles | Export | --- | --- | bs-button-group.css.js | BsButtonGroupCss bs-button-toolbar.css.js | BsButtonToolbarCss bs-button-group-size.css.js | BsButtonGroupSizeCss bs-button-group-direction.css.js | BsButtonGroupDirectionCss

Slots

Component | Name | Description | --- | --- | --- | <bs-button-group> | slot | Place button elements | <bs-button-toolbar | slot | Place button groups elements |

Theming

BsButtonGroup

Property | Default value | Description --- | --- | --- | --btn-group-position | relative | Button group position --btn-group-display | inline-flex | Button group display --btn-group-vertical-align | middle | Button group vertical align --btn-group-btn-position | relative | Button items position --btn-group-btn-flex | 0 1 auto | Button items flex --btn-group-btn-z-index-hover | 1 | Button items hover z-index --btn-group-btn-z-index-active | 1 | Button items active z-index --btn-group-btn-pd-top-sm | 0.25rem | Small size button items top padding --btn-group-btn-pd-bottom-sm | 0.25rem | Small size button items bottom padding --btn-group-btn-pd-left-sm | 0.5rem | Small size button items left padding --btn-group-btn-pd-right-sm | 0.5rem | Small size button items right padding --btn-group-btn-font-size-sm | 0.875rem | Small size button items font size --btn-group-btn-line-height-sm | 1.5 | Small size button items line height --btn-group-btn-top-left-radius-sm | 0.2rem | Small size button items top left border radius --btn-group-btn-bottom-left-radius-sm | 0.2rem | Small size button items bottom left border radius --btn-group-btn-top-right-radius-sm | 0.2rem | Small size button items top right border radius --btn-group-btn-bottom-left-radius-sm | 0.2rem | Small size button items bottom left border radius --btn-group-pd-top-lg | 0.5rem | Large size button items top padding --btn-group-pd-bottom-lg | 0.5rem | Large size button items bottom padding --btn-group-pd-left-lg | 1rem | Large size button items left padding --btn-group-pd-right-lg | 1rem | Large size button items right padding --btn-group-font-size-lg | 1.25rem | Large size button items font size --btn-group-line-height-lg | 1.5 | Large size button items line height --btn-group-top-left-radius-lg | 0.3rem | Large size button items top left border radius --btn-group-bottom-left-radius-lg | 0.3rem | Large size button items bottom left border radius --btn-group-top-right-radius-lg | 0.3rem | Large size button items top right border radius --btn-group-bottom-right-radius-lg | 0.3rem | Large size button items bottom right border radius --btn-group-btn-bd-top-right-radius-h | 0 | Horizontal button items top right border radius --btn-group-btn-bd-bottom-right-radius-h | 0 | Horizontal button items bottom right border radius --btn-group-btn-bd-top-left-radius-h | 0 | Horizontal button items top left border radius --btn-group-btn-bd-botom-left-radius-h | 0 | Horizontal button items bottom left border radius --btn-group-flex-direction-v | column | Button group vertical flex direction --btn-group-align-items-v | flex-start | Button group vertical align items --btn-group-justify-content-v | center | Button group vertical justify content --btn-group-btn-width-v | 100% | Vertical button items width --btn-group-btn-bd-bottom-left-radius-v | 0 | Vertical button items bottom left border radius --btn-group-btn-bd-bottom-right-radius-v | 0 | Vertical button items bottom right border radius --btn-group-btn-bd-top-left-radius-v | 0 | Vertical button items top left border radius --btn-group-btn-bd-top-right-radius-v | 0 | Vertical button items top right border radius