منتقي الرموز التعبيرية
بحث وعنوان قسم وشبكة رموز للتفاعلات والرسائل.
المعاينة
«معكوس» هو المحتوى الإنجليزي نفسه من اليمين إلى اليسار، ليفصل خطأ الاتجاه عن خطأ الترجمة.
المعاينةالكود
إنجليزيمعكوسعربي
← RTL
التثبيت
أضف المكوّن
npx ritla add emoji-pickerويعمل أيضًا مع shadcn:
npx shadcn@latest add @ritla/emoji-pickerأو انسخه يدويًا
التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.
الاستخدام
import { EmojiPicker } from "@/components/ui/emoji-picker";<EmojiPicker searchLabel="Search emoji" emptyLabel="No emoji found" sections={[{ label: "Frequently used", emojis: [{ emoji: "👍", name: "thumbs up" }] }]} onSelect={(e) => react(e.emoji)}/>مرجع الخصائص
EmojiPicker
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
sections | EmojiSection[] | لا يوجد | الأقسام: label ورموز لكل منها emoji وname وkeywords. |
onSelect | (emoji: EmojiOption) => void | لا يوجد | عند اختيار رمز. |
searchLabel | string | لا يوجد | اسم حقل البحث ونصه الإرشادي. |
emptyLabel | string | لا يوجد | حين لا يطابق البحث شيئًا. |
columns | number | 8 | عدد الرموز في الصف. |
إمكانية الوصول
لوحة المفاتيح
المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.
| المفتاح | ما يفعله |
|---|---|
| ArrowRightArrowLeft | ينتقل إلى الرمز التالي أو السابق؛ ينعكس في العربية. |
| ArrowDownArrowUp | ينتقل صفًا. |
| HomeEnd | أول الصف وآخره. |
| Enter | يختار الرمز. |
ARIA
- كل رمز زر باسمه («إعجاب»)، والشبكة نقطة توقف واحدة.
- ضعه في نافذة منبثقة تُفتح من زر الرموز.
ملاحظات العربية والاتجاه
ينعكس
- الشبكة تبدأ من اليمين، والأسهم تتبع اتجاه القراءة.
لا ينعكس
- الرموز نفسها لا تنعكس.
- الأرقام
- لا أرقام فيه.
- الخط العربي
- عنوان القسم
label-12بوزن Medium. أعطِ الرموز أسماء عربية للبحث بالعربية.