Phlex Components
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div>
  <div data-controller="tabs" default-value="account" class="w-96">
    <div class="inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground"><button type="button" data-tabs-target="trigger" data-action="click->tabs#show" data-value="account" class="inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow">Account</button><button type="button" data-tabs-target="trigger" data-action="click->tabs#show" data-value="password" class="inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow">Password</button></div>
    <div data-tabs-target="content" data-value="account" class="mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hidden">
      <div class="rounded-lg border p-6 space-y-4 bg-background text-foreground">
        <div class="space-y-0">AccountUpdate your account details.</div>
      </div>
    </div>
    <div data-tabs-target="content" data-value="password" class="mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hidden">
      <div class="rounded-lg border p-6 space-y-4 bg-background text-foreground">
        <div>PasswordChange your password here. After saving, you'll be logged out.</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
render(TestView.new) do
  Tabs(default_value: "account", class: "w-96") do
    TabsList do
      TabsTrigger(value: "account") { "Account" }
      TabsTrigger(value: "password") { "Password" }
    end
    TabsContent(value: "account") do
      div(class: "rounded-lg border p-6 space-y-4 bg-background text-foreground") do
        div(class: "space-y-0") do
          plain("Account")
          plain("Update your account details.")
        end
      end
    end
    TabsContent(value: "password") do
      div(class: "rounded-lg border p-6 space-y-4 bg-background text-foreground") do
        div do
          plain("Password")
          plain("Change your password here. After saving, you'll be logged out.")
        end
      end
    end
  end
end

Default TabsPreview

No params configured.