Skip to content

feat(tab): add singlePane mode for shared content container#691

Open
giulio-leone wants to merge 2 commits into
italia:mainfrom
giulio-leone:feat/575-tab-single-pane
Open

feat(tab): add singlePane mode for shared content container#691
giulio-leone wants to merge 2 commits into
italia:mainfrom
giulio-leone:feat/575-tab-single-pane

Conversation

@giulio-leone

Copy link
Copy Markdown
Contributor

Closes #575

Adds a singlePane input to ItTabContainerComponent. When enabled, the component renders N tab headers but a single shared content pane projected via <ng-content> — ideal for filter-style tabs where all tabs operate on the same view.

Usage

<it-tab-container [singlePane]="true">
  <it-tab-item label="All" [active]="true"></it-tab-item>
  <it-tab-item label="Active"></it-tab-item>
  <it-tab-item label="Archived"></it-tab-item>

  <div class="my-shared-content">
    Content filtered by the selected tab
  </div>
</it-tab-container>

Changes

  • New singlePane boolean input on ItTabContainerComponent
  • Template conditionally renders either individual tab panes or a single <ng-content> pane
  • 6 new tests (singlePane host component with content projection, header rendering, single pane count)

Testing

  • 114/114 tests passing (ChromeHeadless)
  • 0 lint errors
  • Double gate verified

⚠️ This reopens #647 which was accidentally closed due to fork deletion.

giulio-leone and others added 2 commits March 25, 2026 11:41
Add singlePane input to ItTabContainerComponent that renders N tab
headers but projects a single shared content pane via ng-content.
Useful when tabs act as filters on the same view rather than
separate navigation targets.

Closes italia#575

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Show [singlePane]="true" usage with shared panel mode, including
active tab, secondary tab, and disabled tab states.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@vercel

vercel Bot commented Mar 25, 2026

Copy link
Copy Markdown

@giulio-leone is attempting to deploy a commit to the dip-trasformazione-digitale Team on Vercel.

A member of the Team first needs to authorize it.

@vercel

vercel Bot commented Mar 27, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
design-angular-kit Error Error Mar 27, 2026 3:39pm

Request Review

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feat] Possibilità di utilizzare il componente <it-tab-container> renderizzando N tab ma un solo "container"

1 participant