diff --git a/docs/docs/components/tabbed-pane.md b/docs/docs/components/tabbed-pane.md
index 93affaa3f..464310648 100644
--- a/docs/docs/components/tabbed-pane.md
+++ b/docs/docs/components/tabbed-pane.md
@@ -2,6 +2,7 @@
title: TabbedPane
slug: tabbedpane
sidebar_position: 125
+sidebar_class_name: updated-content
---
@@ -9,35 +10,24 @@ sidebar_position: 125
-The `TabbedPane` class provides a compact and organized way of displaying content that is divided into multiple sections, each associated with a `Tab`. Users can switch between these sections by clicking on the respective tabs, often labeled with text and/or icons. This class simplifies the creation of multifaceted interfaces where different content or forms need to be accessible but not simultaneously visible.
+The `TabbedPane` class provides an organized way of displaying content that's divided into multiple sections, each associated with a `Tab`. Users can switch between them by clicking labeled headers. It’s ideal when you want multiple panels accessible in one place, but only need to show one at a time.
-## Usages {#usages}
-
-The `TabbedPane` class is a gives developers a powerful tool for organizing and presenting multiple tabs or sections within a UI. Here are some typical scenarios where you might utilize a `TabbedPane` in your application:
-
-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:**: Utilize a `TabbedPane` to organize data management tasks, for instance:
- >- Different dataset to be displayed in an application
- >- 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 application at a time.
-
-4. **Task Management**: Task management applications 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 application that needs to run various programs, a `TabbedPane` could:
- >- Serve as a sidebar which allows for different applications or programs to be run within a single application, such as what is shown in the [`AppLayout`](./app-layout.md) template
- >- Create a top bar which can serve a similar purpose, or represent sub-applications within an already selected application.
+
## Tabs {#tabs}
-Tabs are UI elements that can be added to tabbed panes to organize and switch between different content views.
+Tabs are the clickable headers that organize and control content switching in a `TabbedPane`. Each `Tab` represents a different section of content that users can access.
:::important
-Tabs are not intended to be used as standalone components. They are meant to be used in conjunction with tabbed panes. This class is not a `Component` and should not be used as such.
+Tabs aren't intended to be used as standalone components. They're meant to be used in conjunction with TabbedPanes. This class isn't a `Component` and shouldn't be used as such.
:::
+You can create a `TabbedPane` with only the tab headers if you need navigation without content panels - simply add `Tab` objects without corresponding content. This is useful for creating tab-based navigation that controls content displayed elsewhere in your app.
+
### Properties {#properties}
Tabs are comprised of the following properties, which are then used when adding them in a `TabbedPane`. These properties have getters and setters to facilitate customization within a `TabbedPane`.
@@ -50,10 +40,11 @@ Tabs are comprised of the following properties, which are then used when adding
4. **Enabled(`boolean`)**: Represents whether the `Tab` is currently enabled or not. Can be modified with the `setEnabled(boolean enabled)` method.
-5. **Closeable(`boolean`)**: Represents whether the `Tab` can be closed. Can be modified with the `setCloseable(boolean enabled)` method. This will add a close button on the `Tab` which can be clicked on by the user, and fires a removal event. The `TabbedPane` component dictates how to handle the removal.
+5. **Closeable(`boolean`)**: Represents whether the `Tab` can be closed. Can be modified with the `setCloseable(boolean enabled)` method. This will add a close button on the `Tab` which can be clicked on by the user, and fires a removal event. The `TabbedPane` component dictates how to handle the removal.
6. **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.
+ Slots let you add extra elements to a `Tab` like icons, labels, spinners, avatars, or even reset buttons. These additions help convey meaning more clearly and give you room to customize the Tab’s appearance and behavior.
+
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`.
```java
@@ -67,7 +58,7 @@ Various methods exist to allow developers to add, insert, remove and manipulate
### Adding a `Tab` {#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.
+The `TabbedPane` offers multiple overloaded versions of `addTab()` and `add()` to give you flexibility when adding Tabs. Each new `Tab` is added after the existing ones.
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`.
@@ -81,7 +72,7 @@ The `add(Component... component)` determines the name of the passed `Component`
### Inserting a `Tab` {#inserting-a-tab}
-In addition to adding a `Tab` at the end of the existing tabs, it is also possible to create a new one at a designated position. To do this, multiple overloaded versions of the `insertTab()`.
+In addition to appending Tabs to the end, the `TabbedPane` also supports inserting Tabs at specific positions. This is achieved through the various overloaded forms of the `insertTab()` method.
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.
@@ -102,21 +93,83 @@ In addition to the two above methods for removal of a single `Tab`, use the **`r
The `remove()` and `removeAll()` methods do not remove tabs within the component.
:::
-### Tab/Component association {#tabcomponent-association}
+## Content management {#content-management}
-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`.
+### Associating content with `Tabs`
-:::info
-If this method is used on a `Tab` that is already associated with a `Component`, the previously associated `Component` will be destroyed.
-:::
+Each `Tab` can be associated with any webforJ component, from simple text to complex forms, charts, or even `Composite` components. This allows you to organize large interfaces into manageable, sectioned views.
+
+There are several ways to associate content with a Tab:
+
+- Provide both the `Tab` label and component
+
+```java
+TabbedPane pane = new TabbedPane();
+
+// Add tabs with different types of content
+pane.addTab("User Profile", new UserProfileForm());
+pane.addTab("Settings", new SettingsPanel());
+pane.addTab("Analytics", new AnalyticsChart());
+```
+
+- Provide a `Tab` instance and a Component
+
+For more control (e.g., to add a prefix icon or tooltip), you can pass a `Tab` instance along with a component:
+
+```java
+Tab settingsTab = new Tab("Settings", TablerIcon.create("settings"));
+pane.addTab(settingsTab, new SettingsPanel());
+```
+
+- Use `setComponentFor()`
+
+To change or update the content associated with an existing `Tab`, use `setComponentFor()`:
+
+```java
+pane.setComponentFor(settingsTab, new UpdatedSettingsPanel());
+pane.setComponentFor(1, new UpdatedSettingsPanel()); // By index
+```
+
+### Automatic content switching
+
+The `TabbedPane` handles content visibility based on tab selection:
+
+- Clicking a `Tab` shows the corresponding content panel
+- Switching Tabs hides the previous content and displays the new one
+- Keyboard navigation is supported after focusing the tab list. Use the `Tab` key to focus the Tabs, then arrow keys to navigate between them. The visible content updates automatically as you switch Tabs.
+
+## `Tab` events
+
+The `TabbedPane` fires events when users interact with Tabs:
+
+- **`TabSelectEvent`** - Fired when a `Tab` is selected
+- **`TabDeselectEvent`** - Fired when a `Tab` loses selection
+- **`TabCloseEvent`** - Fired when a closeable Tab's close button is clicked
+
+```java
+tabbedPane.onSelect(event -> {
+ Tab selectedTab = event.getTab();
+ // Handle when a tab becomes active
+});
+
+tabbedPane.onDeselect(event -> {
+ Tab deselectedTab = event.getTab();
+ // Handle when a tab loses focus
+});
+
+tabbedPane.onClose(event -> {
+ Tab closedTab = event.getTab();
+ // Handle close button clicks
+});
+```
## Configuration and layout {#configuration-and-layout}
-The `TabbedPane` class has two constituent parts: a `Tab` that is displayed in a specified location, and a component to be displayed. This can be a single component, or a [`Composite`](../building-ui/composite-components) component, allowing for the display of more complex components within a tab's content section.
+The `TabbedPane` consists of two main areas: the **tab headers** (displayed in a specified location) and the **content body** (where the associated component for the active `Tab` is displayed). The content body can contain any webforJ component or [`Composite`](../building-ui/composite-components) component.
### Swiping {#swiping}
-The `TabbedPane` supports navigating through the various tabs via swiping. This is ideal for a mobile application, but can also be configured via a built-in method to support mouse swiping. Both swiping and mouse swipping are disabled by default, but can be enabled with the `setSwipable(boolean)` and `setSwipableWithMouse(boolean)` methods, respectively.
+The `TabbedPane` supports swipe-based navigation, making it well-suited for mobile interfaces. You can also enable mouse-based swiping for desktop environments. Both features are disabled by default and can be activated using the `setSwipeable(boolean)` and `setSwipeWithMouse(boolean)` methods.