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
<div class="p-4"> <h3 class="text-lg font-semibold mb-4">Bordered Style</h3> <div class="bui-tabs" id="tabs-eea273f0" 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-0 "> <button id="tabs-eea273f0-tab-details" 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 border-grayscale-200 rounded-t-lg -mb-px bg-white border-b-white text-primary-600 cursor-pointer" role="tab" aria-selected="true" aria-controls="tabs-eea273f0-panel-details" tabindex="0" data-better-ui--tabs--container-target="tab" data-tab-id="details" data-active-classes="border border-grayscale-200 rounded-t-lg -mb-px bg-white border-b-white text-primary-600" data-inactive-classes="border border-transparent text-grayscale-600 hover:text-grayscale-900 rounded-t-lg -mb-px" data-action="click->better-ui--tabs--container#selectTab keydown->better-ui--tabs--container#handleKeydown" type="button"> <span class="bui-tabs__tab-label">Details</span> </button> <button id="tabs-eea273f0-tab-reviews" 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 border-transparent text-grayscale-600 hover:text-grayscale-900 rounded-t-lg -mb-px cursor-pointer" role="tab" aria-selected="false" aria-controls="tabs-eea273f0-panel-reviews" tabindex="-1" data-better-ui--tabs--container-target="tab" data-tab-id="reviews" data-active-classes="border border-grayscale-200 rounded-t-lg -mb-px bg-white border-b-white text-primary-600" data-inactive-classes="border border-transparent text-grayscale-600 hover:text-grayscale-900 rounded-t-lg -mb-px" data-action="click->better-ui--tabs--container#selectTab keydown->better-ui--tabs--container#handleKeydown" type="button"> <span class="bui-tabs__tab-label">Reviews</span> </button> <button id="tabs-eea273f0-tab-shipping" 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 border-transparent text-grayscale-600 hover:text-grayscale-900 rounded-t-lg -mb-px cursor-pointer" role="tab" aria-selected="false" aria-controls="tabs-eea273f0-panel-shipping" tabindex="-1" data-better-ui--tabs--container-target="tab" data-tab-id="shipping" data-active-classes="border border-grayscale-200 rounded-t-lg -mb-px bg-white border-b-white text-primary-600" data-inactive-classes="border border-transparent text-grayscale-600 hover:text-grayscale-900 rounded-t-lg -mb-px" data-action="click->better-ui--tabs--container#selectTab keydown->better-ui--tabs--container#handleKeydown" type="button"> <span class="bui-tabs__tab-label">Shipping</span> </button> </div> <div class="bui-tabs__panels flex-1 "> <div id="tabs-eea273f0-panel-details" class="bui-tabs__panel" role="tabpanel" aria-labelledby="tabs-eea273f0-tab-details" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="details"> <div class="p-4 border border-t-0 border-grayscale-200 rounded-b-lg"> <h4 class="font-medium mb-2">Product Details</h4> <p class="text-grayscale-600">High-quality product with premium materials and craftsmanship.</p> </div> </div> <div id="tabs-eea273f0-panel-reviews" class="bui-tabs__panel hidden" role="tabpanel" aria-labelledby="tabs-eea273f0-tab-reviews" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="reviews"> <div class="p-4 border border-t-0 border-grayscale-200 rounded-b-lg"> <h4 class="font-medium mb-2">Customer Reviews</h4> <p class="text-grayscale-600">4.8 out of 5 stars (128 reviews)</p> </div> </div> <div id="tabs-eea273f0-panel-shipping" class="bui-tabs__panel hidden" role="tabpanel" aria-labelledby="tabs-eea273f0-tab-shipping" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="shipping"> <div class="p-4 border border-t-0 border-grayscale-200 rounded-b-lg"> <h4 class="font-medium mb-2">Shipping Information</h4> <p class="text-grayscale-600">Free shipping on orders over $50. Delivery in 3-5 business days.</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
<div class="p-4"> <h3 class="text-lg font-semibold mb-4">Bordered Style</h3> <%= render BetterUi::Tabs::ContainerComponent.new(mode: :js, style: :bordered) do |tabs| %> <% tabs.with_tab(id: "details", label: "Details", active: true) %> <% tabs.with_tab(id: "reviews", label: "Reviews") %> <% tabs.with_tab(id: "shipping", label: "Shipping") %> <% tabs.with_panel(id: "details", active: true) do %> <div class="p-4 border border-t-0 border-grayscale-200 rounded-b-lg"> <h4 class="font-medium mb-2">Product Details</h4> <p class="text-grayscale-600">High-quality product with premium materials and craftsmanship.</p> </div> <% end %> <% tabs.with_panel(id: "reviews") do %> <div class="p-4 border border-t-0 border-grayscale-200 rounded-b-lg"> <h4 class="font-medium mb-2">Customer Reviews</h4> <p class="text-grayscale-600">4.8 out of 5 stars (128 reviews)</p> </div> <% end %> <% tabs.with_panel(id: "shipping") do %> <div class="p-4 border border-t-0 border-grayscale-200 rounded-b-lg"> <h4 class="font-medium mb-2">Shipping Information</h4> <p class="text-grayscale-600">Free shipping on orders over $50. Delivery in 3-5 business days.</p> </div> <% end %> <% end %></div>No notes provided.
No params configured.