مكوّن Tabs وPills وAccordion لـ Angular | ng-hub-ui-panels

مكوّن لوحات محتوى لـ Angular يُعرض كـ tabs أو pills أو accordion، مع توجيه ونماذج تفاعلية وتنقّل بلوحة المفاتيح ومتغيرات CSS.

نظرة عامة

لماذا تبحث الفِرَق عن هذه المكتبة

استخدم مكوّن اللوحات هذا لـ Angular عندما تحتاج إلى أنماط tabs وpills وaccordion من واجهة برمجية واحدة، مع لوحات موجّهة، وربط بالنماذج التفاعلية، وتنقّل بلوحة المفاتيح، وتنسيق عبر متغيرات CSS.

التثبيت

npm install ng-hub-ui-panels

انتقل إلى

مثالي لـ

  • صفحات الإعدادات
  • tabs تفاصيل المنتج
  • accordion الأسئلة الشائعة
  • أقسام لوحات التحكم

حول panels

يوحّد ng-hub-ui-panels أنماط tabs وpills وaccordion في مكوّن Angular واحد standalone مبني على Signals. يدعم اللوحات الموجّهة، والربط بالنماذج عبر ControlValueAccessor، والأشرطة القابلة للتمرير والعمودية، والتنسيق الكامل عبر ‎--hub-panels-*‎. وهو يحل محل ng-hub-ui-accordion، إذ يستبدل عرض accordion الخاص به مع الحفاظ على عقد رموز ‎--hub-accordion-*‎.

أدلّة الميزات

التمثيلات البصرية

مكوّن واحد بثلاثة عروض: علامات تبويب كلاسيكية بخطّ سفلي، وأقراص مستديرة، ولوحات accordion متراكمة للكشف — قابلة للتبديل عبر مُدخل `type` واحد.

أمثلة:
علامات تبويب أساسية

علامات تبويب أساسية

The first enabled panel is activated automatically.
Switch panels with a click or the arrow keys.
Each panel projects its own content.
الأقراص

الأقراص

Account settings live here.
Password and two-factor options.
Email and push preferences.
عرض accordion

عرض accordion

البطاقات وفتحات المحتوى

البطاقات وفتحات المحتوى

Project summary
No tabs, no pills — every panel is always visible and styled as a card.
Updated 2 hours ago
Team
The same hubPanelHeader / hubPanelFooter slots work in tabs, pills and accordion too.

A single standalone <hub-panel> (no container):

Standalone card
Dropped on its own, a hub-panel renders as a card by itself.
تنبيهات دلالية

تنبيهات دلالية

Heads up — a new version is available.
Your changes were saved successfully.
Your trial ends in 3 days.
Something went wrong while saving.
Tip: you can pin panels for quick access.
A neutral notice with no semantic variant.

An alert can use the same header/footer slots as a card:

Payment failed
We couldn't process your card. Update your billing details to keep your subscription active.
لون التمييز الدلالي للشريط

لون التمييز الدلالي للشريط

The active tab follows the success accent.
Switch tabs to see the accent move.
No per-colour CSS — one accent drives it all.
The active pill fills with the danger accent.
Hover the inactive pills too.
Everything derives from a single token.
A custom or built-in variant works the same way.
Active pill uses the warning accent.

تخطيط الشريط

رتّب شريط الترويسة ليلائم أي هيكل: كدّسه رأسياً بجانب المحتوى، أو مدّد الترويسات لملء العرض، أو اجعل الشريط الفائض قابلاً للتمرير.

أمثلة:
علامات تبويب عمودية

علامات تبويب عمودية

Your public profile information.
Invoices and payment methods.
Manage members and roles.
علامات تبويب موزّعة

علامات تبويب موزّعة

Today's agenda.
The seven-day view.
The full month at a glance.
علامات تبويب قابلة للتمرير

علامات تبويب قابلة للتمرير

Content for section 1.
Content for section 2.
Content for section 3.
Content for section 4.
Content for section 5.
Content for section 6.
Content for section 7.
Content for section 8.

إدارة اللوحات

عطّل لوحات معيّنة ودع المستخدمين يضيفون أو يزيلون اللوحات أثناء التشغيل عبر علامة ✕ ومفتاح Delete.

أمثلة:
لوحات معطّلة

لوحات معطّلة

This panel is selectable.
This panel is disabled.
Arrow keys skip the disabled panel.
لوحات قابلة للإزالة وديناميكية

لوحات قابلة للإزالة وديناميكية

Content for Tab 1.
Content for Tab 2.
Content for Tab 3.

قوالب مخصّصة

استبدل ترويسة النص العادي بأي قالب Angular — أيقونات أو شارات أو عناصر تحكّم تفاعلية — عبر موجّه `hubPanelHeading`.

أمثلة:
قوالب عناوين مخصصة

قوالب عناوين مخصصة

Twelve unread messages.
Messages you have sent.
Recently deleted items.

تكامل النماذج

دعم ControlValueAccessor من الدرجة الأولى يربط اللوحة (اللوحات) النشطة بالنماذج التفاعلية والقائمة على القوالب في Angular.

أمثلة:
تكامل النماذج التفاعلية

تكامل النماذج التفاعلية

Light theme preview.
Dark theme preview.
Follows the OS setting.
Selected value: "dark"

اختيار متعدّد

مع `multiple`، يمكن فتح عدّة لوحات في آنٍ واحد. في عرض accordion تتوسّع كلها؛ وفي عرضي tabs/pills تبدأ كل ترويسة نشطة لوحتها المرئية الخاصة بينما تبقى الترويسات غير النشطة التالية مجمّعة فوق تلك اللوحة حتى تبدأ الترويسة النشطة التالية كتلة جديدة.

أمثلة:
اختيار متعدّد

اختيار متعدّد

Click an inactive tab to split the layout into a new panel block. Click an active tab to merge that block back.

Key metrics and a quick overview of the account.
Detailed statistics and charts for the period.
A chronological feed of recent activity.
Free-form notes shared with the team.
Open panels: [ "summary", "stats" ]
رؤوس عمودية متعددة

رؤوس عمودية متعددة

Each active header starts a new row-like vertical block. The blocks stack top-to-bottom, and the whole layout scrolls horizontally only when one row needs more width.

Tabs
Public profile details and biography.
Invoices, payment methods and VAT details.
Members, roles and access levels.
Shared internal notes for the account.
Open tabs: [ "profile", "team" ]
Pills
Open items waiting for review.
Approvals and pending checks.
Publication options and scheduling.
Historical records and exported snapshots.
Open pills: [ "inbox", "publish" ]

خيارات accordion

يدعم عرض accordion عدّة لوحات موسّعة في آنٍ واحد وتخطيط `flush` من الحافة إلى الحافة دون إطار خارجي.

أمثلة:
أكورديون متعدد وبلا حدود

أكورديون متعدد وبلا حدود

Standard delivery in 3–5 business days.

Free returns within 30 days.

إمكانية الوصول

تنقّل كامل بلوحة المفاتيح (الأسهم وHome وEnd وDelete)، وtabindex متنقّل، وأدوار ARIA صحيحة لكل من نمطي tablist وaccordion للكشف.

أمثلة:
التنقّل بلوحة المفاتيح

التنقّل بلوحة المفاتيح

Focus a tab, then use ← → Home End. Press Delete on a removable tab to close it.

Use the arrow keys to move focus between headers.
Home and End jump to the first and last enabled header.
Press Delete while focused to remove this panel.

الميزات الرئيسية

التغييرات الأخيرة

Version 22.1.0 - 6/22/26, 12:00 AM

added: New variant input on <hub-panels> selecting the semantic accent of the navigation strip (active/hover tab, active pill, active accordion header). Built-in variants (primary | success | danger | warning | info) use the exact design-system tints; any custom string is also accepted and derived with color-mix. Defaults to primary.

added: New group-accent tokens --hub-panels-accent, --hub-panels-accent-emphasis and --hub-panels-accent-subtle; the strip active/hover affordances now resolve through this single accent instead of being hard-wired to --hub-sys-color-primary*.

changed: The outer container chrome now inherits from the --hub-container-* base layer (re-base hook), so overriding a container token on a subtree re-bases the panels chrome. No visual change with default tokens.

Version 21.3.0 - 6/16/26, 12:00 AM

added: New alert appearance for a standalone <hub-panel>: appearance="alert" with a variant renders a semantic callout (role="alert").

added: New variant input (primary | success | danger | warning | info) selecting the alert colour; omit it for a neutral alert. Exported HubPanelAppearance and HubPanelVariant types.

added: New alert tokens (--hub-panels-alert-*); each variant re-points them at the --hub-sys-color-<variant>-{subtle,border-subtle,emphasis} family, so the alert inherits every theme and dark mode automatically.

Version 21.2.0 - 6/14/26, 12:00 AM

added: New card visualization (type="card"): a chromeless format with no navigation strip where every <hub-panel> is always visible and styled as a card.

added: A <hub-panel> can now be used standalone, outside any <hub-panels> container, rendering as a card on its own.

added: New content-slot directives hubPanelHeader and hubPanelFooter, rendering header/footer bands in every view, distinct from the navigational hubPanelHeading.

Version 21.1.1 - 6/12/26, 12:00 AM

added: New token: --hub-panels-header-bg, used by the tabs/pills strip background while defaulting to the panel surface.

added: New token: --hub-panels-pill-content-border-width, which controls the bordered card chrome in the pills content area.

changed: The active header background now defaults to --hub-panels-content-bg so the active tab/panel fusion stays aligned when themes retint the content surface.

changed: The pills content area is borderless by default; themes can opt back into a bordered card by overriding --hub-panels-pill-content-border-width.

Version 21.1.0 - 6/11/26, 12:00 AM

added: Multiple selection in the tabs/pills views: each open pane becomes its own bordered box placed next to the others (side by side when horizontal, stacked when vertical), with a per-pane minimum and scroll on overflow.

added: New tokens: --hub-panels-pane-min-width, --hub-panels-pane-min-height, --hub-panels-pane-gap, --hub-panels-nav-content-gap, --hub-panels-pill-gap.

fixed: Accordion content was always empty (two unselected ng-content slots); replaced with a single projection slot.

fixed: tabs and vertical tabs now render as a single bordered box around the strip and content together (not two boxes); pills gain spacing before a bordered content card.

changed: Smooth strip scrolling, not-allowed cursor on disabled headers, and full-width container.

Version 21.0.0 - 6/11/26, 12:00 AM

added: Initial release of ng-hub-ui-panels with tabs, pills and accordion visualizations.

added: ControlValueAccessor integration with single and multiple selection, bindValue and compareWith.

added: Routed panels via routerLink with route/full pathMatch and a <router-outlet> content area.

added: Keyboard navigation (arrows/Home/End/Delete), scrollable, vertical and justified strips.

added: Accordion view with multiple expansion, flush layout and an animated grid-based collapse.

added: Custom header templates through the hubPanelHeading directive and full --hub-panels-* theming.

changed: Supersedes ng-hub-ui-accordion; the accordion view honours the --hub-accordion-* token contract for theme compatibility.

المكتبات ذات الصلة

ng-hub-ui-nav ng-hub-ui-stepper