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
<div class="p-4"> <h3 class="text-lg font-semibold mb-4">Tabs with Disabled State</h3> <div class="bui-tabs" id="tabs-f4aa98e3" 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 border-b border-grayscale-200 "> <button id="tabs-f4aa98e3-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 border-b-2 border-primary-600 text-primary-600 cursor-pointer" role="tab" aria-selected="true" aria-controls="tabs-f4aa98e3-panel-active" tabindex="0" data-better-ui--tabs--container-target="tab" data-tab-id="active" data-active-classes="border-b-2 border-primary-600 text-primary-600" data-inactive-classes="border-b-2 border-transparent text-grayscale-600 hover:text-grayscale-900 hover:border-grayscale-300" data-action="click->better-ui--tabs--container#selectTab keydown->better-ui--tabs--container#handleKeydown" type="button"> <span class="bui-tabs__tab-label">Active Tab</span> </button> <button id="tabs-f4aa98e3-tab-enabled" 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 border-b-2 border-transparent text-grayscale-600 hover:text-grayscale-900 hover:border-grayscale-300 cursor-pointer" role="tab" aria-selected="false" aria-controls="tabs-f4aa98e3-panel-enabled" tabindex="-1" data-better-ui--tabs--container-target="tab" data-tab-id="enabled" data-active-classes="border-b-2 border-primary-600 text-primary-600" data-inactive-classes="border-b-2 border-transparent text-grayscale-600 hover:text-grayscale-900 hover:border-grayscale-300" data-action="click->better-ui--tabs--container#selectTab keydown->better-ui--tabs--container#handleKeydown" type="button"> <span class="bui-tabs__tab-label">Enabled Tab</span> </button> <button id="tabs-f4aa98e3-tab-disabled" 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 border-b-2 border-transparent text-grayscale-600 hover:text-grayscale-900 hover:border-grayscale-300 opacity-50 cursor-not-allowed" role="tab" aria-selected="false" aria-controls="tabs-f4aa98e3-panel-disabled" tabindex="-1" data-better-ui--tabs--container-target="tab" data-tab-id="disabled" data-active-classes="border-b-2 border-primary-600 text-primary-600" data-inactive-classes="border-b-2 border-transparent text-grayscale-600 hover:text-grayscale-900 hover:border-grayscale-300" data-action="click->better-ui--tabs--container#selectTab keydown->better-ui--tabs--container#handleKeydown" type="button" disabled="disabled" aria-disabled="true"> <span class="bui-tabs__tab-label">Disabled Tab</span> </button> <button id="tabs-f4aa98e3-tab-another" 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 border-b-2 border-transparent text-grayscale-600 hover:text-grayscale-900 hover:border-grayscale-300 cursor-pointer" role="tab" aria-selected="false" aria-controls="tabs-f4aa98e3-panel-another" tabindex="-1" data-better-ui--tabs--container-target="tab" data-tab-id="another" data-active-classes="border-b-2 border-primary-600 text-primary-600" data-inactive-classes="border-b-2 border-transparent text-grayscale-600 hover:text-grayscale-900 hover:border-grayscale-300" data-action="click->better-ui--tabs--container#selectTab keydown->better-ui--tabs--container#handleKeydown" type="button"> <span class="bui-tabs__tab-label">Another Tab</span> </button> </div> <div class="bui-tabs__panels flex-1 "> <div id="tabs-f4aa98e3-panel-active" class="bui-tabs__panel" role="tabpanel" aria-labelledby="tabs-f4aa98e3-tab-active" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="active"> <div class="p-4"> <h4 class="font-medium mb-2">Active Tab Content</h4> <p class="text-grayscale-600">This is the currently active tab.</p> </div> </div> <div id="tabs-f4aa98e3-panel-enabled" class="bui-tabs__panel hidden" role="tabpanel" aria-labelledby="tabs-f4aa98e3-tab-enabled" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="enabled"> <div class="p-4"> <h4 class="font-medium mb-2">Enabled Tab Content</h4> <p class="text-grayscale-600">This tab can be selected.</p> </div> </div> <div id="tabs-f4aa98e3-panel-disabled" class="bui-tabs__panel hidden" role="tabpanel" aria-labelledby="tabs-f4aa98e3-tab-disabled" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="disabled"> <div class="p-4"> <h4 class="font-medium mb-2">Disabled Tab Content</h4> <p class="text-grayscale-600">This content cannot be accessed because the tab is disabled.</p> </div> </div> <div id="tabs-f4aa98e3-panel-another" class="bui-tabs__panel hidden" role="tabpanel" aria-labelledby="tabs-f4aa98e3-tab-another" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="another"> <div class="p-4"> <h4 class="font-medium mb-2">Another Tab Content</h4> <p class="text-grayscale-600">This is another selectable tab.</p> </div> </div> </div> </div> <div class="mt-8"> <h4 class="text-md font-semibold mb-4">Pills Style with Disabled</h4> <div class="bui-tabs" id="tabs-0d9aa9b2" 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-0d9aa9b2-tab-pills-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 bg-success-600 text-white cursor-pointer" role="tab" aria-selected="true" aria-controls="tabs-0d9aa9b2-panel-pills-active" tabindex="0" data-better-ui--tabs--container-target="tab" data-tab-id="pills-active" data-active-classes="rounded-lg bg-success-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-0d9aa9b2-tab-pills-disabled" 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 opacity-50 cursor-not-allowed" role="tab" aria-selected="false" aria-controls="tabs-0d9aa9b2-panel-pills-disabled" tabindex="-1" data-better-ui--tabs--container-target="tab" data-tab-id="pills-disabled" data-active-classes="rounded-lg bg-success-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" disabled="disabled" aria-disabled="true"> <span class="bui-tabs__tab-label">Coming Soon</span> </button> <button id="tabs-0d9aa9b2-tab-pills-enabled" 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-0d9aa9b2-panel-pills-enabled" tabindex="-1" data-better-ui--tabs--container-target="tab" data-tab-id="pills-enabled" data-active-classes="rounded-lg bg-success-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">Enabled</span> </button> </div> <div class="bui-tabs__panels flex-1 "> <div id="tabs-0d9aa9b2-panel-pills-active" class="bui-tabs__panel" role="tabpanel" aria-labelledby="tabs-0d9aa9b2-tab-pills-active" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="pills-active"> <div class="p-4"> <p class="text-grayscale-600">The "Coming Soon" tab is disabled.</p> </div> </div> <div id="tabs-0d9aa9b2-panel-pills-disabled" class="bui-tabs__panel hidden" role="tabpanel" aria-labelledby="tabs-0d9aa9b2-tab-pills-disabled" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="pills-disabled"> <div class="p-4"> <p class="text-grayscale-600">Disabled content.</p> </div> </div> <div id="tabs-0d9aa9b2-panel-pills-enabled" class="bui-tabs__panel hidden" role="tabpanel" aria-labelledby="tabs-0d9aa9b2-tab-pills-enabled" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="pills-enabled"> <div class="p-4"> <p class="text-grayscale-600">Enabled tab content.</p> </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
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
<div class="p-4"> <h3 class="text-lg font-semibold mb-4">Tabs with Disabled State</h3> <%= render BetterUi::Tabs::ContainerComponent.new(mode: :js, style: :underline) do |tabs| %> <% tabs.with_tab(id: "active", label: "Active Tab", active: true) %> <% tabs.with_tab(id: "enabled", label: "Enabled Tab") %> <% tabs.with_tab(id: "disabled", label: "Disabled Tab", disabled: true) %> <% tabs.with_tab(id: "another", label: "Another Tab") %> <% tabs.with_panel(id: "active", active: true) do %> <div class="p-4"> <h4 class="font-medium mb-2">Active Tab Content</h4> <p class="text-grayscale-600">This is the currently active tab.</p> </div> <% end %> <% tabs.with_panel(id: "enabled") do %> <div class="p-4"> <h4 class="font-medium mb-2">Enabled Tab Content</h4> <p class="text-grayscale-600">This tab can be selected.</p> </div> <% end %> <% tabs.with_panel(id: "disabled") do %> <div class="p-4"> <h4 class="font-medium mb-2">Disabled Tab Content</h4> <p class="text-grayscale-600">This content cannot be accessed because the tab is disabled.</p> </div> <% end %> <% tabs.with_panel(id: "another") do %> <div class="p-4"> <h4 class="font-medium mb-2">Another Tab Content</h4> <p class="text-grayscale-600">This is another selectable tab.</p> </div> <% end %> <% end %> <div class="mt-8"> <h4 class="text-md font-semibold mb-4">Pills Style with Disabled</h4> <%= render BetterUi::Tabs::ContainerComponent.new(mode: :js, style: :pills, variant: :success) do |tabs| %> <% tabs.with_tab(id: "pills-active", label: "Active", active: true) %> <% tabs.with_tab(id: "pills-disabled", label: "Coming Soon", disabled: true) %> <% tabs.with_tab(id: "pills-enabled", label: "Enabled") %> <% tabs.with_panel(id: "pills-active", active: true) do %> <div class="p-4"> <p class="text-grayscale-600">The "Coming Soon" tab is disabled.</p> </div> <% end %> <% tabs.with_panel(id: "pills-disabled") do %> <div class="p-4"> <p class="text-grayscale-600">Disabled content.</p> </div> <% end %> <% tabs.with_panel(id: "pills-enabled") do %> <div class="p-4"> <p class="text-grayscale-600">Enabled tab content.</p> </div> <% end %> <% end %> </div></div>No notes provided.
No params configured.