API-only components

These components will insert themselves into the DOM and generally don't come with a HTML API. Some of them are known to affect the general page layout.

TopBar

The TopBar provides tabs for navigation and buttons for contextual actions.

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

ts.ui.TopBar.buttons([
	{label: 'Button', type: 'ts-primary'},
	{label: 'Button', type: 'ts-secondary'},
	{label: 'Button', onclick: function() {
		console.log('Clicked');
	}}
]);

Main TabBar

The Main TabBar provides second level tabbed navigation.

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

ts.ui.TabBar.tabs([
	{label: 'Tab One'},
	{label: 'Tab Two'},
	{label: 'Tab Three', onselect: function() {
		console.log('Selected');
	}}
]);

Main ToolBar

The Main ToolBar features a Search and even more buttons for contextual actions.

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

ts.ui.ToolBar.buttons([
	{label: 'Button', type: 'ts-primary'},
	{label: 'Button', type: 'ts-secondary'},
	{label: 'Button', onclick: function() {
		console.log('Clicked');
	}}
]).search({
	info: 'Search amongst the things',
	onsearch: function(value) {
		console.log(value);
	}
});;

The Footer is positioned below the Main area where it usually functions to display some buttons. But the Footer also supports actions, which are reserved for working with selected objects of any kind, as well as a Pager and a dedicated Collaboration button.

ts.ui.Footer.buttons([
	{label: 'Button', type: 'ts-primary'},
	{label: 'Button', type: 'ts-secondary'},
	{label: 'Button', onclick: () => {
		console.log('Button clicked');
	}}
]).actions([
	{label: 'Action', icon: 'ts-icon-followed'},
	{label: 'Action', icon: 'ts-icon-favorites'},
	{label: 'Action', icon: 'ts-icon-code', onclick: () => {
		console.log('Action clicked');
	}}
]).status('Hello World');

DatePicker

A easy way to select dates.

ts.ui.DatePicker({
	title: "Your Birthday",
	value: '1984-05-23',
	min: '1984-01-01',
	max: '1985-12-24',
	onselect: function(date) {
		ts.ui.Notification.success(date + ' selected');
		this.close();
	},
	onclosed: function() {
		this.dispose();
	}
}).open();

Dialog

Works much like the JavaScript confirm() method.

ts.ui.Dialog.confirm('Show the Warning dialog?', 'Show It', 'Nope', {
	onaccept: function() {
		ts.ui.Dialog.warning('Show the Danger dialog?', 'Of Course', {
			onaccept: function() {
				ts.ui.Dialog.danger('That could be dangerous.', 'Got it');
			}
		});
	},
});

Notification

Themed variants of the JavaScript alert() method.

ts.ui.Notification.success('Notification.success');
ts.ui.Notification.info('Notification.info');
ts.ui.Notification.warning('Notification.warning');
ts.ui.Notification.error('Notification.error');

Note

A nice way to inform the user about something in general. This is not for status messages! The Note attaches to the top of the page, so you will have to scroll back up...

ts.ui.Note({
	icon: 'ts-icon-heart',
	text: 'This is the Note. Thanks for scrolling up.',
	onclose: function() {
		ts.ui.Notification.success('The Note is gone...');
	}
});

UserCard

Show some details about a user.

ts.ui.UserCard({
	id: '6bf17754-f9de-4e31-aa31-bd3ff765b9c2',
	data: {
		name: 'Wired Earp',
		image: 'assets/wiredearp.png',
		title: 'EDB Programmer',
		role: 'Gentleman Spy',
		email: 'jmo@tradeshift.com',
		company: 'Tradeshift',
		companyUrl: 'http://tradeshift.com/'
	}
}).open();