Lazy Tabs

Demo

Perferendis atque dolores sequi quidem consequatur. Quia quam architecto minus autem cupiditate. Ipsa quia totam ut voluptatum suscipit. Blanditiis tenetur dolorum nihil officiis fugiat. Recusandae veritatis repellendus omnis velit eveniet. Libero atque nobis quia magni eos. Voluptates qui voluptatem non voluptas et. Quis totam nesciunt dolore hic dolores. Ad culpa et perferendis id quae. Iure neque magnam eaque exercitationem architecto.

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.