حقل النسخ

تجريبي

قيمة يحتاج الناس إلى نسخها كما هي، كرقم الآيبان أو المرجع أو رمز الخصم، مع زر يؤكد النسخ.

المعاينة

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

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

copy-field.tsx

import { CopyField } from "@/components/ui/copy-field";<CopyField label="IBAN" value="JO94CBJO0010000000000131000" />

الخاصية	النوع	الافتراضي	الوصف
`value`	`string`	لا يوجد	القيمة كما تُنسخ.
`display`	`ReactNode`	لا يوجد	طريقة عرضها إن اختلفت، كتقسيم الآيبان أربعًا أربعًا.
`variant`	`"field" \| "inline"`	`"field"`	خاصية Style.
`label / aria-label`	`ReactNode / string`	لا يوجد	خاصية Show label، أو اسم لقارئ الشاشة حين تُخفى.
`showButtonLabel`	`boolean`	`true`	خاصية Show button label.
`onCopy`	`(value) => void`	لا يوجد	بعد نسخ ناجح.

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

المفتاح	ما يفعله
`TabEnter`	يصل إلى الزر وينسخ.

الأرقام: أرقام القيمة كما هي؛ لا تُحوَّل أبدًا لأنها تُنسخ.
الخط العربي: ‏body-16 للقيمة وbody-14 Medium للتسمية والزر.
النص ثنائي الاتجاه: القيمة داخل <bdi dir="ltr"> فلا ينقلب ترتيب الآيبان، والكتلة تحفظ اتجاه الصفحة لتبدأ القيمة من بدايتها.