65 lines
4.0 KiB
Markdown
65 lines
4.0 KiB
Markdown
# TabControl Component
|
|
|
|
The `TabControl` component is a Blazor component that provides a tabbed interface for organizing content. It allows users to switch between different views or sections of content within the same page.
|
|
|
|
## Features
|
|
- Dynamically add or remove tabs.
|
|
- Support for vertical or horizontal tab layouts.
|
|
- Customizable tab headers and styles.
|
|
- Option to persist all tabs or only the active tab.
|
|
- Event callback for active tab changes.
|
|
|
|
## Parameters
|
|
|
|
| Parameter | Type | Default Value | Description |
|
|
|------------------|-----------------------|---------------|-----------------------------------------------------------------------------|
|
|
| `ChildContent` | `RenderFragment?` | `null` | The content to be rendered inside the `TabControl`. |
|
|
| `Class` | `string` | `""` | CSS class for the `TabControl` container. |
|
|
| `TabGroupClass` | `string` | `""` | CSS class for non-selectable tab headers. |
|
|
| `ShowHeaders` | `bool` | `true` | Determines whether tab headers are displayed. |
|
|
| `Vertical` | `bool` | `false` | If `true`, tabs are displayed vertically. |
|
|
| `PersistAllTabs` | `bool` | `false` | If `true`, all tabs are persisted in memory even when inactive. |
|
|
| `ActivePage` | `string` | `""` | The text of the currently active tab. |
|
|
| `ActivePageChanged` | `EventCallback<string>` | `null` | Callback invoked when the active tab changes. |
|
|
|
|
## Methods
|
|
|
|
| Method | Description |
|
|
|-------------------|-----------------------------------------------------------------------------|
|
|
| `AddPage(TabPage)` | Adds a new `TabPage` to the `TabControl`. |
|
|
| `ActivatePage(TabPage)` | Activates the specified `TabPage`. |
|
|
|
|
# TabPage Component
|
|
|
|
The `TabPage` component is a Blazor component that represents an individual tab within a `TabControl`. It is used to define the content and behavior of a single tab.
|
|
|
|
## Features
|
|
- Supports dynamic addition to a `TabControl`.
|
|
- Allows customization of tab content.
|
|
- Can be selectively displayed based on the active tab.
|
|
- Supports optional persistence of all tabs.
|
|
|
|
## Parameters
|
|
|
|
| Parameter | Type | Default Value | Description |
|
|
|------------------|-----------------------|---------------|-----------------------------------------------------------------------------|
|
|
| `ChildContent` | `RenderFragment?` | `null` | The content to be rendered inside the `TabPage`. |
|
|
| `Text` | `string` | `"Tab"` | The text identifier for the tab. |
|
|
| `IsSelectable` | `bool` | `true` | Determines whether the tab can be selected. |
|
|
|
|
## Cascading Parameters
|
|
|
|
| Parameter | Type | Description |
|
|
|------------------|-----------------------|-----------------------------------------------------------------------------|
|
|
| `Parent` | `TabControl` | The parent `TabControl` that this `TabPage` belongs to. |
|
|
|
|
## Methods
|
|
|
|
| Method | Description |
|
|
|-------------------|-----------------------------------------------------------------------------|
|
|
| `OnInitialized` | Ensures the `TabPage` is added to the parent `TabControl` during initialization. |
|
|
|
|
## Usage
|
|
|
|
### Basic Example
|