Angular 22 · standalone · حزم مستقلة

مكتبة مكوّنات Angular لتطبيقات standalone

مكوّنات واجهة مستخدم Angular قابلة لإعادة الاستخدام لتطبيقات standalone، وتدفقات عمل Angular Signals، وإمكانية الوصول، ومتغيّرات CSS، ووثائق جاهزة للإنتاج تغطّي النوافذ المنبثقة وجداول البيانات والتنقّل والتقويمات والمزيد.

npm install ng-hub-ui-modal
مكوّنات حقيقية وحيّة.
هذه ليست لقطة شاشة.
<hub-panels />
AL
GH
AT
<hub-avatar />
<hub-skeleton />
--hub-sys-color-primarynpm i ng-hub-ui-*
19المكوّنات
80+متغيّرات CSS
7السمات
v22Angular

مكتبة واحدة، كل علامة تجارية

يُدار كل مكوّن بمتغيّرات CSS. اختر سمة وشاهد الموقع بأكمله يُعيد رسم نفسه — دون إعادة بناء ودون CSS إضافي.

جرّبه — هذا يبدّل السمة الحيّة للموقع بأكمله.

AL
GH
AT
متغيّرات CSS

لماذا Hub UI؟

قابل للوصول بالكامل

تتّبع جميع المكوّنات إرشادات WCAG 2.1 مع دعم كامل للتنقّل عبر لوحة المفاتيح وقارئات الشاشة.

مُدار بمتغيّرات CSS

يكشف كل مكوّن عن خصائص CSS مخصّصة. تجاوز أي رمز ليتطابق مع علامتك التجارية — تنتشر التغييرات فوراً عبر جميع السمات.

TypeScript أولاً

تحديد صارم للأنواع في كل مكان. استفد من الإكمال التلقائي الكامل والأمان وقت التجميع وتجربة تطوير من الطراز الأول.

بنية standalone

مبني على نموذج المكوّنات standalone الحديث في Angular. استورد ما تحتاجه فقط وحافظ على حِزَمك خفيفة.

كود حقيقي، مكوّن حقيقي

بضعة أسطر من القالب هي كل ما يلزم. يعرض المقتطف على اليسار المكوّن الحيّ على اليمين.

القالب
النتيجة الحيّة
The first enabled panel is activated automatically.
Switch panels with a click or the arrow keys.
Each panel projects its own content.

جميع المكوّنات

استكشف مكوّنات Angular المصمّمة لفِرَق المنتجات الحقيقية وأنظمة التصميم القابلة لإعادة الاستخدام وتطبيقات standalone القابلة للصيانة.

Modal

مكوّن نافذة منبثقة Angular قابل للوصول مع التكديس ووضع ملء الشاشة والقوالب.

Paginable

جدول بيانات Angular وقائمة مقسّمة بالصفحات مع التصفية والفرز والعمليات من جانب الخادم.

Sortable

أدوات قوائم قابلة للفرز في Angular للمصفوفات وعناصر تحكّم FormArray وأدوات بناء السحب والإفلات.

Calendar

مكوّن تقويم Angular لواجهات الجدولة والأحداث والتخطيط.

Avatar

مكوّن صورة رمزية Angular مع الأحرف الأولى وبدائل الصور ومؤشرات الحالة.

Board

مكوّن لوحة Kanban في Angular مع السحب والإفلات لواجهات سير العمل.

Breadcrumbs

مسارات تنقّل Angular مع تكامل الموجّه وقوالب مخصّصة.

History

مخزن التراجع والإعادة في Angular للمحرّرات والنماذج وأدوات البناء منخفضة الكود.

Nav

قوائم تنقّل Angular للأشرطة الجانبية والقوائم المنسدلة ولوحات التعمّق والتخطيطات المتجاوبة.

Portal

عرض البوابة والتراكب في Angular للأدراج واللوحات العائمة والحاويات الديناميكية.

Skeleton

عناصر هيكلية نائبة في Angular مع إعدادات مسبقة وقوالب DSL مضمّنة وتخطيطات وميض متجاوبة.

Stepper

مكوّن خطوات Angular لنماذج المعالج والإعداد الأولي وتدفقات التحقّق متعدّدة الخطوات.

Toast

مكوّن Angular للإشعارات (toast) مع تحديد الموضع والتكديس والإغلاق التلقائي.

Buttons

أزرار Angular وFAB وSpeed Dial وموجِّهات القوائم المنسدلة لواجهات غنية بالإجراءات.

Badges

مكوّن Angular للشارات (badges) للتسميات والعدّادات ومؤشرات الحالة، قابل للتخصيص بالكامل.

Panels

مكوّن Angular للوحات والأكورديون مع توسيع مفرد أو متعدد وتنسيق كامل.

Forms

مكتبة Angular للنماذج بحقول متقدمة وقائمة اختيار وتحقّق وعرض ديناميكي.

Milestones

مكوّن Angular للخط الزمني وخطوات التقدّم بتخطيط رأسي وأفقي ومتحرّك.

Utils

مكتبة أدوات Angular مع التراكبات وإدارة التركيز والأنابيب ومساعدات الترجمة.

ابدأ في ثوانٍ

1

ثبّت مكوّناً

npm install ng-hub-ui-modal
2

استورده بشكل standalone

import { HubModalModule } from 'ng-hub-ui-modal';
3

خصّصه بمتغيّرات CSS

--hub-modal-border-radius: 1rem;
اقرأ الوثائق

ابنِ واجهة Angular التالية مع Hub UI

مفتوح المصدر ومعياري وجاهز للإنتاج. ثبّت مكوّنك الأول اليوم.