Aside

Side-panel used for small user interactions, such as selecting a date.

The Aside component must be created with a child component Panel.

<aside data-ts="Aside">
	<div data-ts="Panel">
		<p>Aside content.</p>
	</div>
</aside>

You can create the Aside wherever you like, just make sure that it's positioned outside of the Main element when it opens. Perhaps you can simply place it in the body.

<div data-ts="App">
	<div data-ts="Main">...</div>
	<aside data-ts="Aside">
		<div data-ts="Panel">
			<p>Aside content.</p>
		</div>
	</aside>
</div>

Adding a header

The data-ts.title attribute configures the Aside with a nice header.

<aside data-ts="Aside" data-ts.title="Aside Header">
	<div data-ts="Panel">
		<p>Aside content.</p>
	</div>
</aside>

Adding a footer

You can insert a footer in the Aside. Note that the footer will be fixed at the bottom of the aside.

<aside data-ts="Aside" data-ts.title="Aside Footer">
	<div data-ts="Panel">
		<p>Aside content.</p>
	</div>
	<footer>
		<p>Aside footer.</p>
	</footer>
</aside>

Opening the aside

The data-ts.open attribute can be flipped to toggle the Aside.

<aside data-ts="Aside" data-ts.open="false" id="myaside">
	<div data-ts="Panel">
		<p>Aside content.</p>
	</div>
</aside>

Let's try that with jQuery.

$('#myaside').attr('data-ts.open', true);

If you are doing that, you might as well open the Aside via the certified API.

ts.ui.get('#myaside').open();

Adding some tabs

If an Aside contains more than one Panel, we will automatically create a TabBar to switch between the panels like in this example.

<aside data-ts="Aside">
	<ul data-ts="Panels">
		<li data-ts="Panel" data-ts.label="Tab 1">
			<p>Aside content.</p>
		</li>
		<li data-ts="Panel" data-ts.label="Tab 2">
			<p>Aside content.</p>
		</li>
	</ul>
</aside>

The tabs can also be created programatically. In that case, the panel switching mechanism must be implemented manually somehow.

ts.ui.get('#aside3', aside => {
	aside.tabs([
		{label: 'Tab 1', onselect: function() {
			console.log('Panel one');
		}},
		{label: 'Tab 2', onselect: function() {
			console.log('Panel two');
		}}
	]).open();
});

You can also mix the two approaches to dynamically update tabs that were created with Panel elements. This will for example assign an onselect callback to the third tab.

ts.ui.get('#myaside', aside => {
	var tabs = aside.tabs();
	tabs[2].onselect = function() {
		console.log('selected');
	};
});

To remove all dynamically created tabs, you can simply clear the tab collection.

ts.ui.get('#myaside', aside => {
	aside.tabs().clear();
});

Adding some buttons

It's common for Asides to show a group of buttons, usually following a set of form fields. To make sure that they always look the same, the certified way to add this group of buttons is via a Buttons menu.

<aside data-ts="Aside">
	<div data-ts="Panel">
		... form fields here ...
		<menu data-ts="Buttons">
			<li>
				<button class="ts-primary">
					<span>Submit Changes</span>
				</button>
			</li>
			<li>
				<button class="ts-secondary">
					<span>Cancel Everything</span>
				</button>
			</li>
		</menu>
	</div>
</aside>

Showing the spinner

The data-ts.busy attribute can be set to show the spinner

<aside data-ts="Aside" data-ts.busy="Busy message!">
	<div data-ts="Panel">
		<p>Aside content.</p>
	</div>
</aside>

Let's try that with jQuery.

var aside = $("#myaside");
aside.attr('data-ts.busy', 'Loading');
aside.attr('data-ts.open', true);
setTimeout(function() {
	aside.attr('data-ts.busy', '');
	setTimeout(function() {
		aside.attr('data-ts.open', false);
	}, 500);
}, 1500);

Tracking the state

You can setup inline callbacks to be invoked when the aside changes state using one of onopen, onopened, onclose and onclosed. You can also do this with event listeners if you like.

<aside data-ts="Aside"
	ts.onopen="console.log('Will open')"
	ts.onopened="console.log('Did open')"
	ts.onclose="console.log('Will close')"
	ts.onclosed="console.log('Did close')">
	<div data-ts="Panel">
		<p>Aside content.</p>
	</div>
</aside>

Stacking Asides

Asides will automatically stack themselves whenever new asides open.

The old Asides will slide elegantly to the right
The new Aside will float the top of the z-index

Tooltip on aside header

A tooltip can be added to the aside header with the data-ts.tooltip attribute. Set the value equal to the text to be displayed in the tooltip.

<aside data-ts="Aside"
	id="aside-with-tooltip"
	data-ts.title="Aside Title with tooltip"
	data-ts.tooltip="My Tooltip">
	<div data-ts="Panel">
		<p>Aside content.</p>
	</div>
</aside>

The tooltip can also be toggled via the API. Provide a string as the first parameter to the function tooltip in order to change the contents of the tooltip.

ts.ui.get('#myAside', function(aside) {
	aside.tooltip('tooltip');
});

Run the script below to open the Aside with tooltip.

ts.ui.get('#aside-with-tooltip').open();