مكوّن Skeleton للتحميل لـ Angular | ng-hub-ui-skeleton
عناصر نائبة skeleton للتحميل لـ Angular مع إعدادات مسبقة قابلة لإعادة الاستخدام وقوالب DSL مضمّنة وقيم متجاوبة ومتغيرات CSS لحالات الوميض.
نظرة عامة
لماذا تبحث الفِرَق عن هذه المكتبة
اختر مكتبة skeleton هذه لـ Angular عندما تحتاج حالات التحميل إلى أن تبقى منهجية وقابلة لإعادة الاستخدام وجاهزة للمنتج بدلًا من التدهور إلى ترميز وميض لمرة واحدة.
التثبيت
npm install ng-hub-ui-skeletonانتقل إلى
مثالي لـ
- البطاقات والموجزات
- جداول البيانات
- النماذج
- لوحات التحكم
حول skeleton
يمنح ng-hub-ui-skeleton فرق Angular طريقة منظّمة لتصميم العناصر النائبة للتحميل: إعدادات مسبقة مجمّعة لأنماط الواجهة الشائعة، وDSL مدمجة للأشكال المخصّصة، وقيم متجاوبة تكيّف skeleton نفسه مع تخطيطات متعددة.
أدلّة الميزات
كتالوج الـ presets
الكتالوج المضمّن واسع عن قصد لأن حالات التحميل عادةً ما تكون واجهات أعمال متكرّرة وليست عناصر نائبة معزولة. وهو يتضمّن card وlist-item وtable-row وdetail-view وform-section وdashboard-widget وstat-card وchart-panel وprofile-summary وmaster-detail وkanban-card وfeed-item وsearch-result وtable-toolbar وfilter-bar وempty-state-skeleton. الفكرة هي السماح للفرق بالانطلاق من مفردات تحميل موجّهة للإنتاج بدلاً من إعادة بناء كتل shimmer نفسها في كل ميزة. عملياً، يعني ذلك أن الشاشات الكثيفة بالجداول يمكنها البدء من `table-toolbar` مع `table-row` متكرّر، وأن شاشات dashboard يمكنها مزج `stat-card` و`chart-panel` و`dashboard-widget`، وأن التدفقات المدفوعة بالمحتوى يمكنها اللجوء إلى `card` أو `feed-item` أو `search-result` دون كتابة شيفرة تخطيط جديدة من الصفر.
أمثلة:
Preset Catalogue Gallery
Shows the bundled presets together so teams can choose the closest starting point before authoring custom templates.
card
Content card with media, title and body lines.
list-item
Compact row with avatar and text.
table-row
Tabular data row placeholder.
detail-view
Detail screen with media and metadata.
form-section
Form group with responsive fields.
dashboard-widget
Panel with chart or metric content.
stat-card
Quick KPI summary card.
chart-panel
Large chart region with legend rows.
profile-summary
Profile hero with avatar and stats.
master-detail
List and detail layout together.
kanban-card
Small board card loading state.
feed-item
Activity or timeline row.
search-result
Search result with metadata lines.
table-toolbar
Toolbar with title, filters and actions.
filter-bar
Row of filter controls.
empty-state-skeleton
Illustrative empty or onboarding state.
card
Dense card variant for tighter layouts.
الكود
الاستيراد:
القالب:
المكوّن:
Bundled Card Preset
Renders the built-in card skeleton with the default shimmer appearance.
الكود
الاستيراد:
القالب:
المكوّن:
Dashboard Composition
Composes several presets to mock an analytics dashboard during loading.
الكود
الاستيراد:
القالب:
المكوّن:
التأليف بـ DSL مدمجة
تستخدم القوالب المضمّنة صيغة مدمجة على غرار Emmet لأن المكتبة مُحسَّنة للتكرار السريع داخل قواعد شيفرة Angular. يستخدم تركيب الأشقّاء `+`، ويستخدم التداخل `>`، وتعيش المعدّلات داخل الأقواس، وتستخدم التكرارات `*N`، وتُستوفى المعاملات بـ `{{param}}`. يمنح ذلك الفرق سطح تأليف مدمجاً يظلّ يُقرأ جيداً في pull requests ويسمح بتغييرات صغيرة دون إعادة كتابة شجرة كائنات كاملة. النقطة المهمة ليست براعة الصيغة، بل أن نيّة التخطيط تبقى قريبة من استخدام المكوّن وتظلّ سهلة المقارنة وإعادة الهيكلة والمراجعة.
أمثلة:
Compact DSL Patterns
Explains the core DSL building blocks with visual outputs for structure, params and responsive tokens.
Structure
`+` creates siblings and `>` nests children.
Params & repeats
Use {{param}} placeholders and *N repeaters to scale rows quickly.
Responsive values
Switch spacing or columns inline with compact breakpoint tokens.
الكود
الاستيراد:
القالب:
المكوّن:
Inline Emmet-like Template
Defines a custom skeleton shape inline with params interpolation.
الكود
الاستيراد:
القالب:
المكوّن:
المتغيرات والتخطيطات المتجاوبة
ينبغي ألا تتجاهل حالات التحميل كثافة التخطيط أو نقاط التوقّف، لأن المستخدمين يلاحظون عندما لا يكون للـ skeleton أي صلة بالواجهة الحقيقية. يمكن للـ presets أن تكشف متغيرات مثل `compact`، ويمكن لقيم المعدّلات الفردية أن تتبدّل عبر نقاط التوقّف باستخدام رموز متجاوبة مدمجة. يتيح ذلك الحفاظ على تعريف skeleton دلالي واحد مع تكييف العروض وأعداد الأعمدة والتباعد والأحجام عبر سياقات الهاتف المحمول والجهاز اللوحي وسطح المكتب. والنتيجة العملية هي قوالب مكرّرة أقل ومواءمة أفضل بكثير بين مرحلة العنصر النائب والواجهة المعروضة الحقيقية.
أمثلة:
Compact Variant
Compares the default card preset with its compact variant for denser interfaces.
الكود
الاستيراد:
القالب:
المكوّن:
Responsive Table Layout
Uses responsive values inside the built-in presets to adapt from compact to wider layouts.
الكود
الاستيراد:
القالب:
المكوّن:
التسجيل البرمجي والتنسيق
الـ presets المضمّنة هي نقطة البداية وليست السقف. يمكن للفرق تسجيل presets خاصة بالمشروع عبر حقن الاعتمادية في Angular ثم استهلاكها بالاسم تماماً مثل الكتالوج المدمج، وهو أمر بالغ الأهمية عندما يكون للمنتج لغة skeleton متكرّرة خاصة به. يبقى الضبط البصري في متغيرات CSS، بحيث يمكن لشدّة الـ shimmer واللون الأساسي ولون التمييز والتباعد ونصف القطر أن تتوافق مع نظام التصميم بدلاً من تسرّب القيم الثابتة إلى مكوّنات الميزات. هذا الفصل مهم: البنية تنتمي إلى الـ presets والـ DSL، بينما السياسة البصرية تنتمي إلى التنسيق.
أمثلة:
Programmatic Custom Preset
Registers a local preset and consumes it by name just like the bundled catalogue.
الكود
الاستيراد:
القالب:
المكوّن:
Dashboard Composition
Composes several presets to mock an analytics dashboard during loading.
الكود
الاستيراد:
القالب:
المكوّن:
الميزات الرئيسية
التغييرات الأخيرة
Version 0.1.0 - 4/14/26, 12:00 AM
added: Initial runtime skeleton library for Angular with bundled presets and a compact DSL parser.
added: Programmatic preset registration through dependency injection.
added: Responsive property values and compact preset variants.
added: Documentation page, overview content and live examples in the main ng-hub-ui site.