مقدّمة
تقدّم فاصلة مجموعة مكوّنات قابلة لإعادة الاستخدام، تنسخها وتلصقها في تطبيقك. وهي ليست مكتبة مكوّنات تقليدية، فالشيفرة لك وتعدّلها كما تشاء.
الميزات
- 29+ مكوّنًا بين مكوّنات أساسية وكتل تطبيقات وتأثيرات
- إتاحة الوصول (accessibility) مدروسة من البداية، ومنها التنقّل بلوحة المفاتيح
- حركة سلسة بمكتبة Framer Motion، تحترم إعداد تقليل الحركة
- TypeScript في الشيفرة كلها، مع أنواع كاملة
- الوضع الداكن مدعوم دون أي إعداد
- قابلة للتخصيص بسهولة، لأنها مبنية على Tailwind CSS
فئات المكوّنات
المكوّنات الأساسية
زر (Button)أضف مكوّن زر (Button) مع أنماط (variant) مرئية وأحجام متجاوبة وحالة تحميل، ويمكنك وضع عناصر أخرى داخله.حقل الإدخال (Input)استخدم مكوّن حقل الإدخال (Input) لإدخال النص، مع حالات التحقق والأيقونات وحلقة تركيز واضحة، وتخصيص سهل عبر Tailwind.بطاقة (Card)ركّب مكوّن بطاقة (Card) من أجزاء جاهزة تراعي إتاحة الوصول (accessibility): الرأس والعنوان والوصف والمحتوى والتذييل.شارة (Badge)اعرض حالات وتسميات قصيرة بمكوّن شارة (Badge)، بأنماط (variant) قابلة لإعادة الاستخدام وألوان دلالية من Tailwind.هيكل التحميل (Skeleton)اعرض عناصر نائبة أثناء التحميل بمكوّن هيكل التحميل (Skeleton)، للنصوص والصور الرمزية والبطاقات وأي تخطيط آخر.صورة رمزية (Avatar)مثّل الأشخاص بمكوّن صورة رمزية (Avatar): صورة شخصية أو أحرف أولى أو أيقونة بديلة، بثلاثة أحجام، مع إطار ونقطة حالة اختياريين.مؤشر الحالة (Status Indicator)اعرض حالة الاتصال بمكوّن مؤشر الحالة (Status Indicator): متصل أو غائب أو مشغول أو غير متصل، باسم يتبع لغة الصفحة.خانة الاختيار (Checkbox)أضف مكوّن خانة الاختيار (Checkbox) للاختيارات الثنائية، مع التحكم بالحالة وتسمية واضحة ودعم لوحة المفاتيح.زر الاختيار (Radio)أضف مكوّن زر الاختيار (Radio) ليحدّد المستخدم خيارًا واحدًا من مجموعة خيارات. يأتي بنمطين (variant): بسيط، وبطاقة بإطار، ويدعم الكتابة العربية واتجاهها بالكامل.مفتاح التبديل (Switch)استخدم مكوّن مفتاح التبديل (Switch) لإعدادات التشغيل والإيقاف، مع التحكم بالحالة ودعم لوحة المفاتيح ومؤشر مرئي واضح.قائمة منسدلة (Select)أنشئ مكوّن قائمة منسدلة (Select) لاختيار خيار واحد، مع تفاعل يراعي إتاحة الوصول (accessibility) وتنسيق قابل للتخصيص.منطقة النص (Textarea)أضف مكوّن منطقة النص (Textarea) لإدخال نص متعدد الأسطر، مع عدّاد للأحرف وخيارات لتغيير الحجم وحالات التحقق.علامات التبويب (Tabs)نظّم المحتوى المترابط بمكوّن علامات التبويب (Tabs)، مع قوائم وأزرار ولوحات تتنقّل بينها بلوحة المفاتيح.قائمة منسدلة بالبحث (Combobox)أنشئ مكوّن قائمة منسدلة بالبحث (Combobox) لاختيار خيار واحد أو عدة خيارات، مع عناصر تحكم تراعي إتاحة الوصول (accessibility).
الكتل
إطار التطبيق (AppShell)نظّم تطبيقك بكتلة إطار التطبيق (AppShell)، وهي تخطيط متجاوب يجمع التنقّل والشريط الجانبي والرأس والمحتوى الرئيسي.رأس الصفحة (PageHeader)ابنِ رؤوس صفحات متّسقة بكتلة رأس الصفحة (PageHeader)، مع العنوان والوصف ومسار التنقّل (breadcrumb) ومنطقة للإجراءات.حالة فارغة (EmptyState)اشرح الشاشات الفارغة بكتلة حالة فارغة (EmptyState)، مع أيقونة ووصف مفيد وخطوة تالية واضحة.قسم النموذج (FormSection)اجمع حقول النموذج المترابطة بكتلة قسم النموذج (FormSection)، مع عنوان ووصف وتخطيط جاهز للتحقق وأزرار إجراءات مصطفّة.جدول البيانات (DataTable)اعرض بيانات منظّمة بكتلة جدول البيانات (DataTable)، مع أعمدة محددة الأنواع وترقيم للصفحات وحالات جاهزة للجدول.شريط جانبي (Sidebar)أضف كتلة شريط جانبي (Sidebar) متجاوبة لتنقّل تطبيقك، مع بنية قابلة للطي وروابط تراعي إتاحة الوصول (accessibility).شريط التنقّل (Navbar)أنشئ كتلة شريط التنقّل (Navbar) متجاوبة، مع روابط لسطح المكتب وقائمة للهاتف ومساحة مرنة لهوية المنتج.بطاقة الإحصاءات (Stats Card)اعرض المقاييس الأساسية للوحة التحكم بكتلة بطاقة الإحصاءات (Stats Card)، مع مؤشرات الاتجاه والسياق والأيقونات.
التأثيرات
زر اللمعان (Shimmer Button)اجذب الانتباه إلى أزرار الإجراء الرئيسية بتأثير زر اللمعان (Shimmer Button)، بحركة لمعان تحترم إعداد تقليل الحركة.تدرّج متحرك (AnimatedGradient)أضف خلفية بتأثير تدرّج متحرك (AnimatedGradient) إلى الأقسام الرئيسية والبطاقات، بحركة سلسة قابلة للضبط.ظهور النص (TextReveal)أظهر النص حرفًا حرفًا بتأثير ظهور النص (TextReveal)، مع عناصر تحكم بالحركة ودعم تقليل الحركة.شعاع الإطار (BorderBeam)أبرز البطاقات والحاويات بتأثير شعاع الإطار (BorderBeam)، وهو شعاع متحرك قابل للضبط يدور حول الإطار.بقعة الضوء (Spotlight)أنشئ خلفيات تتبع المؤشر في واجهاتك بتأثير بقعة الضوء (Spotlight)، مع التحكم بالتوهج وموضعه.نص الآلة الكاتبة (Typewriter Text)حرّك النصوص بتأثير نص الآلة الكاتبة (Typewriter Text)، لرسائل المنتج والعناوين والعروض التوضيحية.بطاقة متوهجة (Glow Card)ابنِ بطاقات تفاعلية بتأثير بطاقة متوهجة (Glow Card)، مع توهج يتبع المؤشر ومحتوى متعدد الطبقات.