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
<div class="p-4"> <h3 class="text-lg font-semibold mb-4">Vertical Tabs (Left Position)</h3> <div class="bui-tabs flex" id="tabs-9934d461" 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-col justify-start border-r border-grayscale-200 "> <button id="tabs-9934d461-tab-general" 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-9934d461-panel-general" tabindex="0" data-better-ui--tabs--container-target="tab" data-tab-id="general" 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">General</span> </button> <button id="tabs-9934d461-tab-security" 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-9934d461-panel-security" tabindex="-1" data-better-ui--tabs--container-target="tab" data-tab-id="security" 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">Security</span> </button> <button id="tabs-9934d461-tab-billing" 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-9934d461-panel-billing" tabindex="-1" data-better-ui--tabs--container-target="tab" data-tab-id="billing" 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">Billing</span> </button> <button id="tabs-9934d461-tab-team" 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-9934d461-panel-team" tabindex="-1" data-better-ui--tabs--container-target="tab" data-tab-id="team" 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">Team</span> </button> </div> <div class="bui-tabs__panels flex-1 "> <div id="tabs-9934d461-panel-general" class="bui-tabs__panel" role="tabpanel" aria-labelledby="tabs-9934d461-tab-general" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="general"> <div class="p-4"> <h4 class="font-medium mb-2">General Settings</h4> <p class="text-grayscale-600">Configure your general application settings and preferences.</p> </div> </div> <div id="tabs-9934d461-panel-security" class="bui-tabs__panel hidden" role="tabpanel" aria-labelledby="tabs-9934d461-tab-security" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="security"> <div class="p-4"> <h4 class="font-medium mb-2">Security Settings</h4> <p class="text-grayscale-600">Manage your security preferences and two-factor authentication.</p> </div> </div> <div id="tabs-9934d461-panel-billing" class="bui-tabs__panel hidden" role="tabpanel" aria-labelledby="tabs-9934d461-tab-billing" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="billing"> <div class="p-4"> <h4 class="font-medium mb-2">Billing Information</h4> <p class="text-grayscale-600">View and update your billing details and payment methods.</p> </div> </div> <div id="tabs-9934d461-panel-team" class="bui-tabs__panel hidden" role="tabpanel" aria-labelledby="tabs-9934d461-tab-team" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="team"> <div class="p-4"> <h4 class="font-medium mb-2">Team Management</h4> <p class="text-grayscale-600">Invite team members and manage their permissions.</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
35
36
37
38
<div class="p-4"> <h3 class="text-lg font-semibold mb-4">Vertical Tabs (Left Position)</h3> <%= render BetterUi::Tabs::ContainerComponent.new(mode: :js, style: :underline, position: :left) do |tabs| %> <% tabs.with_tab(id: "general", label: "General", active: true) %> <% tabs.with_tab(id: "security", label: "Security") %> <% tabs.with_tab(id: "billing", label: "Billing") %> <% tabs.with_tab(id: "team", label: "Team") %> <% tabs.with_panel(id: "general", active: true) do %> <div class="p-4"> <h4 class="font-medium mb-2">General Settings</h4> <p class="text-grayscale-600">Configure your general application settings and preferences.</p> </div> <% end %> <% tabs.with_panel(id: "security") do %> <div class="p-4"> <h4 class="font-medium mb-2">Security Settings</h4> <p class="text-grayscale-600">Manage your security preferences and two-factor authentication.</p> </div> <% end %> <% tabs.with_panel(id: "billing") do %> <div class="p-4"> <h4 class="font-medium mb-2">Billing Information</h4> <p class="text-grayscale-600">View and update your billing details and payment methods.</p> </div> <% end %> <% tabs.with_panel(id: "team") do %> <div class="p-4"> <h4 class="font-medium mb-2">Team Management</h4> <p class="text-grayscale-600">Invite team members and manage their permissions.</p> </div> <% end %> <% end %></div>No notes provided.
No params configured.