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.
Header
The Header ↑ provides tabs for navigation and buttons that affect the entire app.
ts.ui.Header.buttons([
{label: 'Button', type: 'ts-primary'},
{label: 'Button', type: 'ts-secondary'},
{label: 'Button', onclick: function() {
console.log('Clicked');
}}
]);Footer
The Footer features buttons that relate to the Main area and actions that are reserved for working with selected objects of any kind.
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();If you find a bug or need a feature…