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.

<aside data-ts="Aside"> ... </aside>

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.

<aside data-ts="Aside" data-ts.open="true"> ... </aside>

JS interface

The component may also expose a JavaScript API. For example, the Aside can be opened with a method call instead of an attribute. You can get hold of the implementation using ts.ui.get, which takes an element as argument.

var myelement = document.querySelector('#myaside');
var component = ts.ui.get(myelement);
console.log(component); // [object ts.ui.AsideSpirit]
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.