Main

Main and Mains may come in handy to configure Header tabs via HTML.

The Main component is a fairly unassuming part of the basic layout where it functions to control the flex. Here it is, stuck between the App and Content.

<div data-ts="App">
	<div data-ts="Main">
		<div data-ts="Content">
			<div data-ts="Panel">
				<em>Welcome to my app.</em>
			</div>
		</div>
	</div>
</div>

We can add multiple Main elements inside a containing Mains to automatically generate top level tabs in the Header. They must be fitted with a label.

<div data-ts="App">
	<ul data-ts="Mains">
		<li data-ts="Main" data-ts.label="One">
			<div data-ts="Content">
				<div data-ts="Panel">…</div>
			</div>
		</li>
		<li data-ts="Main" data-ts.label="One">
			<div data-ts="Content">
				<div data-ts="Panel">…</div>
			</div>
		</li>
	</ul>
</div>

The tabs will automatically be updated when you remove or append further Main elements, just as long as you remember to set the label attribute.

Top level tabs may alternatively be configured via the Header API.

Tab selection

You can set the default selection with the selected attribute.

<div data-ts="Main"
	data-ts.label="Tab"
	data-ts.selected="true">
</div>

You can track tab selection with the inline event listener onselect.

<div data-ts="Main"
	data-ts.label="Tab"
	data-ts.onselect="alert('selected')">
</div>

You can of course still also manage tabs via the Header API, just remember that tabs added this way will not inject the corresponding Main element, so you must figure out an alternative way of showing the appropriate content when onselect happens.

ts.ui.Header.tabs().push({
	label: 'Bonus Tab',
	onselect: function() {
		ts.ui.Notification.success('Selected!');
	}
});