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="max-w-lg"> <div class="w-full" data-controller="ui--tabs" data-ui--tabs-active-value="account" id="ui-tabs-ea13f3d8"> <div role="tablist" class="inline-flex items-center gap-4 border-b border-input"><button type="button" role="tab" id="ui-tab-ui-tabs-ea13f3d8-account" class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 disabled:pointer-events-none disabled:bg-muted! disabled:text-muted-foreground! relative -mb-px px-3 text-muted-foreground hover:text-foreground data-[state=active]:text-foreground data-[state=active]:border-b-2 data-[state=active]:border-primary text-sm h-10" aria-selected="true" aria-controls="ui-panel-ui-tabs-ea13f3d8-account" tabindex="0" data-state="active" data-ui--tabs-target="trigger" data-value="account" data-action="click->ui--tabs#activate keydown->ui--tabs#keydown">Account</button> <button type="button" role="tab" id="ui-tab-ui-tabs-ea13f3d8-password" class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 disabled:pointer-events-none disabled:bg-muted! disabled:text-muted-foreground! relative -mb-px px-3 text-muted-foreground hover:text-foreground data-[state=active]:text-foreground data-[state=active]:border-b-2 data-[state=active]:border-primary text-sm h-10" aria-selected="false" aria-controls="ui-panel-ui-tabs-ea13f3d8-password" tabindex="-1" data-state="inactive" data-ui--tabs-target="trigger" data-value="password" data-action="click->ui--tabs#activate keydown->ui--tabs#keydown">Password</button> <button type="button" role="tab" id="ui-tab-ui-tabs-ea13f3d8-team" class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 disabled:pointer-events-none disabled:bg-muted! disabled:text-muted-foreground! relative -mb-px px-3 text-muted-foreground hover:text-foreground data-[state=active]:text-foreground data-[state=active]:border-b-2 data-[state=active]:border-primary text-sm h-10" aria-selected="false" aria-controls="ui-panel-ui-tabs-ea13f3d8-team" tabindex="-1" data-state="inactive" data-ui--tabs-target="trigger" data-value="team" data-action="click->ui--tabs#activate keydown->ui--tabs#keydown">Team</button> <button type="button" role="tab" id="ui-tab-ui-tabs-ea13f3d8-billing" class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 disabled:pointer-events-none disabled:bg-muted! disabled:text-muted-foreground! relative -mb-px px-3 text-muted-foreground hover:text-foreground data-[state=active]:text-foreground data-[state=active]:border-b-2 data-[state=active]:border-primary text-sm h-10" disabled="disabled" aria-selected="false" aria-controls="ui-panel-ui-tabs-ea13f3d8-billing" tabindex="-1" data-state="inactive" data-ui--tabs-target="trigger" data-value="billing" data-action="click->ui--tabs#activate keydown->ui--tabs#keydown">Billing</button> </div> <div role="tabpanel" id="ui-panel-ui-tabs-ea13f3d8-account" class="mt-2" aria-labelledby="ui-tab-ui-tabs-ea13f3d8-account" tabindex="0" data-state="active" data-ui--tabs-target="panel" data-value="account"> <div class="space-y-4"> <p class="text-sm text-muted-foreground">Manage your account settings and preferences.</p> <div class="p-4 border rounded-md"> <p class="text-sm">Account content goes here.</p> </div> </div> </div> <div role="tabpanel" id="ui-panel-ui-tabs-ea13f3d8-password" class="mt-2" aria-labelledby="ui-tab-ui-tabs-ea13f3d8-password" tabindex="0" data-state="inactive" data-ui--tabs-target="panel" data-value="password" hidden="hidden"> <div class="space-y-4"> <p class="text-sm text-muted-foreground">Update your password and security settings.</p> <div class="p-4 border rounded-md"> <p class="text-sm">Password content goes here.</p> </div> </div> </div> <div role="tabpanel" id="ui-panel-ui-tabs-ea13f3d8-team" class="mt-2" aria-labelledby="ui-tab-ui-tabs-ea13f3d8-team" tabindex="0" data-state="inactive" data-ui--tabs-target="panel" data-value="team" hidden="hidden"> <div class="space-y-4"> <p class="text-sm text-muted-foreground">Manage team members and permissions.</p> <div class="p-4 border rounded-md"> <p class="text-sm">Team content goes here.</p> </div> </div> </div> <div role="tabpanel" id="ui-panel-ui-tabs-ea13f3d8-billing" class="mt-2" aria-labelledby="ui-tab-ui-tabs-ea13f3d8-billing" tabindex="0" data-state="inactive" data-ui--tabs-target="panel" data-value="billing" hidden="hidden"> <div class="space-y-4"> <p class="text-sm text-muted-foreground">View and manage billing information.</p> </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
<div class="max-w-lg"> <%= render(UI::Tabs.new(default_value: "account")) do |tabs| %> <% tabs.with_list do |list| %> <% list.with_trigger(value: "account") { "Account" } %> <% list.with_trigger(value: "password") { "Password" } %> <% list.with_trigger(value: "team") { "Team" } %> <% list.with_trigger(value: "billing", disabled: true) { "Billing" } %> <% end %> <% tabs.with_panel(value: "account") do %> <div class="space-y-4"> <p class="text-sm text-muted-foreground">Manage your account settings and preferences.</p> <div class="p-4 border rounded-md"> <p class="text-sm">Account content goes here.</p> </div> </div> <% end %> <% tabs.with_panel(value: "password") do %> <div class="space-y-4"> <p class="text-sm text-muted-foreground">Update your password and security settings.</p> <div class="p-4 border rounded-md"> <p class="text-sm">Password content goes here.</p> </div> </div> <% end %> <% tabs.with_panel(value: "team") do %> <div class="space-y-4"> <p class="text-sm text-muted-foreground">Manage team members and permissions.</p> <div class="p-4 border rounded-md"> <p class="text-sm">Team content goes here.</p> </div> </div> <% end %> <% tabs.with_panel(value: "billing") do %> <div class="space-y-4"> <p class="text-sm text-muted-foreground">View and manage billing information.</p> </div> <% end %> <% end %></div>No notes provided.
No params configured.