Package org.patternfly.component.tabs

package org.patternfly.component.tabs
Provides a tabs component for organizing content into separate views within the same page.

Tabs allow users to switch between groups of related content. This package supports horizontal and vertical layouts, box and secondary styling variants, disabled tabs, ARIA-disabled tabs with tooltip support, expandable vertical tabs, and overflow handling.

Key Classes

  • Tabs - Main tabs container
  • Tab - Individual tab with label and content
  • TabContent - Content panel for a tab
  • TabContentBody - Body within tab content
  • OverflowTab - Overflow tab for responsive handling

Usage

Create tabs with content panels: 

import static org.patternfly.component.tabs.Tab.tab;
import static org.patternfly.component.tabs.TabContent.tabContent;
import static org.patternfly.component.tabs.Tabs.tabs;

Tabs tabs = tabs()
        .addItem(tab("users", "Users")
                .addContent(tabContent().text("Users content")))
        .addItem(tab("containers", "Containers")
                .addContent(tabContent().text("Containers content")))
        .addItem(tab("database", "Database")
                .addContent(tabContent().text("Database content")))
        .addItem(tab("disabled", "Disabled")
                .disabled()
                .addContent(tabContent().text("Disabled content")));

Create vertical tabs with box styling: 

import static org.patternfly.component.tabs.Tab.tab;
import static org.patternfly.component.tabs.TabContent.tabContent;
import static org.patternfly.component.tabs.Tabs.tabs;

Tabs verticalTabs = tabs().vertical().box(true)
        .addItem(tab("tab-1", "Tab 1")
                .addContent(tabContent().text("Tab 1 content")))
        .addItem(tab("tab-2", "Tab 2")
                .addContent(tabContent().text("Tab 2 content")));
See Also:
  • Classes
    Class
    Description
    Tab
     
    TabContent
     
    TabContentBody
     
    Tabs
    Tabs allow users to navigate between views within the same page or context.