VelvetKit

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
<div class="w-full" data-controller="ui--tabs" data-ui--tabs-active-value="account" id="ui-tabs-a15c5e85">
  <div role="tablist" class="inline-flex items-center gap-4 border-b border-input"><button type="button" role="tab" id="ui-tab-ui-tabs-a15c5e85-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-a15c5e85-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-a15c5e85-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-a15c5e85-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-a15c5e85-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-a15c5e85-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-a15c5e85-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-a15c5e85-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-a15c5e85-account" class="mt-2" aria-labelledby="ui-tab-ui-tabs-a15c5e85-account" tabindex="0" data-state="active" data-ui--tabs-target="panel" data-value="account">Account settings live here.</div>
  <div role="tabpanel" id="ui-panel-ui-tabs-a15c5e85-password" class="mt-2" aria-labelledby="ui-tab-ui-tabs-a15c5e85-password" tabindex="0" data-state="inactive" data-ui--tabs-target="panel" data-value="password" hidden="hidden">Password rotation lives here.</div>
  <div role="tabpanel" id="ui-panel-ui-tabs-a15c5e85-team" class="mt-2" aria-labelledby="ui-tab-ui-tabs-a15c5e85-team" tabindex="0" data-state="inactive" data-ui--tabs-target="panel" data-value="team" hidden="hidden">Team membership lives here.</div>
  <div role="tabpanel" id="ui-panel-ui-tabs-a15c5e85-billing" class="mt-2" aria-labelledby="ui-tab-ui-tabs-a15c5e85-billing" tabindex="0" data-state="inactive" data-ui--tabs-target="panel" data-value="billing" hidden="hidden">Billing details live here.</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
render(UI::Tabs.new(variant: variant.to_sym, size: size.to_sym, 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")  { "Account settings live here." }
  tabs.with_panel(value: "password") { "Password rotation lives here." }
  tabs.with_panel(value: "team")     { "Team membership lives here." }
  tabs.with_panel(value: "billing")  { "Billing details live here." }
end

No notes provided.

Param Description Input

—

—