حقل الرسالة

احصل على Ritla UI

يُثبَّت أسفل المحادثة: زر الإرفاق، وحقل الكتابة مع زر الرموز، وزر الإرسال.

افتح في Figma

المعاينة

«معكوس» هو المحتوى الإنجليزي نفسه من اليمين إلى اليسار، ليفصل خطأ الاتجاه عن خطأ الترجمة.

التثبيت

أضف المكوّن
$ npx ritla add message-input
ويعمل أيضًا مع shadcn: npx shadcn@latest add @ritla/message-input
الاعتماديات التي يضيفها
@phosphor-icons/react
أو انسخه يدويًا
التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.

الاستخدام

message-input.tsx

import { MessageInput } from "@/components/ui/message-input";<MessageInput label="Message" placeholder="Write a message" onSend={(text) => send(text)} />

مرجع الخصائص

MessageInput

الخاصية	النوع	الافتراضي	الوصف
`placeholder`	`string`	لا يوجد	خاصية Placeholder.
`label`	`string`	لا يوجد	اسم الحقل لقارئ الشاشة.
`onSend`	`(text: string) => void`	لا يوجد	يُستدعى بالنص بعد إزالة المسافات، ثم يُفرَّغ الحقل.
`onAttach / onEmoji`	`() => void`	لا يوجد	يُظهران زري الإرفاق والرموز.
`labels`	`{ attach?, emoji?, send? }`	لا يوجد	أسماء الأزرار بلغة الصفحة.
`value / onValueChange`	`string / (value: string) => void`	لا يوجد	مسودة متحكَّم بها.
`disabled`	`boolean`	`false`	يعطّل الحقل والأزرار.

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

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

المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.

المفتاح	ما يفعله
`Enter`	يرسل الرسالة.
`ShiftEnter`	يضيف سطرًا جديدًا.

ARIA

الحقل له اسم مخفي بصريًا؛ النص الإرشادي ليس اسمًا.
الأزرار مسماة: إرفاق، الرموز التعبيرية، إرسال. زر الإرسال معطّل حتى تكتب.

ملاحظات العربية والاتجاه

ينعكس

سهم الإرسال يشير لليسار في العربية، والإرفاق في البداية.

لا ينعكس

مشبك الإرفاق والوجه الضاحك لا ينعكسان.

الأرقام: يُرسَل النص كما كُتب.
الخط العربي: النص body-16.
النص ثنائي الاتجاه: الحقل dir="auto": يتبع اتجاه أول حرف تكتبه.