
إدخال نص
يسمح للمستخدمين بإدخال وتحرير النص.- Usage
- خصائص
import { TextInput } from "@/ui/input/components/TextInput";
export const MyComponent = () => {
const handleChange = (text) => {
console.log("Input changed:", text);
};
const handleKeyDown = (event) => {
console.log("Key pressed:", event.key);
};
return (
<TextInput
className
label="Username"
onChange={handleChange}
fullWidth={false}
disableHotkeys={false}
error="Invalid username"
onKeyDown={handleKeyDown}
RightIcon={null}
/>
);
};
| خصائص | النوع | الوصف |
|---|---|---|
| className | string | اسم اختياري للتنسيق الإضافي. |
| التسمية | نص | يمثل التسمية للإدخال. |
| onChange | وظيفة | الدالة التي تُستدعى عند تغيير قيمة الإدخال. |
| عرض كامل | قيمة منطقية | يشير إلى ما إذا كان الإدخال يجب أن يشغل 100% من العرض. |
| تعطيل الإختصارات | قيمة منطقية | يشير إلى ما إذا كانت الاختصارات ممكنة للإدخال. |
| خطأ | string | يمثل رسالة الخطأ التي سيتم عرضها. عند توفرها، تضيف رمز خطأ على الجانب الأيمن من الإدخال. |
| onKeyDown | دالة | يتم الاستدعاء عندما يتم الضغط على مفتاح عند التركيز على حقل الإدخال. يتلقى React.KeyboardEvent كمعلمة |
| أيقونة يمين | مكون الأيقونة | مكون أيقونة اختياري معروض على الجانب الأيمن من الإدخال. |
إدخال نص بالحجم التلقائي
مكون إدخال نصي يعدل ارتفاعه تلقائيًا بناءً على المحتوى.- الاستخدام
- خصائص
import { AutosizeTextInput } from "@/ui/input/components/AutosizeTextInput";
export const MyComponent = () => {
return (
<AutosizeTextInput
onValidate={() => console.log("onValidate function fired")}
minRows={1}
placeholder="Write a comment"
onFocus={() => console.log("onFocus function fired")}
variant="icon"
buttonTitle
value="Task: "
/>
);
};
| خصائص | النوع | الوصف |
|---|---|---|
| onValidate | دالة | الدالة التي ترغب في تفعيلها عند تصديق المستخدم الإدخال. |
| الحد الأدنى للأسطر | رقم | عدد الأسطر الأدنى للمساحة النصية. |
| النص التوضيحي | نص | النص التوضيحي الذي ترغب في عرضه عند كون المساحة النصية فارغة. |
| onFocus | دالة | الدالة التي ترغب في تفعيلها عند تركيز المساحة النصية. |
| البديل | نص | البديل للإدخال. تشمل الخيارات: افتراضي، أيقونة، وزر. |
| عنوان الزر | نص | العنوان للزر (فقط للبديل الزر). |
| القيمة | نص | القيمة الأولية للمساحة النصية. |
مساحة نصية
تتيح لك إنشاء إدخالات نصية متعددة الأسطر.- الاستخدام
- خصائص
import { TextArea } from "@/ui/input/components/TextArea";
export const MyComponent = () => {
return (
<TextArea
disabled={false}
minRows={4}
onChange={()=>console.log('تم تشغيل الدالة onChange')}
placeholder="أدخل النص هنا"
value=""
/>
);
};
| خصائص | النوع | الوصف |
|---|---|---|
| تعطيل | قيمة منطقية | يشير إلى ما إذا كانت المساحة النصية معطلة. |
| الحد الأدنى للأسطر | رقم | العدد الأدنى للأسطر الظاهرة للمساحة النصية. |
| onChange | وظيفة | دالة الاستدعاء تُشغّل عند تغيّر محتوى منطقة النص |
| نص توضيحي | نص | النص المُوضّح عندما تكون منطقة النص فارغة |
| القيمة | نص | القيمة الحالية لمنطقة النص |