Tabs

Displays a list of options for the user to pick from—triggered by a button.

Trái Tim MoMo là nền tảng giúp bạn dễ dàng chung tay quyên góp tiền cùng hàng triệu người, giúp đỡ các hoàn cảnh khó khăn trên khắp cả nước.

Installation

npm @momo-ui add tabs

Usage

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

app.js

<Tabs defaultValue="account">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">Make changes to your account here.</TabsContent>
  <TabsContent value="password">Change your password here.</TabsContent>
</Tabs>

API Reference

Tabs

Prop	Type	Default	Required
`value`	string	--	false
`defaultValue`	string	--	false
`onValueChange`	(value: string) => void	--	false
`orientation`	enumhorizontal \| vertical	--	false
`dir`	enumDirection	--	false
`activationMode`	enumautomatic \| manual	--	false
`asChild`	enumboolean	--	false

TabsList

Prop	Type	Default	Required
`asChild`	enumboolean	--	false
`loop`	enumboolean	--	false
`size`	enumbase \| sm	sm	false
`isDivider`	enumboolean	false	false

TabsTrigger

Prop	Type	Default	Required
`asChild`	enumboolean	--	false
`value`	string	--	true

TabsContent

Prop	Type	Default	Required
`asChild`	enumboolean	--	false
`value`	string	--	true
`forceMount`	true	--	false

Example

Sizes

Use the size prop to control the size of the tabs list.

Base:

Make changes to your account here.

Small:

Make changes to your account here.

With divider

By default, Tabs has no divider, but you can add it by providing variant prop to the TabsList

No divider:

Make changes to your account here.

Has divider:

Make changes to your account here.

Select Stepper