مكوّن لوحة Kanban لـ Angular | ng-hub-ui-board
مكوّن لوحة Kanban لـ Angular مع السحب والإفلات وقوالب بطاقات مخصّصة وتدفقات عمل بالأعمدة ومتغيرات CSS للوحات تحكم الأعمال.
نظرة عامة
لماذا تبحث الفِرَق عن هذه المكتبة
يساعدك مكوّن اللوحة هذا لـ Angular على إطلاق تدفقات عمل بنمط Kanban مع السحب والإفلات وقوالب مرنة وأنماط تفاعل قابلة للتوسّع لأدوات الأعمال الحقيقية.
التثبيت
npm install ng-hub-ui-boardانتقل إلى
مثالي لـ
- لوحات المهام
- تتبّع خطوط الأنابيب
- تدفقات عمل CRM
- لوحات تحكم العمليات
حول board
صُمّم ng-hub-ui-board لمنتجات Angular التي تحتاج إلى أكثر من قائمة ثابتة: تتبّع المهام، وخطوط أنابيب CRM، وتدفقات الدعم، أو لوحات تحكم العمليات الداخلية. يبقي عرض البطاقات مرنًا مع الحفاظ على نموذج تفاعل متسق للوحة.
أدلّة الميزات
الاستخدام الأساسي
ميزات board الأساسية
أمثلة:
مثال لوحة أساسي
مثال لوحة أساسي
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
التفاعلات
قدرات تفاعل المستخدم
أمثلة:
سحب وإفلات البطاقات
سحب وإفلات البطاقات
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Last Event: None
إعادة ترتيب الأعمدة
إعادة ترتيب الأعمدة
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Last Reorder: None
حدث النقر على البطاقة
حدث النقر على البطاقة
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Last Clicked: None
أحداث اللوحة
أحداث اللوحة
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Event Log
الميزات المتقدمة
التمرير والسلوك المتقدم
أمثلة:
تمرير لا نهائي
تمرير لا نهائي
To Do
Research
Analyze requirements
Design
Create UI mockups
Scroll Item 1
Scroll to see more
Scroll Item 2
Scroll to see more
Scroll Item 3
Scroll to see more
Scroll Item 4
Scroll to see more
Scroll Item 5
Scroll to see more
Scroll Item 6
Scroll to see more
Scroll Item 7
Scroll to see more
Scroll Item 8
Scroll to see more
Scroll Item 9
Scroll to see more
Scroll Item 10
Scroll to see more
Scroll Item 11
Scroll to see more
Scroll Item 12
Scroll to see more
Scroll Item 13
Scroll to see more
Scroll Item 14
Scroll to see more
Scroll Item 15
Scroll to see more
Scroll Item 16
Scroll to see more
Scroll Item 17
Scroll to see more
Scroll Item 18
Scroll to see more
Scroll Item 19
Scroll to see more
Scroll Item 20
Scroll to see more
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Last Scroll End: None
القوالب
تخصيص المظهر
أمثلة:
قالب بطاقة مخصص
قالب بطاقة مخصص
To Do
In Progress
Done
قالب رأس مخصص
قالب رأس مخصص
Research
Analyze requirements
Design
Create UI mockups
Development
Implement core features
Planning
Initial meeting
قالب تذييل مخصص
قالب تذييل مخصص
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
عنصر نائب مخصص للبطاقة
عنصر نائب مخصص للبطاقة
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
عنصر نائب مخصص للعمود
عنصر نائب مخصص للعمود
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
معاينة سحب مخصصة
معاينة سحب مخصصة
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
الإعداد
خيارات إعداد board
أمثلة:
تعطيل الترتيب
تعطيل الترتيب
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
حشو تمرير مخصص
حشو تمرير مخصص
Scroll detection padding is handled internally (default 1px). To inspect it, you would typically look at source code, but implementation details like specific padding override are not exposed as inputs in the current version of HubBoardComponent. This example shows a board that *could* use it if the API exposed it, or demonstrates the standard behavior. (Note: The library source code defines `scrollDetectionPadding = 1` as private readonly, so it cannot be customized via input currently.)
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
أوضاع سلوك السحب
أوضاع سلوك السحب
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Current Behavior: collapse
- Collapse: The element completely disappears and its space is removed from the layout
- Best for: Clean interface where you only want to see the placeholder at the destination
التنسيق
تخصيص المظهر عبر متغيرات CSS
أمثلة:
تخصيص CSS
تخصيص CSS
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
الميزات الرئيسية
التغييرات الأخيرة
لا توجد إدخالات سجلّ تغييرات متاحة.