مبدّل اللغة
يبدّل لغة الواجهة: قائمة، أو مفتاح من خيارين، أو زر واحد للغة الأخرى.
المعاينة
«معكوس» هو المحتوى الإنجليزي نفسه من اليمين إلى اليسار، ليفصل خطأ الاتجاه عن خطأ الترجمة.
المعاينةالكود
إنجليزيمعكوسعربي
← RTL
التثبيت
أضف المكوّن
npx ritla add language-switcherويعمل أيضًا مع shadcn:
npx shadcn@latest add @ritla/language-switcherالاعتماديات التي يضيفها
@phosphor-icons/react@base-ui/reactأو انسخه يدويًا
التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.
الاستخدام
import { LanguageSwitcher } from "@/components/ui/language-switcher";<LanguageSwitcher label="Language" value={lang} onValueChange={setLang} languages={[{ code: "ar", label: "العربية", short: "ع" }, { code: "en", label: "English", short: "EN" }]} />مرجع الخصائص
LanguageSwitcher
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
languages | LanguageOption[] | لا يوجد | لكل لغة code وlabel بلغتها وshort. |
value / onValueChange | string / (code) => void | لا يوجد | اللغة الحالية. |
variant | "menu" | "toggle" | "pill" | "menu" | خاصية Style. |
label | string | لا يوجد | اسم المبدّل بلغة الصفحة. |
إمكانية الوصول
لوحة المفاتيح
المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.
| المفتاح | ما يفعله |
|---|---|
| EnterSpace | يفتح القائمة أو يختار. |
| ArrowDownArrowUp | ينتقل بين اللغات في القائمة. |
| ArrowRightArrowLeft | في المفتاح: يختار اللغة التالية أو السابقة، والتالية يسارًا في العربية. المفتاح محطة واحدة لـ Tab. |
ARIA
- كل لغة مكتوبة بلغتها وتحمل
lang، فينطقها قارئ الشاشة صحيحة. - القائمة عناصر اختيار أحادي، والمفتاح
radiogroup.
ملاحظات العربية والاتجاه
ينعكس
- الزر والقائمة ينعكسان، والقائمة تُفتح من اليمين.
لا ينعكس
- الكرة الأرضية وعلامة الصح لا تنعكسان.
- الأرقام
- لا أرقام فيه.
- الخط العربي
- العربية بخط IBM Plex Sans Arabic حتى في صفحة إنجليزية، بفضل
lang.