# certara-tabs

<!-- Auto Generated Below -->


## Overview

The main wrapping component for all tabs. This component controls the event emitters as well as navigation for all tabbing logic.

## Usage

### Path-based-routing

#### Path-based routing (Angular Router)

Use `navigation="path"` with a `path` attribute on each `<certara-tab-item>` to drive or reflect path-based routes (e.g. with a single `router-outlet`).

- **Initial load:** The tab whose `path` matches the current URL pathname is selected.
- **Tab click:** The component emits `certaraTabsPathNavigate` with `{ path, tab }`; the host should navigate (e.g. `router.navigateByUrl(detail.path)`).
- **Route changes:** The host should call `select(tab)` when the route changes (e.g. on `NavigationEnd`) so the tab bar stays in sync.

For Angular, use the **CertaraTabsRouterDirective** from `@certara/certara-ui-angular`: add `[certaraTabsRouter]="tabRoutes"` to `<certara-tabs>` and provide a `tabRoutes` array of `{ tab, path }`. The directive handles navigation on tab click and syncs the selected tab on route change. Ensure `RouterModule` is imported in your app.

```html
<certara-tabs name="security" navigation="path" [certaraTabsRouter]="tabRoutes">
  <certara-tab-list slot="list">
    <certara-tab-item tab="users" path="/dash/security">Users</certara-tab-item>
    <certara-tab-item tab="groups" path="/dash/security/groups">Groups</certara-tab-item>
  </certara-tab-list>
  <certara-tab-panel tab="users"><router-outlet></router-outlet></certara-tab-panel>
  <certara-tab-panel tab="groups"><router-outlet></router-outlet></certara-tab-panel>
</certara-tabs>
```

```ts
import { CertaraTabRoute } from '@certara/certara-ui-angular';

tabRoutes: CertaraTabRoute[] = [
  { tab: 'users', path: '/dash/security' },
  { tab: 'groups', path: '/dash/security/groups' },
];
```



## Properties

| Property     | Attribute     | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | Type                              | Default     |
| ------------ | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------- |
| `defaultTab` | `default-tab` | The tab to default to on first render. If navigation is used, the navigation value will override the defaultTab value.                                                                                                                                                                                                                                                                                                                                                             | `string`                          | `undefined` |
| `name`       | `name`        | The name of the tab set. This is similar to an id. If there are multiple tab sets on the same page make sure their names are all unique.                                                                                                                                                                                                                                                                                                                                           | `string`                          | `'tab'`     |
| `navigation` | `navigation`  | Set this attribute to utilize the URL to control tab navigation. 'fragment' will put the tab id in behind a hash (#). 'query' will put the tab id in a query param with the 'name' as the key. 'path' uses the full pathname: tab items with a `path` attribute are matched to the current path on init; on tab click the component emits certaraTabsPathNavigate so the host (e.g. Angular Router) can navigate. The tab specified in the URL will also be shown on initial load. | `"fragment" \| "path" \| "query"` | `undefined` |
| `scrollable` | `scrollable`  | When true, the active tab panel will be scrollable within the available space.                                                                                                                                                                                                                                                                                                                                                                                                     | `boolean`                         | `false`     |


## Events

| Event                     | Description                                                                                                                                                            | Type                                      |
| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- |
| `certaraTabsDidChange`    | Fired after the old tab leaves, and the new tab is shown. The 'tab' param will contain the 'tab' attribute of the newly revealed tab.                                  | `CustomEvent<{ tab: string; }>`           |
| `certaraTabsPathNavigate` | When navigation="path", fired when a tab with a path is selected. The host should navigate to detail.path (e.g. Angular: router.navigateByUrl(detail.path)).           | `CustomEvent<TabPathNavigateEventDetail>` |
| `certaraTabsWillChange`   | Fired when a tab is about to show. This event is fired at the same time certaraTabsWillLeave is fired, but with the 'tab' param as the 'tab' attribute of the new tab. | `CustomEvent<{ tab: string; }>`           |
| `certaraTabsWillLeave`    | Event that's fired when a tab is about to leave. The 'tab' param will contain the 'tab' attribute of the tab that is leaving.                                          | `CustomEvent<{ tab: string; }>`           |


## Methods

### `getTab(tab: string | HTMLCertaraTabPanelElement) => Promise<HTMLCertaraTabPanelElement | undefined>`

Programmatically retrieve a tab panel within the tab set.

#### Parameters

| Name  | Type                                   | Description                                        |
| ----- | -------------------------------------- | -------------------------------------------------- |
| `tab` | `string \| HTMLCertaraTabPanelElement` | The 'tab' attribute, or tab panel element to fetch |

#### Returns

Type: `Promise<HTMLCertaraTabPanelElement>`

a certara-tab-panel element, or undefined if a tab panel cannot be found

### `select(tab: string | HTMLCertaraTabPanelElement) => Promise<boolean>`

Programmatically switch to a different tab.

#### Parameters

| Name  | Type                                   | Description                                                            |
| ----- | -------------------------------------- | ---------------------------------------------------------------------- |
| `tab` | `string \| HTMLCertaraTabPanelElement` | The 'tab' attribute, or tab panel element to programatically switch to |

#### Returns

Type: `Promise<boolean>`

true if the tab is successfully switched, otherwise false


## Slots

| Slot     | Description                         |
| -------- | ----------------------------------- |
|          | Slot for the tab panels and content |
| `"list"` | Slot for the tab list               |


----------------------------------------------