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

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

أمثلة تفاعلية

استكشف أمثلة حيّة توضّح كيف تتصرّف المكتبة في حالات استخدام Angular الشائعة.

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

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

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

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.

لوحات معطّلة

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.

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

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

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

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

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

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" ]

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

Standard delivery in 3–5 business days.

Free returns within 30 days.

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

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.

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

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.