مكوّن Tabs وPills وAccordion لـ Angular | ng-hub-ui-panels
مكوّن لوحات محتوى لـ Angular يُعرض كـ tabs أو pills أو accordion، مع توجيه ونماذج تفاعلية وتنقّل بلوحة المفاتيح ومتغيرات CSS.
مرجع API
إليك العقد الكامل لـ panels: كل ما يمكنك ربطه والاستماع إليه وإسقاطه وتنسيقه، مجموعاً في مكان واحد. اربط ما تحتاجه ونسّق ما تريده — إنه standalone وملائم للـ Signals.
المدخلات
اضبط panels عبر 20 مدخلات. اربطها مثل أي @Input في Angular.
| الاسم | النوع | الافتراضي | الوصف |
|---|---|---|---|
type | 'tabs' | 'pills' | 'accordion' | 'card' | 'tabs' | طريقة عرض الحاوية: tabs مسطّرة، أو pills دائرية، أو لوحات accordion مكدّسة. |
vertical | boolean | false | يكدّس شريط الرؤوس رأسيًا بجوار المحتوى (عرضا tabs / pills). |
justified | boolean | false | يمدّ الرؤوس لتتقاسم العرض المتاح بالتساوي. |
scrollable | boolean | false | يضيف أزرار تمرير للخلف/للأمام عندما يفيض شريط الرؤوس. |
isKeysAllowed | boolean | true | يفعّل التنقل بلوحة المفاتيح (الأسهم / Home / End / Delete). |
multiple | boolean | false | يسمح بأن تكون عدة لوحات نشطة في وقت واحد. في عرض accordion تتوسّع جميعها؛ وفي عرضي tabs/pills يبدأ كل رأس نشط كتلة لوحة مرئية وتبقى الرؤوس غير النشطة التالية مجمّعة فوق تلك الكتلة حتى يبدأ الرأس النشط التالي كتلة جديدة. تصبح قيمة النموذج مصفوفة. |
flush | boolean | false | عرض accordion: لوحات من الحافة إلى الحافة دون حدود خارجية أو نصف قطر. |
bindValue | string | undefined | مسار بترميز النقاط يُطبَّق على قيمة كل لوحة للحصول على قيمة النموذج المُطلَقة (مثل 'meta.key'). |
compareWith | (a: unknown, b: unknown) => boolean | (a, b) => a === b | المساواة المستخدمة لمطابقة قيم النموذج مع قيم اللوحات. |
heading | string | undefined | hub-panel: رأس نص عادي. يُتجاهل عند توفير قالب hubPanelHeading. |
appearance | 'card' | 'alert' | 'card' | hub-panel: مظهر اللوحة المستقلة — 'card' (افتراضي) أو تنبيه دلالي 'alert'. يُتجاهل في عروض tabs/pills/accordion. |
variant | 'primary' | 'success' | 'danger' | 'warning' | 'info' | undefined | hub-panel: اللون الدلالي للتنبيه ('primary' | 'success' | 'danger' | 'warning' | 'info'). اتركه فارغًا للحصول على تنبيه محايد. |
value | unknown | id | hub-panel: القيمة المساهَم بها عند استخدام الحاوية كعنصر تحكم بالنموذج. |
active | boolean (model) | false | hub-panel: حالة active/expanded مربوطة ثنائية الاتجاه. |
disabled | boolean | false | hub-panel: يمنع تفعيل اللوحة. |
removable | boolean | false | hub-panel: يُظهر زر ✕ ويتيح الإزالة بمفتاح Delete. |
routerLink | string | string[] | undefined | hub-panel: يحوّل اللوحة إلى لوحة موجَّهة مدعومة بـ <router-outlet>. |
queryParams | Params | undefined | hub-panel: معاملات استعلام تُلحَق عند التنقل إلى routerLink. |
pathMatch | 'route' | 'full' | 'route' | hub-panel: مقارنة URL المستخدمة لوسم لوحة موجَّهة بأنها نشطة. |
customClass | string | undefined | hub-panel: فئات CSS إضافية تُطبَّق على كل من عنصر nav واللوح. |
المخرجات
تفاعل مع ما يفعله panels — 4 أحداث لربط منطقك بها.
| الاسم | النوع | الوصف |
|---|---|---|
panelChange | EventEmitter<PanelChangeEvent> | hub-panels: يُطلَق عندما يفعّل المستخدم (يفتح) لوحة مختلفة. يوفّر { current, prev }. |
selectPanel | EventEmitter<PanelComponent> | hub-panel: يُطلَق عندما تصبح اللوحة نشطة. |
deselectPanel | EventEmitter<PanelComponent> | hub-panel: يُطلَق عندما تتوقف اللوحة عن كونها نشطة. |
removed | EventEmitter<PanelComponent> | hub-panel: يُطلَق عند إزالة اللوحة عبر زر ✕ أو مفتاح Delete. |
القوالب
اجعله خاصاً بك — 3 فتحات قوالب تتيح لك إسقاط ترميز مخصّص.
| الاسم | الوصف | مثال |
|---|---|---|
hubPanelHeading | يحدّد <ng-template> داخل hub-panel كرأس مخصص لتلك اللوحة (رابط شريط في tabs/pills، زر إفصاح في accordion)، مستبدلًا إدخال الرأس النصي العادي. | <hub-panel>
<ng-template hubPanelHeading>
<i class="fa-solid fa-gear"></i> Settings <span class="badge text-bg-primary">3</span>
</ng-template>
Panel content
</hub-panel> |
hubPanelHeader / hubPanelFooter | يحدد عنصرًا داخل hub-panel كشريط رأس/تذييل لمحتوى اللوحة. يظهر في جميع العروض (tabs وpills وaccordion وcard)، بخلاف hubPanelHeading. | <hub-panel>
<div hubPanelHeader>Card title</div>
Card content
<div hubPanelFooter>Actions</div>
</hub-panel> |
type="card" | عرض البطاقات بدون زخرفة: بلا شريط تنقل، وكل لوحة مرئية دائمًا. يمكن أيضًا استخدام hub-panel بمفرده خارج أي hub-panels حيث يظهر كبطاقة. | <hub-panels type="card">
<hub-panel>…</hub-panel>
<hub-panel>…</hub-panel>
</hub-panels> |
متغيّرات CSS
نسّق كل بكسل عبر 36 متغيّرات CSS. تجاوزها عند :root أو حدّد نطاقها على غلاف.
التخطيط والحدود
البنية العامة للحاوية: اتجاه الشريط وحشو المحتوى ورموز الحدود المشتركة.
| المتغيّر | الافتراضي | النوع | الوصف |
|---|---|---|---|
--hub-panels-flex-direction | row | string | اتجاه شريط الرأس بالنسبة للمحتوى. rowrow-reverse |
--hub-panels-border-width | 1px | length | عرض الحدود المستخدم في شريط التبويبات والتبويب النشط. 02px |
--hub-panels-border-color | #dee2e6 | color | لون حدود شريط التبويبات والمحتوى. #ced4davar(--bs-border-color) |
--hub-panels-border-radius | 0.375rem | length | نصف قطر استدارة زوايا رؤوس التبويبات والمحتوى. 00.5rem |
--hub-panels-content-bg | #fff | color | خلفية منطقة المحتوى. transparent#f8f9fa |
--hub-panels-header-bg | var(--hub-panels-content-bg) | color | خلفية منطقة شريط التبويبات/الأقراص خلف الرؤوس غير النشطة ومناطق الفواصل. #f8f9favar(--bs-tertiary-bg) |
--hub-panels-content-box-shadow | none | shadow | ظل الصندوق المطبَّق على غلاف منطقة المحتوى. none0 0.5rem 1rem rgba(0,0,0,.08) |
--hub-panels-content-padding-x | 1rem | length | الحشو الأفقي لمنطقة المحتوى. 0.75rem1.5rem |
--hub-panels-content-padding-y | 1rem | length | الحشو الرأسي لمنطقة المحتوى. 0.75rem1.5rem |
رؤوس التبويبات
حالات الطباعة والتباعد واللون لرؤوس التبويبات/الأقراص الفردية.
| المتغيّر | الافتراضي | النوع | الوصف |
|---|---|---|---|
--hub-panels-tab-font-weight | 500 | number | وزن خط تسمية الرأس. 400600 |
--hub-panels-tab-padding-x | 1rem | length | الحشو الأفقي داخل الرأس. 0.75rem1.25rem |
--hub-panels-tab-padding-y | 0.5rem | length | الحشو الرأسي داخل الرأس. 0.375rem0.75rem |
--hub-panels-tab-color | #212529 | color | لون نص الرأس غير النشط. #495057var(--bs-body-color) |
--hub-panels-tab-bg | transparent | color | خلفية الرأس غير النشط؛ اتركها شفافة للسماح بظهور --hub-panels-header-bg. transparent#f8f9fa |
--hub-panels-tab-color-active | #0d6efd | color | لون نص الرأس النشط. var(--bs-primary)#0b5ed7 |
--hub-panels-tab-bg-active | #fff | color | خلفية الرأس النشط؛ تُضبط افتراضياً على سطح المحتوى بحيث يندمج التبويب النشط مع اللوحة. var(--bs-primary)var(--hub-panels-content-bg) |
--hub-panels-tab-bg-hover | #f8f9fa | color | خلفية الرأس عند المرور. #e9eceftransparent |
--hub-panels-tab-border-color-active | #0d6efd | color | لون حدود التبويب النشط. var(--bs-primary)#0b5ed7 |
--hub-panels-tab-active-shadow | 0 -0.25rem 0.5rem rgba(0, 0, 0, 0.06) | shadow | ظل الارتفاع المستخدم للتبويب النشط في عرض التبويبات المؤطَّرة الأفقي. none0 -0.25rem 0.75rem rgba(0,0,0,.12) |
--hub-panels-tab-active-shadow-vertical | -0.25rem 0 0.5rem rgba(0, 0, 0, 0.06) | shadow | ظل الارتفاع المستخدم للتبويب النشط في عرض التبويبات المؤطَّرة الرأسي. none-0.25rem 0 0.75rem rgba(0,0,0,.12) |
--hub-panels-tab-focus-ring-color | rgba(13, 110, 253, 0.25) | color | لون حلقة التركيز لتركيز لوحة المفاتيح. rgba(13,110,253,.4) |
الأقراص
رموز خاصة بعرض الأقراص.
| المتغيّر | الافتراضي | النوع | الوصف |
|---|---|---|---|
--hub-panels-pill-border-radius | 50rem | length | نصف قطر استدارة زوايا رؤوس الأقراص. 0.5rem999px |
--hub-panels-pill-bg-active | #0d6efd | color | خلفية القرص النشط. var(--bs-primary)#198754 |
--hub-panels-pill-color-active | #fff | color | لون نص القرص النشط. #fff#000 |
--hub-panels-pill-gap | 0.5rem | length | الفجوة بين رؤوس الأقراص. 0.25rem0.75rem |
--hub-panels-pill-content-border-width | 0 | length | عرض حدود بطاقة محتوى الأقراص؛ اضبطه على عرض الحدود المشترك لاستعادة لوحة محاطة بحدود. 01px |
--hub-panels-nav-content-gap | 1rem | length | الفجوة بين شريط الأقراص وبطاقة المحتوى (فجوة مضمَّنة عند الوضع الرأسي). 0.75rem1.5rem |
اختيار متعدّد
تخطيط العرض المتعدد القائم على الكتل عندما تسمح أنماط التبويبات/الأقراص بعدة رؤوس نشطة في آنٍ واحد.
| المتغيّر | الافتراضي | النوع | الوصف |
|---|---|---|---|
--hub-panels-pane-min-width | 16rem | length | الحد الأدنى لعرض كل لوحة مفتوحة قبل أن تتمرَّر منطقة المحتوى أفقياً. 12rem20rem |
--hub-panels-pane-min-height | 8rem | length | الحد الأدنى لارتفاع كل لوحة مفتوحة في التخطيط الرأسي. 6rem12rem |
--hub-panels-pane-gap | 0 | length | الفجوة بين كتل اللوحات المتعددة. 01rem |
عرض accordion
رموز عرض accordion. يرجع كل منها إلى متغير --hub-accordion-* المطابق لتوافق المظهر.
| المتغيّر | الافتراضي | النوع | الوصف |
|---|---|---|---|
--hub-panels-accordion-active-color | #0c63e4 | color | لون نص رأس accordion الموسَّع. var(--bs-primary) |
--hub-panels-accordion-active-bg | #e7f1ff | color | خلفية رأس accordion الموسَّع. var(--bs-primary-bg-subtle) |
--hub-panels-accordion-btn-padding-x | 1.25rem | length | الحشو الأفقي لزر الإفصاح. 1rem1.5rem |
--hub-panels-accordion-btn-padding-y | 1rem | length | الحشو الرأسي لزر الإفصاح. 0.75rem1.25rem |
--hub-panels-accordion-btn-icon-transform | rotate(-180deg) | string | التحويل المطبَّق على السهم عند التوسيع. rotate(180deg)scaleY(-1) |
--hub-panels-accordion-collapse-transition-duration | 0.25s | transition | مدة حركة التوسيع/الطي. 0.2s0.35s |
التنسيق والسمات
لم يتم توثيق أي أمثلة تنسيق بعد. سيتضمّن هذا القسم وصفات التخصيص وأمثلة السمات.