Aside

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.

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

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>

You can color the header by assigning any of the classnames ts-bg-blue, ts-bg-green, ts-bg-red and ts-bg-purple to the Aside element itself.

<aside data-ts="Aside" class="ts-bg-red">
	<div data-ts="Panel"></div>
</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 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">
	<div data-ts="Panel" data-ts.label="Tab 1">
		<p>Aside content.</p>
	</div>
	<div data-ts="Panel" data-ts.label="Tab 2">
		<p>Aside content.</p>
	</div>
</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();
});

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>

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);

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>

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