ناوبریTabs

زبانه‌ها

ناوبری بین بخش‌های مختلف محتوا

پیش‌فرض

زبانه‌های ساده

محتوای زبانه اول

<Tabs defaultValue="tab1">
  <TabsList className="w-full">
    <TabsTrigger value="tab1" className="flex-1 gap-2">
      <Star className="h-4 w-4" />
      عنوان
    </TabsTrigger>
    <TabsTrigger value="tab2" className="flex-1">عنوان</TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">محتوای زبانه اول</TabsContent>
  <TabsContent value="tab2">محتوای زبانه دوم</TabsContent>
</Tabs>

نصب دستی

وابستگی‌ها

برای استفاده از Tabs، باید این بسته‌ها را نصب کنید:

npm install @radix-ui/react-tabs

کد زیر را می‌توانید در پروژه خود کپی کنید تا Tabs را به صورت دستی اضافه کنید:

نمونه‌های بیشتر

بخش‌بندی

کنترل بخش‌بندی

با نشان

زبانه‌ها همراه با نشان تعداد

پیام‌های دریافتی