Select button group

JointJS+ provides a SelectButtonGroup plugin that enables the ability to display groups of buttons with both single and multi selection support. The buttons can contain arbitrary HTML.

Installation

Import the SelectButtonGroup from the ui namespace and create a new instance of it:

import { ui } from '@joint/plus';

const selectButtonGroup = new ui.SelectButtonGroup({
    multi: true,
    selected: [1, 3],
    options: [
        { value: 'line-through', content: 'S' },
        { value: 'underline', content: 'U' },
        { value: 'italic', content: 'I' },
        { value: 'bold', content: 'B' }
    ]
});

document.getElementById('selectbuttongroup-holder').appendChild(selectButtonGroup.render().el);

There is also a UMD version available

Include joint.ui.selectButtonGroup.js and joint.ui.selectButtonGroup.css files to your HTML:

index.html

<link href="joint.ui.selectButtonGroup.css" rel="stylesheet" type="text/css">
<script src="joint.js"></script>
<script src="joint.ui.selectButtonGroup.js"></script>

And access the SelectButtonGroup through the joint.ui namespace:

index.js

const selectButtonGroup = new joint.ui.SelectButtonGroup({
    multi: true,
    selected: [1, 3],
    options: [
        { value: 'line-through', content: 'S' },
        { value: 'underline', content: 'U' },
        { value: 'italic', content: 'I' },
        { value: 'bold', content: 'B' }
    ]
});

document.getElementById('selectbuttongroup-holder').appendChild(selectButtonGroup.render().el);

How does SelectButtonGroup work?

Create an object of ui.SelectButtonGroup type, render it with the render() method and append the generated HTML element anywhere in your DOM.

Please see the demo for reference on how to do that if you're in doubts:

Open Sandbox

ui.SelectButtonGroup with icons

Open Sandbox