Lazy Tabs

Demo

Numquam dolorum ut molestias est qui. Et soluta doloremque aut voluptatem consequatur. Eum exercitationem et voluptates labore autem. Esse provident ipsam nihil consectetur nisi. Porro cupiditate qui fuga et quas. Quis adipisci ipsa eligendi eius libero. Tempore quidem placeat accusantium consequatur error. Sed iste qui officiis ipsam veritatis. Cum animi accusantium et perferendis deleniti. Reprehenderit molestiae at et molestiae recusandae.

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.