Tabs
The <pines-tabs> component renders a tabbed interface for organizing related content into switchable panels. Use it when a page or section has multiple logical views that share the same context — such as "Overview", "Details", and "History" for a record, or "Preview" and "Code" for an editor. Each tab's content is placed in a named slot matching the key defined in tab-config.
Properties
| Attribute | Type | Default | Description |
tab-config
|
Dictionary<string, PinesTabConfigItem>
|
new Dictionary<>()
|
A dictionary mapping slot name keys to tab configuration objects. Each entry defines one tab — the key determines which named slot provides the tab's content, while the value controls the display name and ordering. |
class
|
string
|
""
|
Additional CSS classes applied to the tabs container. Use for width constraints, margin, or custom layout adjustments within the parent component. |
PinesTabConfigItem Properties
| Property | Type | Description |
TabName
|
string
|
The label displayed in the clickable tab header. Use a short, descriptive noun or noun phrase that clearly identifies the content within — for example, "Overview", "Settings", or "Activity". |
Order
|
int
|
Numeric value controlling the left-to-right display order of tabs. Lower numbers appear first. Use this to control tab sequence independently of dictionary insertion order. |