Angular Tabs, Pills & Accordion Component | ng-hub-ui-panels

Angular content-panels component that renders as tabs, pills or an accordion, with routing, reactive forms, keyboard navigation and CSS variables.

Interactive examples

Explore live examples that show how the library behaves in common Angular use cases.

Basic Tabs

This example contains tests. Open it in a development environment to run them.

Pills

This example contains tests. Open it in a development environment to run them.

Accordion View

This example contains tests. Open it in a development environment to run them.

Vertical Tabs

Your public profile information.
Invoices and payment methods.
Manage members and roles.

Justified Tabs

Today's agenda.
The seven-day view.
The full month at a glance.

Scrollable Tabs

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.

Disabled Panels

This example contains tests. Open it in a development environment to run them.

Removable & Dynamic Panels

This example contains tests. Open it in a development environment to run them.

Custom Heading Templates

This example contains tests. Open it in a development environment to run them.

Reactive Forms Integration

This example contains tests. Open it in a development environment to run them.

Multiple Selection

This example contains tests. Open it in a development environment to run them.

Multiple Vertical Headers

This example contains tests. Open it in a development environment to run them.

Accordion Multiple & Flush

This example contains tests. Open it in a development environment to run them.

Keyboard Navigation

This example contains tests. Open it in a development environment to run them.

Card & Content Slots

This example contains tests. Open it in a development environment to run them.

Semantic Alerts

This example contains tests. Open it in a development environment to run them.

Semantic Strip Accent

This example contains tests. Open it in a development environment to run them.