Lazy Tabs
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.