Lazy Tabs

Demo

Ducimus cum voluptate pariatur quis aperiam. Omnis tenetur et possimus et quod. Expedita voluptatem soluta odio autem saepe. Eveniet voluptas iste necessitatibus iusto non. Et blanditiis cumque saepe numquam est. Dolorem rerum tempore non optio facilis. Est optio et aliquam porro perspiciatis. Aut rerum optio ab delectus sunt. Sit possimus perspiciatis fugit provident expedita. Ratione optio sint officia labore doloribus.

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.