Assign the data.ts="ToolBar" attribute to a header or footer to initialize it as a ToolBar. The data-ts.title attribute works to configure an optional title.

ToolBars can be positioned anywhere on the page, but on this page we've positioned before the Panel element in the basic layout. This way, it stays fixed on the top when the panel is scrolling. You can try this at home using the following markup structure.

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

ts.ui.get('#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 TopBar 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, even secondary buttons will be pushed to the Aside.

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

ts.ui.get('#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.get('#toolbar').buttons().forEach((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.get('#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.get('#toolbar').buttons().forEach(button => {
	if(button.visible) {
		button.hide();
	} else {
		button.show();
	}
});

Disable buttons

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

ts.ui.get('#toolbar').buttons().forEach(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.get('#toolbar').buttons()[0];
button.busy();
setTimeout(() => {
	button.done();
}, 1000);

The busy method supports an optional status message.

var button = ts.ui.get('#toolbar').buttons()[0];
button.busy('Making progress');
setTimeout(() => {
	button.done();
}, 1000);

Button groups

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

ts.ui.get('#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.get('#toolbar').buttons()[2];
group.push({
	icon: 'ts-icon-other',
	type: 'ts-danger'
});

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.get('#toolbar').search({
	onsearch: function(value) {
		ts.ui.Notification.success(value || 'Search cleared');
	}
});

Search callbacks

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

var search = ts.ui.get('#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.get('#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 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.get('#toolbar').search({
	info: 'Flex all the way!',
	flex: 1
});

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 ToolBar methods.