Y7K Component: Button Bar

The Button Bar is a group of buttons that belong to each other and only one of them can be selected. If you select a button, it will emit a event to its parent Vue component.

It is based on Vue 2, MaintainableCSS and the Y7K Style Plate. Detailed information in the Y7K Showroom.

Installation

Install npm package

npm install @y7k/component-button-bar --save

Include in your project

import buttonBar from '@y7k/component-button-bar';

Variant 1: Register components globally:

import buttonBar from '@y7k/component-button-bar';
buttonBar.registerGlobally();

Variant 2: Use components directly:

import { ButtonBar } from '@y7k/component-button-bar';

// Vue component example
export default {

    components: {
        ButtonBar,
    },
}

Include styles

In your main.scss file

@import '@y7k/filterable-list/src/scss/buttonBar';

// If you don't set "node_modules" as a webpack include path:
@import '../[path]/../node_modules/@y7k/component-button-bar/src/scss/buttonBar';

Documentation

Please have a look at the usage documentation in the Y7K Showroom.