Skip to main content

TabbedPane

Open in ChatGPT
Shadow dwc-tabbed-pane 23.06
Java API

Multiple sections of content can be organized under a single TabbedPane, where each section is tied to a clickable Tab. Only one section is visible at a time, and tabs can display text, icons, or both to help users navigate between them.

Usages​

The TabbedPane class gives developers a powerful tool for organizing and presenting multiple tabs or sections within a UI. Here are some typical scenarios where you might use a TabbedPane in your app:

  1. Document Viewer: Implementing a document viewer where each tab represents a different document or file. Users can easily switch between open documents for efficient multitasking.

  2. Data Management: Use a TabbedPane to organize data management tasks, for instance:

    • Different datasets to be displayed in an app
    • Various user profiles can be displayed within separate tabs
    • Different profiles in a user management system

  3. Module Selection: A TabbedPane can represent different modules or sections. Each tab can encapsulate the functionalities of a specific module, enabling users to focus on one aspect of the app at a time.

  4. Task Management: Task management apps can use a TabbedPane to represent various projects or tasks. Each tab could correspond to a specific project, allowing users to manage and track tasks separately.

  5. Program Navigation: Within an app that needs to run various programs, a TabbedPane could:

    • Serve as a sidebar which allows for different apps or programs to be run within a single app, such as what's shown in the AppLayout template
    • Create a top bar which can serve a similar purpose, or represent sub-applications within an already selected app

Tabs dwc-tab​

Tabs are UI elements that can be added to tabbed panes to organize and switch between different content views.

important

Tabs aren't intended to be used as standalone components. They're meant to be used in conjunction with tabbed panes. This class isn't a Component and shouldn't be used as such.

Properties​

Tabs are composed of the following properties, which are used when adding them in a TabbedPane. These properties have getters and setters to facilitate customization within a TabbedPane.

  1. Text(String): The text that's displayed as a title for the Tab within the TabbedPane. This is also referred to as the title via the getTitle() and setTitle(String title) methods.

  2. Tooltip(String): The tooltip text associated with the Tab, which is displayed when the cursor hovers over the Tab.

  3. Enabled(boolean): Represents whether the Tab is enabled or not. Can be modified with the setEnabled(boolean enabled) method.

  4. Closable(boolean): Represents whether the Tab can be closed. Can be modified with the setClosable(boolean closable) method. This will add a close button on the Tab which can be clicked, and fires a removal event. The TabbedPane component dictates how to handle the removal.

  5. Slot(Component): Slots provide flexible options for improving the capability of a Tab. You can have icons, labels, loading spinners, clear/reset capability, avatar/profile pictures, and other beneficial components nested within a Tab to further clarify intended meaning to users. You can add a component to the prefix slot of a Tab during construction. Alternatively, you can use the setPrefixComponent() and setSuffixComponent() methods to insert various components before and after the displayed option within a Tab.

    TabbedPane pane = new TabbedPane();
    pane.addTab(new Tab("Documents", TablerIcon.create("files")));

Tab manipulation​

Various methods exist to allow developers to add, insert, remove, and manipulate various properties of Tab elements within the TabbedPane.

Adding a Tab​

The addTab() and add() methods exist in different overloaded capacities to allow developers flexibility in adding new tabs to the TabbedPane. Adding a Tab will place it after any previously existing tabs.

  1. addTab(String text): adds a Tab to the TabbedPane with the specified String as the text of the Tab.
  2. addTab(Tab tab): adds the Tab provided as a parameter to the TabbedPane.
  3. addTab(String text, Component component): adds a Tab with the given String as the text of the Tab, and the provided Component displayed in the content section of the TabbedPane.
  4. addTab(Tab tab, Component component): adds the provided Tab and displays the provided Component in the content section of the TabbedPane.
  5. add(Component... component): adds one or more Component instances to the TabbedPane, creating a discrete Tab for each one, with the text being set to the name of the Component.
info

The add(Component... component) determines the name of the passed Component by calling component.getName() on the passed argument.

Inserting a Tab​

In addition to adding a Tab at the end of the existing tabs, it's also possible to create a new one at a designated position. To do this, multiple overloaded versions of the insertTab().

  1. insertTab(int index, String text): inserts a Tab into the TabbedPane at the given index with the specified String as the text of the Tab.
  2. insertTab(int index, Tab tab): inserts the Tab provided as a parameter to the TabbedPane at the specified index.
  3. insertTab(int index, String text, Component component): inserts a Tab with the given String as the text of the Tab, and the provided Component displayed in the content section of the TabbedPane.
  4. insertTab(int index, Tab tab, Component component): inserts the provided Tab and displays the provided Component in the content section of the TabbedPane.

Removing a Tab​

To remove a single Tab from the TabbedPane, use one of the following methods:

  1. removeTab(Tab tab): removes a Tab from the TabbedPane by passing the Tab instance to be removed.
  2. removeTab(int index): removes a Tab from the TabbedPane by specifying the index of the Tab to be removed.

In addition to the two above methods for removal of a single Tab, use the removeAllTabs() method to clear the TabbedPane of all tabs.

info

The remove() and removeAll() methods don't remove tabs within the component.

Tab/Component association​

To change the Component to be displayed for a given Tab, call the setComponentFor() method, and pass either the instance of the Tab, or the index of that Tab within the TabbedPane.

info

If this method is used on a Tab that's already associated with a Component, the previously associated Component will be destroyed.

Configuration and layout​

The TabbedPane class has two constituent parts: a Tab that's displayed in a specified location, and a component to be displayed. This can be a single component, or a Composite component, allowing for the display of more complex components within a tab's content section.

Swiping​

The TabbedPane supports navigating through the various tabs via swiping. This is ideal for a mobile app, but can also be configured via a built-in method to support mouse swiping. Both swiping and mouse swiping are disabled by default, but can be enabled with the setSwipeable(boolean) and setSwipeWithMouse(boolean) methods, respectively.

Tab placement​

The Tabs within a TabbedPane can be placed in various positions within the component based on the app developers preference. Provided options are set using the provided enum, which has the values of TOP, BOTTOM, LEFT, RIGHT, or HIDDEN. The default setting is TOP.

Show Code

Alignment​

In addition to changing the placement of the Tab elements within the TabbedPane, it's also possible to configure how the tabs will align within the component. By default, the setting AUTO is in effect, which allows the placement of the tabs to dictate their alignment.

The other options are START, END, CENTER, and STRETCH. The first three describe the position relative to the component, with STRETCH making the tabs fill the available space.

Show Code

Border and activity indicator​

The TabbedPane will have a border displayed for the tabs within it by default, placed dependant on which Placement has been set. This border helps to visualize the space that the various tabs within the pane take up.

When a Tab is clicked on, by default, an activity indicator is displayed near that Tab to help highlight which is the currently selected Tab.

Both of these options can be customized by changing the boolean values using the appropriate setter methods. To change whether or not the border is shown, the setBorderless(boolean) method can be used, with true hiding the border, and false, the default value, displaying the border.

info

This border doesn't apply to the entirety of the TabbedPane component, and merely serves as a separator between the tabs and the content of the component.

To set the visibility of the active indicator, the setHideActiveIndicator(boolean) method can be used. Passing true to this method will hide the active indicator beneath an active Tab, whereas false, the default, keeps the indicator displayed.

Show Code

Activation modes​

For more fine-grained control over how the TabbedPane behaves with keyboard navigation, the Activation mode can be set to specify how the component should behave.

  • Auto: when set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab component.

  • Manual: when set to manual, the tab will receive focus but won't show until the user presses space or enter.

Show Code

Removal options​

Individual Tab elements can be set to be closable. Closable tabs will have a close button added to the tab, which fires a close event when clicked. The TabbedPane dictates how this behavior is handled.

  • Manual: by default, removal is set to MANUAL, which means that the event is fired, but it's up to the developer to handle this event in whatever way they choose.

  • Auto: alternatively, AUTO can be used which will fire the event, and also remove the Tab from the component for the developer, removing the need for the developer to implement this behavior manually.

Segment control 26.00​

The TabbedPane can be rendered as a segment control by enabling the segment property with setSegment(true). In this mode, tabs are displayed with a sliding pill indicator that highlights the active selection, providing a compact alternative to the standard tabbed interface.

Show Code

Styling​

Expanse and theme​

The TabbedPane comes with built-in Expanse and Theme options similar to other webforJ components. These can be used to quickly add styling that conveys various meaning to the end user without needing to style the component with CSS.

Show Code

Loading...

Best practices​

The following practices are recommended for using the TabbedPane within applications:

  • Logical Grouping: Use tabs to logically group related content:

    • Each tab should represent a distinct category or functionality within your app.
    • Group similar or logical tabs near one another.

  • Limited Tabs: Avoid overwhelming users with too many tabs. Consider using a hierarchical structure or other navigation patterns where applicable for a clean interface.

  • Clear Labels: Clearly label your Tabs for intuitive use:

    • Provide clear and concise labels for each tab.
    • Labels should reflect the content or purpose, making it easy for users to understand.
    • Use icons and distinct colors where applicable.

  • Keyboard Navigation: Use webforJ's TabbedPane keyboard navigation support to make interaction with the TabbedPane more seamless and intuitive for the end user.

  • Default Tab: If the default tab isn't placed at the beginning of the TabbedPane, consider setting this tab as default for essential or commonly used information.

webforJ team

Need a hand?

Talk to the engineers behind webforJ about your project.

Contact us