Tabs
Overview
Tabs enable you to display contents in same place but with different way to show it.
Usually, clickable element are shown above (the tabs), and each one switch to some content related to it. Tabs can be display vertically by default or horizontally. See examples below.
Installation
Notes
To use this component, you need to initialize your project first. If not done yet, run one of the following command:
npx jsxpine init or yarn jsxpine init or pnpm jsxpine init or bunx jsxpine init.
Go to the installation and usage page to learn more.
jsxpine add tabsCopied !
Copied !
-------------------- Tabs Component -------------------------
import clsx from "clsx";
/**
* @typedef TabsProps
* @type {import("../common/props").HTMLTagWithChildren & import("../common/props").DirectionProps}
*/
/**
* TabHeaderItem component props
* @param {import("../common/props").HTMLTagWithChildren & {title: string}} props
*/
export function TabHeaderItem({
title,
class: className,
children,
...restProps
}) {
return (
<button
x-bind:id="$id(tabId)"
x-on:click="tabButtonClicked($el);"
type="button"
class={clsx(
"relative inline-flex items-center justify-center w-full h-8 px-3 transition-all cursor-pointer whitespace-nowrap",
className
)}
{...{
"x-bind:class":
"tabButtonActive($el) ? 'w-full h-full bg-accent-foreground text-background rounded-md' : ''",
...restProps
}}
>
{title ? (
<span class="text-sm font-medium" safe>
{title}
</span>
) : (
children
)}
</button>
);
}
/**
* TabsHeader component props
* @param {import("../common/props").HTMLTagWithChildren} props
*/
export function TabsHeader({ children, class: className }) {
return (
<div
x-ref="tabButtons"
x-bind:class="direction === 'horizontal' ? 'h-full max-w-xl' : 'w-full h-10'"
class={clsx(
"relative grid items-center justify-center p-1 rounded-lg select-none",
className
)}
>
{children}
</div>
);
}
/**
* TabsBodyItem component props
* @param {import("../common/props").HTMLTagWithChildren} props
*/
export function TabBodyItem({ class: className, children }) {
return (
<div
x-bind:id="$id(tabId + '-content')"
x-show="tabContentActive($el)"
class={clsx("relative", className)}
>
{children}
</div>
);
}
/**
* TabsBody component props
* @param {import("$common/props").HTMLTagWithChildren} props
*/
export function TabsBody({ class: className, children }) {
return (
<div class={clsx("relative w-full content", className)} x-ref="tabContents">
{children}
</div>
);
}
/**
* Tabs component props
* @param {TabsProps} props
*/
export function Tabs({ children, class: className, direction = "vertical" }) {
/**
* @type {Map<import("../common/types").DirectionType, string>}
*/
const directionClassMap = new Map([
["vertical", "flex-col"],
["horizontal", "flex-row items-start"]
]);
return (
<div
x-data={`tabs("${direction}")`}
class={clsx(
"relative w-full flex",
className,
directionClassMap.get(direction)
)}
>
{children}
</div>
);
}
-------------------- Alpine Dependencies -------------------------
/**
* @typedef {Object} TabsDataOutput
* @property {import("../../../common/types").DirectionType} direction
* @property {number} tabSelected
* @property {string} tabId
* @property {(tabButton: HTMLButtonElement) => void} tabButtonClicked
* @property {(tabButton: HTMLButtonElement) => boolean} tabButtonActive
* @property {(tabButton: HTMLElement) => boolean} tabContentActive
*/
/**
*
* @param {import("../../../common/types").DirectionType} direction
* @returns {import("alpinejs").AlpineComponent<TabsDataOutput & { $refs?: { tabButtons: HTMLDivElement, tabContents: HTMLDivElement } }>}
*/
export function tabsData(direction = "vertical") {
return {
init() {
const tabs = Array.from(this.$refs.tabButtons.children);
const tabsNb = tabs.length;
if (this.direction === "vertical") {
this.$refs.tabButtons.style.gridTemplateColumns = `repeat(${tabsNb}, 1fr)`;
} else {
this.$refs.tabButtons.style.gridTemplateRows = `repeat(${tabsNb}, 1fr)`;
}
this.tabId = this.$id("tabs");
this.tabSelected = 0;
},
direction,
tabSelected: -1,
tabId: "",
tabButtonClicked(tabButton) {
this.tabSelected = Array.from(this.$refs.tabButtons.children).findIndex(
(tab) => tab.id === tabButton.id
);
},
tabButtonActive(tabButton) {
return (
this.tabSelected ===
Array.from(this.$refs.tabButtons.children).findIndex(
(tab) => tab.id === tabButton.id
)
);
},
tabContentActive(tabContent) {
return (
this.tabSelected ===
Array.from(this.$refs.tabContents.children).findIndex(
(tab) => tab.id === tabContent.id
)
);;
}
};
}
Default Tabs
Account
Make changes to your account here. Click save when you're done.
Password
Change your password here. After saving, you'll be logged out.
Profile
Update your profile.
Copied !
import { Tabs, TabHeaderItem, TabBodyItem, TabsHeader, TabsBody } from "$components/tabs.component";
export function DefaultTabsExample() {
return (
<Tabs class="">
<TabsHeader>
<TabHeaderItem
title="Account"
{...{
"x-bind:class":
"tabButtonActive($el) ? 'w-full h-full border-b-2 border-foreground' : ''"
}}
/>
<TabHeaderItem
title="Password"
{...{
"x-bind:class":
"tabButtonActive($el) ? 'w-full h-full border-b-2 border-foreground' : ''"
}}
/>
<TabHeaderItem
title="Profile"
{...{
"x-bind:class":
"tabButtonActive($el) ? 'w-full h-full border-b-2 border-foreground' : ''"
}}
/>
</TabsHeader>
<TabsBody>
<TabBodyItem>
<div class="border rounded-lg shadow-sm">
<div class="flex flex-col space-y-1.5 p-6">
<h3 class="text-lg font-semibold leading-none tracking-tight">
Account
</h3>
<p class="text-sm">
Make changes to your account here. Click save when you're
done.
</p>
</div>
<div class="p-6 pt-0 space-y-2">
<div class="space-y-1">
<label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
for="name"
>
Name
</label>
<input
type="text"
placeholder="Name"
id="default-name"
value="Adam Wathan"
class="text-base-dark flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-neutral-300 ring-offset-background placeholder:text-base focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-base disabled:cursor-not-allowed disabled:opacity-50"
/>
</div>
<div class="space-y-1">
<label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
for="username"
>
Username
</label>
<input
type="text"
placeholder="Username"
id="default-account-username"
value="@adamwathan"
class="text-base-dark flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-neutral-300 ring-offset-background placeholder:text-base focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-base disabled:cursor-not-allowed disabled:opacity-50"
/>
</div>
</div>
<div class="flex items-center p-6 pt-0">
<button
type="button"
class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium tracking-wide text-white transition-colors duration-200 rounded-md btn btn-secondary dark:btn-secondary-light"
>
Save changes
</button>
</div>
</div>
</TabBodyItem>
<TabBodyItem>
<div class="border rounded-lg shadow-sm bg-card">
<div class="flex flex-col space-y-1.5 p-6">
<h3 class="text-lg font-semibold leading-none tracking-tight">
Password
</h3>
<p class="text-sm">
Change your password here. After saving, you'll be logged out.
</p>
</div>
<div class="p-6 pt-0 space-y-2">
<div class="space-y-1">
<label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
for="password"
>
Current Password
</label>
<input
type="password"
placeholder="Current Password"
id="default-password"
class="text-base-dark flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-neutral-300 ring-offset-background placeholder:text-base focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-base disabled:cursor-not-allowed disabled:opacity-50"
/>
</div>
<div class="space-y-1">
<label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
for="password_new"
>
New Password
</label>
<input
type="password"
placeholder="New Password"
id="default-password_new"
class="text-base-dark flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md border-neutral-300 ring-offset-background placeholder:text-base focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-base disabled:cursor-not-allowed disabled:opacity-50"
/>
</div>
</div>
<div class="flex items-center p-6 pt-0">
<button
type="button"
class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium tracking-wide text-white transition-colors duration-200 rounded-md btn btn-secondary dark:btn-secondary-light"
>
Save password
</button>
</div>
</div>
</TabBodyItem>
<TabBodyItem>
<div class="border rounded-lg shadow-sm bg-card">
<div class="flex flex-col space-y-1.5 p-6">
<h3 class="text-lg font-semibold leading-none tracking-tight">
Profile
</h3>
<p class="text-sm">Update your profile.</p>
</div>
<div class="p-6 pt-0 space-y-2">
<div class="space-y-1">
<label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
for="username"
>
Username
</label>
<input
placeholder="Your username"
id="default-profile-username"
class="text-base-dark flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-neutral-300 ring-offset-background placeholder:text-base focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-base disabled:cursor-not-allowed disabled:opacity-50"
/>
</div>
<div class="space-y-1">
<label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
for="fullname"
>
Full Name
</label>
<input
placeholder="Firstname & Lastname"
id="default-fullname"
class="text-base-dark flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md border-neutral-300 ring-offset-background placeholder:text-base focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-base disabled:cursor-not-allowed disabled:opacity-50"
/>
</div>
</div>
<div class="flex items-center p-6 pt-0">
<button
type="button"
class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium tracking-wide text-white transition-colors duration-200 rounded-md btn btn-secondary dark:btn-secondary-light"
>
Save changes
</button>
</div>
</div>
</TabBodyItem>
</TabsBody>
</Tabs>
);
}Horizontal Tabs
Account
Make changes to your account here. Click save when you're done.
Password
Change your password here. After saving, you'll be logged out.
Profile
Update your profile.
Copied !
import { Tabs, TabHeaderItem, TabBodyItem, TabsBody, TabsHeader } from "$components/tabs.component";
export function HorizontalTabsExample() {
return (
<Tabs class="" direction="horizontal">
<TabsHeader>
<TabHeaderItem title="Account" />
<TabHeaderItem title="Password" />
<TabHeaderItem title="Profile" />
</TabsHeader>
<TabsBody>
<TabBodyItem>
<div class="border rounded-lg shadow-sm bg-card">
<div class="flex flex-col space-y-1.5 p-6">
<h3 class="text-lg font-semibold leading-none tracking-tight">
Account
</h3>
<p class="text-sm text-neutral-500">
Make changes to your account here. Click save when you're
done.
</p>
</div>
<div class="p-6 pt-0 space-y-2">
<div class="space-y-1">
<label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
for="name"
>
Name
</label>
<input
type="text"
placeholder="Name"
id="horizontal-name"
value="Adam Wathan"
class="text-base-dark flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-neutral-300 ring-offset-background placeholder:text-base focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-base disabled:cursor-not-allowed disabled:opacity-50"
/>
</div>
<div class="space-y-1">
<label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
for="username"
>
Username
</label>
<input
type="text"
placeholder="Username"
id="horizontal-account-username"
value="@adamwathan"
class="text-base-dark flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-neutral-300 ring-offset-background placeholder:text-base focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-base disabled:cursor-not-allowed disabled:opacity-50"
/>
</div>
</div>
<div class="flex items-center p-6 pt-0">
<button
type="button"
class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium tracking-wide text-white transition-colors duration-200 rounded-md btn btn-secondary dark:btn-secondary-light"
>
Save changes
</button>
</div>
</div>
</TabBodyItem>
<TabBodyItem>
<div class="border rounded-lg shadow-sm bg-card">
<div class="flex flex-col space-y-1.5 p-6">
<h3 class="text-lg font-semibold leading-none tracking-tight">
Password
</h3>
<p class="text-sm text-neutral-500">
Change your password here. After saving, you'll be logged out.
</p>
</div>
<div class="p-6 pt-0 space-y-2">
<div class="space-y-1">
<label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
for="password"
>
Current Password
</label>
<input
type="password"
placeholder="Current Password"
id="horizontal-password"
class="text-base-dark flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-neutral-300 ring-offset-background placeholder:text-base focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-base disabled:cursor-not-allowed disabled:opacity-50"
/>
</div>
<div class="space-y-1">
<label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
for="password_new"
>
New Password
</label>
<input
type="password"
placeholder="New Password"
id="horizontal-password_new"
class="text-base-dark flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md border-neutral-300 ring-offset-background placeholder:text-base focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-base disabled:cursor-not-allowed disabled:opacity-50"
/>
</div>
</div>
<div class="flex items-center p-6 pt-0">
<button
type="button"
class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium tracking-wide text-white transition-colors duration-200 rounded-md btn btn-secondary dark:btn-secondary-light"
>
Save password
</button>
</div>
</div>
</TabBodyItem>
<TabBodyItem>
<div class="border rounded-lg shadow-sm bg-card">
<div class="flex flex-col space-y-1.5 p-6">
<h3 class="text-lg font-semibold leading-none tracking-tight">
Profile
</h3>
<p class="text-sm text-neutral-500">Update your profile.</p>
</div>
<div class="p-6 pt-0 space-y-2">
<div class="space-y-1">
<label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
for="username"
>
Username
</label>
<input
placeholder="Your username"
id="horizontal-profile-username"
class="text-base-dark flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-neutral-300 ring-offset-background placeholder:text-base focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-base disabled:cursor-not-allowed disabled:opacity-50"
/>
</div>
<div class="space-y-1">
<label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
for="fullname"
>
Full Name
</label>
<input
placeholder="Firstname & Lastname"
id="horizontal-fullname"
class="text-base-dark flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md border-neutral-300 ring-offset-background placeholder:text-base focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-base disabled:cursor-not-allowed disabled:opacity-50"
/>
</div>
</div>
<div class="flex items-center p-6 pt-0">
<button
type="button"
class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium tracking-wide text-white transition-colors duration-200 rounded-md btn btn-secondary dark:btn-secondary-light"
>
Save changes
</button>
</div>
</div>
</TabBodyItem>
</TabsBody>
</Tabs>
);
}