Beware that this API will be replaced be the ts.ui.Header in a future release.

Before we begin, we may consider adding a descriptive title to the ToolBar.

ts.ui.ToolBar.title('My ToolBar');

Add buttons to the ToolBar with the buttons method. This both sets and gets. If you omit the argument, you"ll get the current buttons (jQuery style).

ts.ui.ToolBar.buttons([
	{label : 'Primary', type : 'ts-primary'},
	{label : 'Secondary', type : 'ts-secondary'},
	{label : 'Tertiary One'},
	{label : 'Tertiary Two'}
]);

You can use array methods like push, pop, shift, unshift, splice, reverse and so on to manage buttons. Just note that the buttons length is readonly.

• The buttons type property works like the CSS class for a regular Button
• The ToolBar will automatically sort all buttons from primary to tertiary.
• If there"s more than one tertiary button, these will be pushed to an Aside.
• In the mobile breakpoint, all the buttons will be pushed to an Aside.

Buttons won"t actually do anything unless you define the onclick method.

ts.ui.ToolBar.buttons().splice(0, 1, {
	label : 'Click me!',
	type : 'ts-primary',
	onclick: function() {
		this.label = 'Thanks';
	}
});

Fortunately, you can always change what happens when a button gets clicked.

ts.ui.ToolBar.buttons().forEach(function(button, index) {
	button.label = "Button " + (index + 1);
	button.onclick = function() {
		ts.ui.Notification.success(this.label);
	};
});

Query buttons

You can locate buttons by index in the buttons collection. But since this isn"t likely to match the order in which they appear on screen, it"s easier to give the buttons an id and find them using buttons.get().

var buttons = ts.ui.ToolBar.buttons();
buttons.push({ id: 'example-button' });
var button = buttons.get('example-button');
button.label = 'My Button';
button.type = 'ts-secondary';

Hide buttons

You can hide() and show() buttons. You can also toggle visible.

ts.ui.ToolBar.buttons().forEach(function(button) {
	if(button.visible) {
		button.hide();
	} else {
		button.show();
	}
});

Disable buttons

You can disable() and enable() buttons. You can also toggle disabled.

ts.ui.ToolBar.buttons().forEach(function(button) {
	if(button.disabled) {
		button.enable();
	} else {
		button.disable();
	}
});

Busy buttons

We can display a temporary progress indicator with the busy and done methods.

var button = ts.ui.ToolBar.buttons()[0];
button.busy();
setTimeout(function() {
	button.done();
}, 1000);

The busy method supports an optional status message.

var button = ts.ui.ToolBar.buttons()[0];
button.busy('Making progress');
setTimeout(function() {
	button.done();
}, 1000);

Button groups

You can also group buttons in arrays to create button groups that look like this:

ts.ui.ToolBar.buttons([
	{ label: 'Normal'},
	{ label: 'Normal'},
	[
		{ label: 'Accept', type: 'ts-primary' },
		{ label: 'Reject', type: 'ts-danger' }
	]
]);

You can of course also create grouped buttons with icons instead of text.

var group = ts.ui.ToolBar.buttons()[2];
group.push({
	icon: 'ts-icon-other',
	type: 'ts-secondary'
});

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

You'll get a dedicated search field by passing an object to the search method.

ts.ui.ToolBar.search({
	onsearch: function(value) {
		ts.ui.Notification.success(value || 'Search cleared');
	}
});

The search field expands when the field is focused by the user or whenever there's a non-empty value in the field. You can change the value like this:

var search = ts.ui.ToolBar.search();
search.value = 'Hello world';

Search callbacks

The onsearch callback gets invoked when when the user presses ENTER.

var search = ts.ui.ToolBar.search();
search.value = 'Press ENTER here';
search.onsearch = function(value) {
	ts.ui.Notification.success(value || 'Search cleared');
};

If defined, the onidle method gets called whenever the user pauses typing.

var search = ts.ui.ToolBar.search();
search.value = 'Try it now!';
search.onidle = function(value) {
	ts.ui.Notification.success(value);
};

The onidle method may also be called when the field loses focus. The idletime property controls the timeout value, default is 500 (milliseconds).

Search info

The info property doubles as both the placeholder when the field is expanded and the title (or tooltip) when the field is collapsed.

var search = ts.ui.ToolBar.search();
search.info = 'Search amongst the things';
search.value = ''; // collapse the field

Search flex

You can flex the search field to make it stretch the available width of the ToolBar. In that case, it will remain expanded even when there's no default value.

ts.ui.ToolBar.search({
	tip: 'Flex all the way!',
	flex: 1
}).buttons([
	{ label: 'No Flex', type: 'ts-primary' }
]);

You can also assign flex to buttons, although that has little practical value. In the future, we may provide a more advanced distribution scheme. That's why we use a number instead of a boolean, but you should always use 1 for now.

Here' an overview of the properties and methods of the Search model.

— and here's a final overview of the Main ToolBar methods.

Assign data-ts="ToolBar" to a header or menu to initialize it as a ToolBar. Another attribute data-ts.title assigns a default title to the ToolBar.

<header data-ts="ToolBar" data-ts.title="My ToolBar"></header>

The ToolBar has no default outline, so we've fitted ours with a dropshadow. In your app, any such outlining should be done under consideration of the neighboring elements.

You can get a hold of the component using a CSS selector and call any of the methods we've seen applicable to the Main ToolBar.

ts.ui.get('#mytoolbar', toolbar => {
	toolbar.buttons([
		{label: 'One', type: 'ts-primary'},
		{label: 'Two', type: 'ts-secondary'},
		{label: 'Three'}
	]);
});

The micro method may come in handy to make the ToolBar somewhat smaller. In the HTML, you can also assign the CSS classname ts-micro for the same effect.

ts.ui.get('#mytoolbar').micro();

The ToolBar will economize horizonatal space by collecting multiple tertiaray buttons in a menu (when you Run This Code, you may need to scroll the page back up to see it).

ts.ui.get('#mytoolbar', toolbar => {
	toolbar.buttons().push(
		{label: 'Four'},
		{label: 'Five'},
		{label: 'Six'}
	);
});

If you are absolutely certain that your buttons will fit in all supported languages, you can disable this behavior with the uncompact method.

ts.ui.get('#mytoolbar').uncompact();

Here's an overview of the inline ToolBar component.