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
<div class="max-w-lg"> <div class="w-full" data-controller="ui--tabs" data-ui--tabs-active-value="profile" id="ui-tabs-1b0be308"> <div role="tablist" class="inline-flex items-center gap-4 border-b border-input"><button type="button" role="tab" id="ui-tab-ui-tabs-1b0be308-profile" 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-1b0be308-profile" tabindex="0" data-state="active" data-ui--tabs-target="trigger" data-value="profile" data-action="click->ui--tabs#activate keydown->ui--tabs#keydown"><i data-lucide="user" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i> Profile </button> <button type="button" role="tab" id="ui-tab-ui-tabs-1b0be308-security" 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-1b0be308-security" tabindex="-1" data-state="inactive" data-ui--tabs-target="trigger" data-value="security" data-action="click->ui--tabs#activate keydown->ui--tabs#keydown"><i data-lucide="lock" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i> Security </button> <button type="button" role="tab" id="ui-tab-ui-tabs-1b0be308-settings" 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-1b0be308-settings" tabindex="-1" data-state="inactive" data-ui--tabs-target="trigger" data-value="settings" data-action="click->ui--tabs#activate keydown->ui--tabs#keydown"><i data-lucide="panel-left" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i> Settings </button> <button type="button" role="tab" id="ui-tab-ui-tabs-1b0be308-verified" 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-1b0be308-verified" tabindex="-1" data-state="inactive" data-ui--tabs-target="trigger" data-value="verified" data-action="click->ui--tabs#activate keydown->ui--tabs#keydown"><i data-lucide="badge-check" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i> Verified </button> </div> <div role="tabpanel" id="ui-panel-ui-tabs-1b0be308-profile" class="mt-2" aria-labelledby="ui-tab-ui-tabs-1b0be308-profile" tabindex="0" data-state="active" data-ui--tabs-target="panel" data-value="profile"> <p class="text-sm text-muted-foreground">Your profile information.</p> </div> <div role="tabpanel" id="ui-panel-ui-tabs-1b0be308-security" class="mt-2" aria-labelledby="ui-tab-ui-tabs-1b0be308-security" tabindex="0" data-state="inactive" data-ui--tabs-target="panel" data-value="security" hidden="hidden"> <p class="text-sm text-muted-foreground">Security settings.</p> </div> <div role="tabpanel" id="ui-panel-ui-tabs-1b0be308-settings" class="mt-2" aria-labelledby="ui-tab-ui-tabs-1b0be308-settings" tabindex="0" data-state="inactive" data-ui--tabs-target="panel" data-value="settings" hidden="hidden"> <p class="text-sm text-muted-foreground">Application settings.</p> </div> <div role="tabpanel" id="ui-panel-ui-tabs-1b0be308-verified" class="mt-2" aria-labelledby="ui-tab-ui-tabs-1b0be308-verified" tabindex="0" data-state="inactive" data-ui--tabs-target="panel" data-value="verified" hidden="hidden"> <p class="text-sm text-muted-foreground">Verification status.</p> </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
<div class="max-w-lg"> <%= render(UI::Tabs.new(default_value: "profile")) do |tabs| %> <% tabs.with_list do |list| %> <% list.with_trigger(value: "profile") do |trigger| %> <% trigger.with_leading_icon(name: "user") %> Profile <% end %> <% list.with_trigger(value: "security") do |trigger| %> <% trigger.with_leading_icon(name: "lock") %> Security <% end %> <% list.with_trigger(value: "settings") do |trigger| %> <% trigger.with_leading_icon(name: "panel-left") %> Settings <% end %> <% list.with_trigger(value: "verified", disabled: true) do |trigger| %> <% trigger.with_leading_icon(name: "badge-check") %> Verified <% end %> <% end %> <% tabs.with_panel(value: "profile") do %> <p class="text-sm text-muted-foreground">Your profile information.</p> <% end %> <% tabs.with_panel(value: "security") do %> <p class="text-sm text-muted-foreground">Security settings.</p> <% end %> <% tabs.with_panel(value: "settings") do %> <p class="text-sm text-muted-foreground">Application settings.</p> <% end %> <% tabs.with_panel(value: "verified") do %> <p class="text-sm text-muted-foreground">Verification status.</p> <% end %> <% end %></div>No notes provided.
No params configured.