Skip to content

feat(tab): add responsive vertical breakpoint support#689

Open
giulio-leone wants to merge 2 commits into
italia:mainfrom
giulio-leone:feat/577-tab-responsive
Open

feat(tab): add responsive vertical breakpoint support#689
giulio-leone wants to merge 2 commits into
italia:mainfrom
giulio-leone:feat/577-tab-responsive

Conversation

@giulio-leone

Copy link
Copy Markdown
Contributor

Closes #577

Adds a verticalBreakpoint input to ItTabContainerComponent that enables responsive vertical tab layout. When set, the vertical layout activates only when the viewport width is at or above the specified Bootstrap breakpoint (sm/md/lg/xl/xxl).

Changes

  • New BootstrapBreakpoint exported type
  • New verticalBreakpoint input on ItTabContainerComponent
  • isVertical computed getter replaces direct vertical usage in the template
  • Uses window.matchMedia for responsive switching with proper cleanup
  • Template updated to use isVertical for all class bindings
  • 6 new tests covering static vertical, responsive breakpoint, and cleanup

Usage

<it-tab-container [vertical]="true">...</it-tab-container>

<it-tab-container [vertical]="true" verticalBreakpoint="md">...</it-tab-container>

Testing

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

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

giulio-leone and others added 2 commits March 25, 2026 11:36
Add verticalBreakpoint input to ItTabContainerComponent that allows
the vertical layout to activate only above a specified Bootstrap
breakpoint (sm/md/lg/xl/xxl). Uses window.matchMedia for responsive
switching. The vertical input continues to work as before when no
breakpoint is specified.

Closes italia#577

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Show verticalBreakpoint with md and lg breakpoints — tabs switch
from horizontal to vertical layout above the specified breakpoint.

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 Ready Ready Preview Mar 27, 2026 3:41pm

Request Review

@valeriocomo

Copy link
Copy Markdown
Member

@astagi this PR needs a deeper investigation

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] Permettere il passaggio da <it-tab-container> verticale a orizzontale su schermi più piccoli

2 participants