کامپوننت‌ها
زبانه‌ها
نمایش بخش‌های مرتبط یک محتوا در یک فضا، با سه سبک و پیمایش کامل کیبورد.
import { Tabs, TabList, Tab, TabPanel } from "@kashi-ui/react";خطی
نام، ایمیل و عکس پروفایل خود را ویرایش کنید.
رمز عبور و ورود دو مرحلهای را مدیریت کنید.
۲ فاکتور پرداختنشده دارید.
بهزودی.
<Tabs defaultValue="account">
<TabList aria-label="تنظیمات">
<Tab value="account">حساب کاربری</Tab>
<Tab value="security">امنیت</Tab>
<Tab value="billing">پرداخت <Badge tone="brand" size="sm">۲</Badge></Tab>
<Tab value="api" disabled>API</Tab>
</TabList>
<TabPanel value="account">…</TabPanel>
<TabPanel value="security">…</TabPanel>
<TabPanel value="billing">…</TabPanel>
</Tabs>قرصی
نام، ایمیل و عکس پروفایل خود را ویرایش کنید.
رمز عبور و ورود دو مرحلهای را مدیریت کنید.
۲ فاکتور پرداختنشده دارید.
بهزودی.
<Tabs defaultValue="account" variant="pill">…</Tabs>چندبخشی
نام، ایمیل و عکس پروفایل خود را ویرایش کنید.
رمز عبور و ورود دو مرحلهای را مدیریت کنید.
۲ فاکتور پرداختنشده دارید.
بهزودی.
<Tabs defaultValue="account" variant="segmented">…</Tabs>کیبورد
| کلید | عمل |
|---|---|
| Tab | ورود به زبانهٔ فعال، سپس رفتن به محتوای پنل |
| ← / → | زبانهٔ بعد / قبل (در راست‌به‌چپ) و فعال‌سازی آن |
| Home / End | اولین / آخرین زبانه |
عمودی
برای صفحه‌های تنظیمات؛ کلیدهای ↑ و ↓ بین زبانه‌ها جابه‌جا می‌کنند. در صفحه‌های باریک خودکار افقی می‌شود.
نام، عکس و اطلاعات تماس.
رمز عبور و ورود دو مرحلهای.
ایمیل، پیامک و اعلانهای درونبرنامه.
روش پرداخت و فاکتورها.
<Tabs defaultValue="profile" orientation="vertical">
<TabList aria-label="تنظیمات حساب">…</TabList>
…
</Tabs>| نام | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" | جهت؛ aria-orientation و کلیدهای پیمایش هم تغییر می‌کنند |
size | "sm" | "md" | "md" | اندازه |
متغیرهای CSS: --k-tab-height، --k-tab-radius، --k-tabs-gap، --k-tabs-indicator، --k-tabs-list-width.
ویژگی‌ها
| نام | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
value / defaultValue | string | — | زبانهٔ فعال (Tabs) |
onChange | (value: string) => void | — | با تغییر زبانه |
variant | "line" | "pill" | "segmented" | "line" | سبک |
block | boolean | false | زبانه‌ها تمام عرض را پر کنند |
aria-label | string | — | نام فهرست زبانه‌ها (TabList) — الزامی |
value | string | — | شناسهٔ زبانه و پنل متناظر (Tab و TabPanel) |
نشانگر زبانهٔ فعال (خط زیر زبانه، یا پس‌زمینه در گونه‌های قرصی و چندبخشی) با تغییر زبانه به‌نرمی جابه‌جا می‌شود؛ با تنظیم «کاهش حرکت» در سیستم، بدون انیمیشن.
دسترس‌پذیری
- الگوی Tabs در WAI-ARIA:
tablist،tabوtabpanelبا اتصالaria-controlsوaria-labelledby. - فقط زبانهٔ فعال در ترتیب Tab است؛ زبانه‌های غیرفعال (
disabled) در پیمایش رد می‌شوند. - برای ناوبری بین صفحه‌ها از زبانه استفاده نکنید؛ لینک‌ها مناسب‌ترند.