x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="max-w-lg"> <div class="w-full" data-controller="ui--tabs" data-ui--tabs-active-value="general" id="ui-tabs-150b3b25"> <div role="tablist" class="inline-flex items-center gap-1 rounded-md bg-muted p-1"><button type="button" role="tab" id="ui-tab-ui-tabs-150b3b25-general" 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! px-3 rounded-sm text-muted-foreground hover:text-foreground data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm text-sm h-8" aria-selected="true" aria-controls="ui-panel-ui-tabs-150b3b25-general" tabindex="0" data-state="active" data-ui--tabs-target="trigger" data-value="general" data-action="click->ui--tabs#activate keydown->ui--tabs#keydown">General</button> <button type="button" role="tab" id="ui-tab-ui-tabs-150b3b25-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! px-3 rounded-sm text-muted-foreground hover:text-foreground data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm text-sm h-8" aria-selected="false" aria-controls="ui-panel-ui-tabs-150b3b25-security" tabindex="-1" data-state="inactive" data-ui--tabs-target="trigger" data-value="security" data-action="click->ui--tabs#activate keydown->ui--tabs#keydown">Security</button> <button type="button" role="tab" id="ui-tab-ui-tabs-150b3b25-notifications" 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! px-3 rounded-sm text-muted-foreground hover:text-foreground data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm text-sm h-8" aria-selected="false" aria-controls="ui-panel-ui-tabs-150b3b25-notifications" tabindex="-1" data-state="inactive" data-ui--tabs-target="trigger" data-value="notifications" data-action="click->ui--tabs#activate keydown->ui--tabs#keydown">Notifications</button> </div> <div role="tabpanel" id="ui-panel-ui-tabs-150b3b25-general" class="mt-2" aria-labelledby="ui-tab-ui-tabs-150b3b25-general" tabindex="0" data-state="active" data-ui--tabs-target="panel" data-value="general"> <p class="text-sm text-muted-foreground">General settings for your application.</p> </div> <div role="tabpanel" id="ui-panel-ui-tabs-150b3b25-security" class="mt-2" aria-labelledby="ui-tab-ui-tabs-150b3b25-security" tabindex="0" data-state="inactive" data-ui--tabs-target="panel" data-value="security" hidden="hidden"> <p class="text-sm text-muted-foreground">Security and privacy settings.</p> </div> <div role="tabpanel" id="ui-panel-ui-tabs-150b3b25-notifications" class="mt-2" aria-labelledby="ui-tab-ui-tabs-150b3b25-notifications" tabindex="0" data-state="inactive" data-ui--tabs-target="panel" data-value="notifications" hidden="hidden"> <p class="text-sm text-muted-foreground">Notification preferences.</p> </div> </div></div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="max-w-lg"> <%= render(UI::Tabs.new(variant: :pill, default_value: "general")) do |tabs| %> <% tabs.with_list do |list| %> <% list.with_trigger(value: "general") { "General" } %> <% list.with_trigger(value: "security") { "Security" } %> <% list.with_trigger(value: "notifications") { "Notifications" } %> <% end %> <% tabs.with_panel(value: "general") do %> <p class="text-sm text-muted-foreground">General settings for your application.</p> <% end %> <% tabs.with_panel(value: "security") do %> <p class="text-sm text-muted-foreground">Security and privacy settings.</p> <% end %> <% tabs.with_panel(value: "notifications") do %> <p class="text-sm text-muted-foreground">Notification preferences.</p> <% end %> <% end %></div>No notes provided.
No params configured.