تخطّي إلى المحتوى الرئيسي

علامات التبويب Tabs

مكوّن تبديل بالألسنة، يدعم الوضعين المتحكَّم وغير المتحكَّم، ومظهرين (بطاقة / خط)، وإغلاق الألسنة وإضافتها، وتنقلًا كاملًا بلوحة المفاتيح.

الاستخدام الأساسي​

الاستخدام الأساسي
تدرّج الحبر بحيوية متدفّقة.
رسم دقيق يُظهر أدق التفاصيل.
import { useState } from 'react'
import { LhTabs, LhTabPane } from '@lh-ui/react'

export default function Demo() {
  const [value, setValue] = useState('ink')

  return (
    <LhTabs value={value} onChange={(name) => setValue(name)}>
      <LhTabPane name="ink" label="رسم الحبر">
        يتدرّج الحبر وينبض بالروح.
      </LhTabPane>
      <LhTabPane name="danqing" label="ألوان دانتشينغ">
        تتألق ألوان دانتشينغ ببريق ذهبي.
      </LhTabPane>
    </LhTabs>
  )
}

Tabs Props​

الخاصيةالوصفالنوعالقيم المتاحةالافتراضي
valueاسم اللسان النشط حاليًا (متحكَّم به)string——
defaultValueاسم اللسان النشط حاليًا (قيمة افتراضية غير متحكَّم بها)string——
typeالمظهر'line' | 'card'—'line'
closableإمكانية إغلاق الألسنةboolean—false
addableإظهار زر الإضافةboolean—false
tabPositionموضع الألسنة'top' | 'bottom'—'top'
sxخصائص تخطيط سريعةSxProps——

TabPane Props​

الخاصيةالوصفالنوعالافتراضي
nameالمعرِّف الفريد للسان (مفتاح ثابت، يُستحسَن عدم تعديله ديناميكيًا)string—
labelعنوان اللسانReactNode—
disabledمعطّلbooleanfalse
childrenمحتوى اللسانReactNode—

Tabs أحداث​

الحدثالوصفمعامل الاستدعاءالمقابل في Vue
onChangeيُطلَق عند تغيُّر اللسان النشط(name: string) => void@change
onRemoveيُطلَق عند إغلاق لسان (ظهور اللسان وإخفاؤه بيد منطق العمل)(name: string) => void@remove
onAddيُطلَق عند النقر على زر الإضافة() => void@add
متحكَّم / غير متحكَّم

تمرير value يجعله متحكَّمًا به، وتمرير defaultValue يجعله غير متحكَّم به بحالة داخلية. وكلا الوضعين يُطلِق onChange. وعند حذف اللسان النشط، ينتقل الوضع غير المتحكَّم تلقائيًا إلى أقرب لسان متاح (موافق لـ getNameAfterRemove في plus)؛ أما الوضع المتحكَّم به فيترك المعالجة لمنطق العمل داخل onRemove.

قيود العناصر الفرعية

يجب أن يكون children مباشرةً LhTabPane (يمكن العرض via .map، ويمكن لفّه تسطيحًا بـ Fragment، لكن لا يمكن لفّه بمكوّن مخصَّص) — إذ يعتمد المكوّن الأب على Children.forEach للنزول وجمع سجلات الألسنة، واللفّ المخصَّص يؤدي إلى فشل الجمع.

تفاعل لوحة المفاتيح​

اتباعًا لنمط tabs في APG: عندما يكون التركيز على زر لسان، يتنقَّل ArrowRight / ArrowLeft (في الوضع العمودي ArrowDown / ArrowUp) بين الألسنة المتاحة ويُنشِّطها، متخطّيًا المعطَّلة؛ وينتقل Home / End إلى الأول / الأخير؛ ويغلق Delete / Backspace اللسان الحالي (يتطلَّب closable). فقط اللسان النشط يحمل tabindex=0، وغيره -1 (roving tabindex).

إمكانية الوصول​

شريط الألسنة role="tablist"، وكل لسان role="tab" مع aria-selected / aria-controls، وكل لوحة role="tabpanel" مع aria-labelledby، وتُولَّد المعرِّفات عبر useId() ومستقرة في SSR. وتُزال اللوحات غير النشطة من شجرة إمكانية الوصول عبر خاصية hidden.

المرجع​

forwardRef<HTMLDivElement> —— العنصر الجذري. ويُمرِّر LhTabPane HTMLDivElement.

الأنماط​

import '@lh-ui/react/theme.css'
import '@lh-ui/react/style/tabs'