Basic usage

Most components are used simply by adding the data-ts attribute to elements. The framework will recognize this attribute and add behavior and styling.

Config attributes

Additional attributes may be used to configure the component. By convention, these will be prefixed with data-ts. (including the dot). The data-ts.open attribute would for example open the aside.

JS interface

The component may also expose a JavaScript API. You can get hold of the implementation using ts.ui.get, which takes an element or a CSS selector as argument. If you use a selector, the query will be scoped from the document root.

var element = document.querySelector('#myaside');
ts.ui.get(element, component => {
	component.open();
});

API-only components

Components that embody more complex behavior will usually be dealt with through a pure JavaScript API, so without writing markup. This will come in handy when we decide to change the complex behavior at a later stage.

ts.ui
	.DatePicker({
		title: 'Your Birthday',
		value: '1973-03-26'
	})
	.open();

When making apps with UI components, there’s a few basic rules we would like you to observe.