
Product
Unify Your Security Stack with Socket Basics
A single platform for static analysis, secrets detection, container scanning, and CVE checks—built on trusted open source tools, ready to run out of the box.
@phase2/outline-tabs
Advanced tools
Property | Attribute | Type | Default | Description |
---|---|---|---|---|
activation | activation | "auto" | "manual" | "auto" | When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to manual, the tab will receive focus but will not show until the user presses spacebar or enter. |
body | HTMLElement | |||
indicator | HTMLElement | |||
nav | HTMLElement | |||
placement | placement | "top" | "bottom" | "start" | "end" | "start" | The placement of the tabs. |
tabGroup | HTMLElement |
Method | Type | Description |
---|---|---|
getActiveTab | (): OutlineTab | undefined | |
getAllPanels | (): [OutlineTabPanel] | |
getAllTabs | (includeDisabled?: boolean): OutlineTab[] | |
handleClick | (event: MouseEvent): void | |
handleKeyDown | (event: KeyboardEvent): void | |
handleScrollToEnd | (): void | |
handleScrollToStart | (): void | |
intersectionObserver | (): void | |
preventIndicatorTransition | (): void | |
repositionIndicator | (): void | |
setActiveTab | (tab: OutlineTab, options?: { emitEvents?: boolean | undefined; scrollBehavior?: "auto" | "smooth" | undefined; } | undefined): void | |
setAriaLabels | (): void | |
show | (panel: string): void | Shows the specified tab panel. |
syncIndicator | (): void | |
syncTabsAndPanels | (): void |
Event | Type | Description |
---|---|---|
outline-tab-hide | { name: String } | Emitted when a tab is hidden. |
outline-tab-show | { name: String } | Emitted when a tab is shown. |
Name | Description |
---|---|
Used for grouping tab panels in the tab group. | |
nav | Used for grouping tabs in the tab group. |
Part | Description |
---|---|
active-tab-indicator | An element that displays the currently selected tab. This is a child of the tabs container. |
base | The component's base wrapper. |
body | The tab group body where tab panels are slotted in. |
nav | The tab group navigation container. |
tabs | The container that wraps the slotted tabs. |
Property | Attribute | Type | Default | Description |
---|---|---|---|---|
active | active | boolean | false | When true, the tab panel will be shown. |
name | name | string | "" | The tab panel's name. |
Name | Description |
---|---|
The tab panel's content. |
Part | Description |
---|---|
base | The component's base wrapper. |
Property | Attribute | Type | Default | Description |
---|---|---|---|---|
active | active | boolean | false | Draws the tab in an active state. |
disabled | disabled | boolean | false | Draws the tab in a disabled state. |
panel | panel | string | "" | The name of the tab panel the tab will control. The panel must be located in the same tab group. |
tab | HTMLElement |
Method | Type | Description |
---|---|---|
blur | (): void | Removes focus from the tab. |
focus | (options?: FocusOptions | undefined): void | Sets focus to the tab. |
Name | Description |
---|---|
The tab's label. |
Part | Description |
---|---|
base | The component's base wrapper. |
FAQs
The Outline Components for the web tabs component
The npm package @phase2/outline-tabs receives a total of 387 weekly downloads. As such, @phase2/outline-tabs popularity was classified as not popular.
We found that @phase2/outline-tabs demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 10 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
A single platform for static analysis, secrets detection, container scanning, and CVE checks—built on trusted open source tools, ready to run out of the box.
Product
Socket is launching experimental protection for the Hugging Face ecosystem, scanning for malware and malicious payload injections inside model files to prevent silent AI supply chain attacks.
Research
/Security News
The Socket Threat Research Team uncovered a coordinated campaign that floods the Chrome Web Store with 131 rebranded clones of a WhatsApp Web automation extension to spam Brazilian users.