زبانه‌ها
نمایش بخش‌های مرتبط یک محتوا در یک فضا، با سه سبک و پیمایش کامل کیبورد.
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 | اولین / آخرین زبانه |
ویژگی‌ها
| نام | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
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) در پیمایش رد می‌شوند. - برای ناوبری بین صفحه‌ها از زبانه استفاده نکنید؛ لینک‌ها مناسب‌ترند.