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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<div class="p-4 space-y-8"> <h3 class="text-lg font-semibold mb-4">Tab Alignments</h3> <div class="mb-6"> <p class="text-sm font-medium text-grayscale-500 mb-2 capitalize">start</p> <div class="bui-tabs" id="tabs-53803b82" 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-53803b82-tab-start-tab1" 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-53803b82-panel-start-tab1" tabindex="0" data-better-ui--tabs--container-target="tab" data-tab-id="start-tab1" 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">First</span> </button> <button id="tabs-53803b82-tab-start-tab2" 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-53803b82-panel-start-tab2" tabindex="-1" data-better-ui--tabs--container-target="tab" data-tab-id="start-tab2" 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">Second</span> </button> <button id="tabs-53803b82-tab-start-tab3" 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-53803b82-panel-start-tab3" tabindex="-1" data-better-ui--tabs--container-target="tab" data-tab-id="start-tab3" 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">Third</span> </button> </div> <div class="bui-tabs__panels flex-1 "> <div id="tabs-53803b82-panel-start-tab1" class="bui-tabs__panel" role="tabpanel" aria-labelledby="tabs-53803b82-tab-start-tab1" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="start-tab1"> <div class="p-3 text-sm text-grayscale-600">Alignment: start</div> </div> <div id="tabs-53803b82-panel-start-tab2" class="bui-tabs__panel hidden" role="tabpanel" aria-labelledby="tabs-53803b82-tab-start-tab2" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="start-tab2"> <div class="p-3 text-sm text-grayscale-600">Tab Two content</div> </div> <div id="tabs-53803b82-panel-start-tab3" class="bui-tabs__panel hidden" role="tabpanel" aria-labelledby="tabs-53803b82-tab-start-tab3" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="start-tab3"> <div class="p-3 text-sm text-grayscale-600">Tab Three content</div> </div> </div> </div> </div> <div class="mb-6"> <p class="text-sm font-medium text-grayscale-500 mb-2 capitalize">center</p> <div class="bui-tabs" id="tabs-f4b3044a" 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-center gap-1 "> <button id="tabs-f4b3044a-tab-center-tab1" 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-f4b3044a-panel-center-tab1" tabindex="0" data-better-ui--tabs--container-target="tab" data-tab-id="center-tab1" 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">First</span> </button> <button id="tabs-f4b3044a-tab-center-tab2" 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-f4b3044a-panel-center-tab2" tabindex="-1" data-better-ui--tabs--container-target="tab" data-tab-id="center-tab2" 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">Second</span> </button> <button id="tabs-f4b3044a-tab-center-tab3" 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-f4b3044a-panel-center-tab3" tabindex="-1" data-better-ui--tabs--container-target="tab" data-tab-id="center-tab3" 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">Third</span> </button> </div> <div class="bui-tabs__panels flex-1 "> <div id="tabs-f4b3044a-panel-center-tab1" class="bui-tabs__panel" role="tabpanel" aria-labelledby="tabs-f4b3044a-tab-center-tab1" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="center-tab1"> <div class="p-3 text-sm text-grayscale-600">Alignment: center</div> </div> <div id="tabs-f4b3044a-panel-center-tab2" class="bui-tabs__panel hidden" role="tabpanel" aria-labelledby="tabs-f4b3044a-tab-center-tab2" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="center-tab2"> <div class="p-3 text-sm text-grayscale-600">Tab Two content</div> </div> <div id="tabs-f4b3044a-panel-center-tab3" class="bui-tabs__panel hidden" role="tabpanel" aria-labelledby="tabs-f4b3044a-tab-center-tab3" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="center-tab3"> <div class="p-3 text-sm text-grayscale-600">Tab Three content</div> </div> </div> </div> </div> <div class="mb-6"> <p class="text-sm font-medium text-grayscale-500 mb-2 capitalize">end</p> <div class="bui-tabs" id="tabs-a2e17164" 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-end gap-1 "> <button id="tabs-a2e17164-tab-end-tab1" 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-a2e17164-panel-end-tab1" tabindex="0" data-better-ui--tabs--container-target="tab" data-tab-id="end-tab1" 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">First</span> </button> <button id="tabs-a2e17164-tab-end-tab2" 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-a2e17164-panel-end-tab2" tabindex="-1" data-better-ui--tabs--container-target="tab" data-tab-id="end-tab2" 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">Second</span> </button> <button id="tabs-a2e17164-tab-end-tab3" 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-a2e17164-panel-end-tab3" tabindex="-1" data-better-ui--tabs--container-target="tab" data-tab-id="end-tab3" 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">Third</span> </button> </div> <div class="bui-tabs__panels flex-1 "> <div id="tabs-a2e17164-panel-end-tab1" class="bui-tabs__panel" role="tabpanel" aria-labelledby="tabs-a2e17164-tab-end-tab1" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="end-tab1"> <div class="p-3 text-sm text-grayscale-600">Alignment: end</div> </div> <div id="tabs-a2e17164-panel-end-tab2" class="bui-tabs__panel hidden" role="tabpanel" aria-labelledby="tabs-a2e17164-tab-end-tab2" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="end-tab2"> <div class="p-3 text-sm text-grayscale-600">Tab Two content</div> </div> <div id="tabs-a2e17164-panel-end-tab3" class="bui-tabs__panel hidden" role="tabpanel" aria-labelledby="tabs-a2e17164-tab-end-tab3" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="end-tab3"> <div class="p-3 text-sm text-grayscale-600">Tab Three content</div> </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
<div class="p-4 space-y-8"> <h3 class="text-lg font-semibold mb-4">Tab Alignments</h3> <% %i[start center end].each do |alignment| %> <div class="mb-6"> <p class="text-sm font-medium text-grayscale-500 mb-2 capitalize"><%= alignment %></p> <%= render BetterUi::Tabs::ContainerComponent.new(mode: :js, style: :pills, alignment: alignment) do |tabs| %> <% tabs.with_tab(id: "#{alignment}-tab1", label: "First", active: true) %> <% tabs.with_tab(id: "#{alignment}-tab2", label: "Second") %> <% tabs.with_tab(id: "#{alignment}-tab3", label: "Third") %> <% tabs.with_panel(id: "#{alignment}-tab1", active: true) do %> <div class="p-3 text-sm text-grayscale-600">Alignment: <%= alignment %></div> <% end %> <% tabs.with_panel(id: "#{alignment}-tab2") do %> <div class="p-3 text-sm text-grayscale-600">Tab Two content</div> <% end %> <% tabs.with_panel(id: "#{alignment}-tab3") do %> <div class="p-3 text-sm text-grayscale-600">Tab Three content</div> <% end %> <% end %> </div> <% end %></div>No notes provided.
No params configured.