Lazy Tabs

Demo

Sed laudantium non eum nobis facere. Est repudiandae consectetur debitis et libero. Fuga facilis id sapiente possimus minus. Dignissimos et iusto error deserunt officiis. Molestiae maiores aut natus est praesentium. Rerum ut quod voluptatem officia animi. Minus asperiores ipsam ut vel sit. Debitis quam iusto ipsa et non. Autem modi dolorem nobis temporibus nisi.

HTML #

 1<div id="demo">
 2    <div role="tablist">
 3        <button
 4            role="tab"
 5            aria-selected="true"
 6            data-on:click="@get('/examples/lazy_tabs/0')"
 7        >
 8            Tab 0
 9        </button>
10        <button
11            role="tab"
12            aria-selected="false"
13            data-on:click="@get('/examples/lazy_tabs/1')"
14        >
15            Tab 1
16        </button>
17        <button
18            role="tab"
19            aria-selected="false"
20            data-on:click="@get('/examples/lazy_tabs/2')"
21        >
22            Tab 2
23        </button>
24        <!-- More tabs... -->
25    </div>
26    <div role="tabpanel">
27        <p>Lorem ipsum dolor sit amet...</p>
28        <p>Consectetur adipiscing elit...</p>
29        <!-- Tab content -->
30    </div>
31</div>

Explanation #

This example shows how easy it is to implement tabs using Datastar. Following the principles of Hypertext As The Engine Of Application State, the selected tab is a part of the application state. Therefore, to display and select tabs in your application, simply include the tab markup in the returned HTML fragment.