Get started

CDN version

NPM version

Tradeshift UI is also available as a npm package . You can simply install it in your project executing the following command

then don't forget to import ts.js and ts.css in your main application entrypoint

there is a style helpers in the package, so you can import it somewhere in your shared styles module. Please note that since it is a less file, you should equip your build pipeline with less files loader

Typescript

For Typescript projects, we also supply the library with type definitions. Take a look at this package and add it to your Typescript application

Initialization

UI components are initialized on the DOMContentLoaded event, but this might change some day. To make sure that all the components are initialized before you do something to them, you can wrap your code in a callback like this.

ts.ui.ready(function() {
	var component = ts.ui.get(element);
	component.dosomething();
});

• Before DOMContentLoaded the callback will be executed later.
• After DOMContentLoaded the callback will execute immedeately.

You can perhaps make it easier for yourself by kickstarting your app with a ts.ui.ready callback, because then you wont't have to worry about it later on.

ts.ui.ready(function() {
	boostrap_everything();
});

Before we begin, you'll need to mark up your page with the basic layout.