Boards

The Board is simply a box that features buttons and tabs.

The Board component must be created with a child component Panel.

<div data-ts="Board">
	<div data-ts="Panel">
		<p>The Board looks like this.</p>
	</div>
</div>

This gives you a box with a dropshadow, but there are ways to make it more interesting.

The Board looks like this.

To start with, we can give the Board a title.

ts.ui.get('#board', board => {
	board.title('My Board');
});

Buttons

Add buttons to the Board with the buttons method. This works exactly like it does in the Header API, so please refer to that section for details on setup and usage

ts.ui.get('#board', board => {
	board.buttons([
		{ label: 'One' },
		{ label: 'Two' },
		{ label: 'Three', onclick() {
			ts.ui.Notification.success('Clicked!');
		}}
	]);
});

Because these buttons are all tertiary, we will collect them inside a menu. If you specifically don't want this behavior, you can disable it with the uncompact method.

ts.ui.get('#board', board => {
	board.uncompact();
});

Here"s a summary of the buttons collection and button model.

Tabs

The Board can also be setup with tabs to make a switchboard. There are two ways to go about this depending on your prefered workflow. One is to declare the tabpanels directly in the markup via multiple Panel components.

<div data-ts="Board">
	<ul data-ts="Panels">
		<li data-ts="Panel" data-ts.label="One"></li>
		<li data-ts="Panel" data-ts.label="Two"></li>
		<li data-ts="Panel" data-ts.label="Three"></li>
	</ul>
</div>

Notice that they must be placed inside a containing Panels component for this to work. Also note that the individual Panel components must specify a label. The tabs will be rendered like this.

One
Two
Three

The other approach is to render the tabs programatically via the tabs method. This works exactly like it does in the Header API, so please refer to that section for details on setup and usage. Let's add some tabs to the current collection.

ts.ui.get('#tabboard', board => {
	board.tabs().push(
		{ label: 'Four' },
		{ label: 'Five' },
		{ label: 'Six', onselect() {
			ts.ui.Notification.success('Selected!');
		}});
});

Rembember that programatically generated tabs don't do anything by default. What happens in the onselect callback is completely up to you.

Here"s a summary of the tabs collection and tab model.