Tabs (Web Components 7.5): vertical tab headers with headerPosition #1003

Task type

• New topic / component documentation
• Update existing topic (new release, API change, new feature)
• Add missing platform variant (Angular / React / WebComponents / Blazor)
• Improve existing content (clarity, examples, structure)
• Add or update code samples
• Other

Platform(s)

• Angular
• React
• WebComponents
• Blazor
• All platforms

Description

Ignite UI for Web Components 7.5 adds vertical tab headers to igc-tabs (IgniteUI/igniteui-webcomponents#2553), following the Angular feature. The PR, IgniteUI/igniteui-webcomponents#2556, is approved but not merged yet.

igc-tabs gets headerPosition (header-position attribute), described by the new TabsHeaderPosition type. top, the default, keeps the row of headers above the panels. start and end put the headers in a column on that side of the panels. To document:

• start and end follow the direction, so a start column is on the right in right-to-left layouts.
• The column is as wide as the widest header, and each header is at least as tall as a header in a row.
• Height: without a set height, the tabs grow with the selected panel. With a height or a max-height on the tabs, or a parent with a height, a taller panel scrolls its content, and scroll buttons appear above and below the headers when they don't fit.
• Keyboard: in a column, Up and Down move between the tabs, and the tab list has aria-orientation="vertical". Left and Right are not bound, so the browser keeps them.
• alignment applies along the column. In every theme, the indicator is on the side of the panels.

Topic: docs/xplat/src/content/en/components/layouts/tabs.mdx. React (IgrTabs) and Blazor (IgbTabs) wrap this component, so the shared topic covers them too once their packages include it.

• A new section with a sample of start and end.
• "Alignment": how alignment works in a column.
• "Scrolling": the scroll buttons above and below a column, and the height they need.
• "Keyboard Navigation": the keys in a column.
• API Reference: headerPosition and TabsHeaderPosition.

Acceptance criteria

• A section with a live sample and a code snippet of vertical headers.
• The height behavior, the right-to-left behavior and the keyboard keys in a column are described.
• The API Reference section lists headerPosition.

Related resources

• Issue: [Feature Request] Vertical tabs igniteui-webcomponents#2553
• PR: feat(tabs): Adds headerPosition (header-position) to igc-tabs igniteui-webcomponents#2556
• Angular feature: Feature Request: Vertical tabs igniteui-angular#1982, feat(tabs): add the headerPosition input for the headers igniteui-angular#17884