x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<div class="p-4"> <h3 class="text-lg font-semibold mb-4">Pills Style</h3> <div class="bui-tabs" id="tabs-b14476c2" data-controller="better-ui--tabs--container" data-better-ui--tabs--container-mode-value="js" data-better-ui--tabs--container-persist-value="false" data-better-ui--tabs--container-show-loading-value="false" data-better-ui--tabs--container-loader-delay-value="1000"> <div role="tablist" aria-label="Tabs" class="bui-tabs__list flex flex-row justify-start gap-1 "> <button id="tabs-b14476c2-tab-all" class="bui-tabs__tab inline-flex items-center gap-2 font-medium transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 px-4 py-2 text-sm rounded-lg bg-primary-600 text-white cursor-pointer" role="tab" aria-selected="true" aria-controls="tabs-b14476c2-panel-all" tabindex="0" data-better-ui--tabs--container-target="tab" data-tab-id="all" data-active-classes="rounded-lg bg-primary-600 text-white" data-inactive-classes="rounded-lg text-grayscale-600 hover:text-grayscale-900 hover:bg-grayscale-100" data-action="click->better-ui--tabs--container#selectTab keydown->better-ui--tabs--container#handleKeydown" type="button"> <span class="bui-tabs__tab-label">All</span> </button> <button id="tabs-b14476c2-tab-active" class="bui-tabs__tab inline-flex items-center gap-2 font-medium transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 px-4 py-2 text-sm rounded-lg text-grayscale-600 hover:text-grayscale-900 hover:bg-grayscale-100 cursor-pointer" role="tab" aria-selected="false" aria-controls="tabs-b14476c2-panel-active" tabindex="-1" data-better-ui--tabs--container-target="tab" data-tab-id="active" data-active-classes="rounded-lg bg-primary-600 text-white" data-inactive-classes="rounded-lg text-grayscale-600 hover:text-grayscale-900 hover:bg-grayscale-100" data-action="click->better-ui--tabs--container#selectTab keydown->better-ui--tabs--container#handleKeydown" type="button"> <span class="bui-tabs__tab-label">Active</span> </button> <button id="tabs-b14476c2-tab-draft" class="bui-tabs__tab inline-flex items-center gap-2 font-medium transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 px-4 py-2 text-sm rounded-lg text-grayscale-600 hover:text-grayscale-900 hover:bg-grayscale-100 cursor-pointer" role="tab" aria-selected="false" aria-controls="tabs-b14476c2-panel-draft" tabindex="-1" data-better-ui--tabs--container-target="tab" data-tab-id="draft" data-active-classes="rounded-lg bg-primary-600 text-white" data-inactive-classes="rounded-lg text-grayscale-600 hover:text-grayscale-900 hover:bg-grayscale-100" data-action="click->better-ui--tabs--container#selectTab keydown->better-ui--tabs--container#handleKeydown" type="button"> <span class="bui-tabs__tab-label">Draft</span> </button> <button id="tabs-b14476c2-tab-archived" class="bui-tabs__tab inline-flex items-center gap-2 font-medium transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 px-4 py-2 text-sm rounded-lg text-grayscale-600 hover:text-grayscale-900 hover:bg-grayscale-100 cursor-pointer" role="tab" aria-selected="false" aria-controls="tabs-b14476c2-panel-archived" tabindex="-1" data-better-ui--tabs--container-target="tab" data-tab-id="archived" data-active-classes="rounded-lg bg-primary-600 text-white" data-inactive-classes="rounded-lg text-grayscale-600 hover:text-grayscale-900 hover:bg-grayscale-100" data-action="click->better-ui--tabs--container#selectTab keydown->better-ui--tabs--container#handleKeydown" type="button"> <span class="bui-tabs__tab-label">Archived</span> </button> </div> <div class="bui-tabs__panels flex-1 "> <div id="tabs-b14476c2-panel-all" class="bui-tabs__panel" role="tabpanel" aria-labelledby="tabs-b14476c2-tab-all" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="all"> <div class="p-4"> <p class="text-grayscale-600">Showing all items (15 total)</p> </div> </div> <div id="tabs-b14476c2-panel-active" class="bui-tabs__panel hidden" role="tabpanel" aria-labelledby="tabs-b14476c2-tab-active" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="active"> <div class="p-4"> <p class="text-grayscale-600">Showing active items (8 total)</p> </div> </div> <div id="tabs-b14476c2-panel-draft" class="bui-tabs__panel hidden" role="tabpanel" aria-labelledby="tabs-b14476c2-tab-draft" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="draft"> <div class="p-4"> <p class="text-grayscale-600">Showing draft items (4 total)</p> </div> </div> <div id="tabs-b14476c2-panel-archived" class="bui-tabs__panel hidden" role="tabpanel" aria-labelledby="tabs-b14476c2-tab-archived" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="archived"> <div class="p-4"> <p class="text-grayscale-600">Showing archived items (3 total)</p> </div> </div> </div> </div></div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<div class="p-4"> <h3 class="text-lg font-semibold mb-4">Pills Style</h3> <%= render BetterUi::Tabs::ContainerComponent.new(mode: :js, style: :pills) do |tabs| %> <% tabs.with_tab(id: "all", label: "All", active: true) %> <% tabs.with_tab(id: "active", label: "Active") %> <% tabs.with_tab(id: "draft", label: "Draft") %> <% tabs.with_tab(id: "archived", label: "Archived") %> <% tabs.with_panel(id: "all", active: true) do %> <div class="p-4"> <p class="text-grayscale-600">Showing all items (15 total)</p> </div> <% end %> <% tabs.with_panel(id: "active") do %> <div class="p-4"> <p class="text-grayscale-600">Showing active items (8 total)</p> </div> <% end %> <% tabs.with_panel(id: "draft") do %> <div class="p-4"> <p class="text-grayscale-600">Showing draft items (4 total)</p> </div> <% end %> <% tabs.with_panel(id: "archived") do %> <div class="p-4"> <p class="text-grayscale-600">Showing archived items (3 total)</p> </div> <% end %> <% end %></div>No notes provided.
No params configured.