Tabs

Show design guidelines

Code

HTML

React

Angular

Tab 1

Tab 2

Tab 3

Tab 4

Tab 1 Panel

Tab 2 Panel

Tab 3 Panel

Tab 4 Panel

<certara-tabs name="default-tabs-example">
  <certara-tab-list slot="list">
    <certara-tab-item tab="tab-1">Tab 1</certara-tab-item>
    <certara-tab-item tab="tab-2">Tab 2</certara-tab-item>
    <certara-tab-item tab="tab-3" disabled active>Tab 3</certara-tab-item>
    <certara-tab-item tab="tab-4">Tab 4</certara-tab-item>
  </certara-tab-list>
  <certara-tab-panel tab="tab-1">Tab 1 Panel</certara-tab-panel>
  <certara-tab-panel tab="tab-2">Tab 2 Panel</certara-tab-panel>
  <certara-tab-panel tab="tab-3">Tab 3 Panel</certara-tab-panel>
  <certara-tab-panel tab="tab-4">Tab 4 Panel</certara-tab-panel>
</certara-tabs>

import { CertaraTabItem, CertaraTabList, CertaraTabPanel, CertaraTabs } from '@certara/certara-ui-react';

<CertaraTabs name="default-tabs-example">
  <CertaraTabList slot="list">
    <CertaraTabItem tab="tab-1">Tab 1</CertaraTabItem>
    <CertaraTabItem tab="tab-2">Tab 2</CertaraTabItem>
    <CertaraTabItem tab="tab-3" disabled active>Tab 3</CertaraTabItem>
    <CertaraTabItem tab="tab-4">Tab 4</CertaraTabItem>
  </CertaraTabList>
  <CertaraTabPanel tab="tab-1">Tab 1 Panel</CertaraTabPanel>
  <CertaraTabPanel tab="tab-2">Tab 2 Panel</CertaraTabPanel>
  <CertaraTabPanel tab="tab-3">Tab 3 Panel</CertaraTabPanel>
  <CertaraTabPanel tab="tab-4">Tab 4 Panel</CertaraTabPanel>
</CertaraTabs>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-tabs name="default-tabs-example">
  <certara-tab-list slot="list">
    <certara-tab-item tab="tab-1">Tab 1</certara-tab-item>
    <certara-tab-item tab="tab-2">Tab 2</certara-tab-item>
    <certara-tab-item tab="tab-3" disabled active>Tab 3</certara-tab-item>
    <certara-tab-item tab="tab-4">Tab 4</certara-tab-item>
  </certara-tab-list>
  <certara-tab-panel tab="tab-1">Tab 1 Panel</certara-tab-panel>
  <certara-tab-panel tab="tab-2">Tab 2 Panel</certara-tab-panel>
  <certara-tab-panel tab="tab-3">Tab 3 Panel</certara-tab-panel>
  <certara-tab-panel tab="tab-4">Tab 4 Panel</certara-tab-panel>
</certara-tabs>

Tab 1

Tab 2

Tab 3

Tab 4

Tab 1 Panel

Tab 2 Panel

Tab 3 Panel

Tab 4 Panel

<certara-tabs name="panel-tabs-example" default-tab="tab-2">
  <certara-tab-list slot="list" variant="panel">
    <certara-tab-item tab="tab-1">Tab 1</certara-tab-item>
    <certara-tab-item tab="tab-2">Tab 2</certara-tab-item>
    <certara-tab-item tab="tab-3" disabled>Tab 3</certara-tab-item>
    <certara-tab-item tab="tab-4">Tab 4</certara-tab-item>
  </certara-tab-list>
  <certara-tab-panel tab="tab-1">Tab 1 Panel</certara-tab-panel>
  <certara-tab-panel tab="tab-2">Tab 2 Panel</certara-tab-panel>
  <certara-tab-panel tab="tab-3">Tab 3 Panel</certara-tab-panel>
  <certara-tab-panel tab="tab-4">Tab 4 Panel</certara-tab-panel>
</certara-tabs>

import { CertaraTabItem, CertaraTabList, CertaraTabPanel, CertaraTabs } from '@certara/certara-ui-react';

<CertaraTabs name="panel-tabs-example" defaultTab="tab-2">
  <CertaraTabList slot="list" variant="panel">
    <CertaraTabItem tab="tab-1">Tab 1</CertaraTabItem>
    <CertaraTabItem tab="tab-2">Tab 2</CertaraTabItem>
    <CertaraTabItem tab="tab-3" disabled>Tab 3</CertaraTabItem>
    <CertaraTabItem tab="tab-4">Tab 4</CertaraTabItem>
  </CertaraTabList>
  <CertaraTabPanel tab="tab-1">Tab 1 Panel</CertaraTabPanel>
  <CertaraTabPanel tab="tab-2">Tab 2 Panel</CertaraTabPanel>
  <CertaraTabPanel tab="tab-3">Tab 3 Panel</CertaraTabPanel>
  <CertaraTabPanel tab="tab-4">Tab 4 Panel</CertaraTabPanel>
</CertaraTabs>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-tabs name="panel-tabs-example" default-tab="tab-2">
  <certara-tab-list slot="list" variant="panel">
    <certara-tab-item tab="tab-1">Tab 1</certara-tab-item>
    <certara-tab-item tab="tab-2">Tab 2</certara-tab-item>
    <certara-tab-item tab="tab-3" disabled>Tab 3</certara-tab-item>
    <certara-tab-item tab="tab-4">Tab 4</certara-tab-item>
  </certara-tab-list>
  <certara-tab-panel tab="tab-1">Tab 1 Panel</certara-tab-panel>
  <certara-tab-panel tab="tab-2">Tab 2 Panel</certara-tab-panel>
  <certara-tab-panel tab="tab-3">Tab 3 Panel</certara-tab-panel>
  <certara-tab-panel tab="tab-4">Tab 4 Panel</certara-tab-panel>
</certara-tabs>

Tab 1

Tab 2

Tab 3

Tab 4

Tab 1 Panel

Tab 2 Panel

Tab 3 Panel

Tab 4 Panel

<certara-tabs name="buttons-tabs-example" default-tab="tab-4">
  <certara-tab-list slot="list" variant="buttons">
    <certara-tab-item tab="tab-1">Tab 1</certara-tab-item>
    <certara-tab-item tab="tab-2">Tab 2</certara-tab-item>
    <certara-tab-item tab="tab-3" disabled>Tab 3</certara-tab-item>
    <certara-tab-item tab="tab-4">Tab 4</certara-tab-item>
  </certara-tab-list>
  <certara-tab-panel tab="tab-1">Tab 1 Panel</certara-tab-panel>
  <certara-tab-panel tab="tab-2">Tab 2 Panel</certara-tab-panel>
  <certara-tab-panel tab="tab-3">Tab 3 Panel</certara-tab-panel>
  <certara-tab-panel tab="tab-4">Tab 4 Panel</certara-tab-panel>
</certara-tabs>

import { CertaraTabItem, CertaraTabList, CertaraTabPanel, CertaraTabs } from '@certara/certara-ui-react';

<CertaraTabs name="buttons-tabs-example" defaultTab="tab-4">
  <CertaraTabList slot="list" variant="buttons">
    <CertaraTabItem tab="tab-1">Tab 1</CertaraTabItem>
    <CertaraTabItem tab="tab-2">Tab 2</CertaraTabItem>
    <CertaraTabItem tab="tab-3" disabled>Tab 3</CertaraTabItem>
    <CertaraTabItem tab="tab-4">Tab 4</CertaraTabItem>
  </CertaraTabList>
  <CertaraTabPanel tab="tab-1">Tab 1 Panel</CertaraTabPanel>
  <CertaraTabPanel tab="tab-2">Tab 2 Panel</CertaraTabPanel>
  <CertaraTabPanel tab="tab-3">Tab 3 Panel</CertaraTabPanel>
  <CertaraTabPanel tab="tab-4">Tab 4 Panel</CertaraTabPanel>
</CertaraTabs>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-tabs name="buttons-tabs-example" default-tab="tab-4">
  <certara-tab-list slot="list" variant="buttons">
    <certara-tab-item tab="tab-1">Tab 1</certara-tab-item>
    <certara-tab-item tab="tab-2">Tab 2</certara-tab-item>
    <certara-tab-item tab="tab-3" disabled>Tab 3</certara-tab-item>
    <certara-tab-item tab="tab-4">Tab 4</certara-tab-item>
  </certara-tab-list>
  <certara-tab-panel tab="tab-1">Tab 1 Panel</certara-tab-panel>
  <certara-tab-panel tab="tab-2">Tab 2 Panel</certara-tab-panel>
  <certara-tab-panel tab="tab-3">Tab 3 Panel</certara-tab-panel>
  <certara-tab-panel tab="tab-4">Tab 4 Panel</certara-tab-panel>
</certara-tabs>

Tab 1

Tab 2

Tab 3

Tab 4

Tab 1 Panel

Tab 2 Panel

Tab 3 Panel

Tab 4 Panel

<certara-tabs name="buttons-tabs-example" default-tab="tab-4">
  <certara-tab-list slot="list" variant="buttons" size="sm">
    <certara-tab-item tab="tab-1">Tab 1</certara-tab-item>
    <certara-tab-item tab="tab-2">Tab 2</certara-tab-item>
    <certara-tab-item tab="tab-3" disabled>Tab 3</certara-tab-item>
    <certara-tab-item tab="tab-4">Tab 4</certara-tab-item>
  </certara-tab-list>
  <certara-tab-panel tab="tab-1">Tab 1 Panel</certara-tab-panel>
  <certara-tab-panel tab="tab-2">Tab 2 Panel</certara-tab-panel>
  <certara-tab-panel tab="tab-3">Tab 3 Panel</certara-tab-panel>
  <certara-tab-panel tab="tab-4">Tab 4 Panel</certara-tab-panel>
</certara-tabs>

import { CertaraTabItem, CertaraTabList, CertaraTabPanel, CertaraTabs } from '@certara/certara-ui-react';

<CertaraTabs name="buttons-tabs-example" defaultTab="tab-4">
  <CertaraTabList slot="list" variant="buttons" size="sm">
    <CertaraTabItem tab="tab-1">Tab 1</CertaraTabItem>
    <CertaraTabItem tab="tab-2">Tab 2</CertaraTabItem>
    <CertaraTabItem tab="tab-3" disabled>Tab 3</CertaraTabItem>
    <CertaraTabItem tab="tab-4">Tab 4</CertaraTabItem>
  </CertaraTabList>
  <CertaraTabPanel tab="tab-1">Tab 1 Panel</CertaraTabPanel>
  <CertaraTabPanel tab="tab-2">Tab 2 Panel</CertaraTabPanel>
  <CertaraTabPanel tab="tab-3">Tab 3 Panel</CertaraTabPanel>
  <CertaraTabPanel tab="tab-4">Tab 4 Panel</CertaraTabPanel>
</CertaraTabs>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-tabs name="buttons-tabs-example" default-tab="tab-4">
  <certara-tab-list slot="list" variant="buttons" size="sm">
    <certara-tab-item tab="tab-1">Tab 1</certara-tab-item>
    <certara-tab-item tab="tab-2">Tab 2</certara-tab-item>
    <certara-tab-item tab="tab-3" disabled>Tab 3</certara-tab-item>
    <certara-tab-item tab="tab-4">Tab 4</certara-tab-item>
  </certara-tab-list>
  <certara-tab-panel tab="tab-1">Tab 1 Panel</certara-tab-panel>
  <certara-tab-panel tab="tab-2">Tab 2 Panel</certara-tab-panel>
  <certara-tab-panel tab="tab-3">Tab 3 Panel</certara-tab-panel>
  <certara-tab-panel tab="tab-4">Tab 4 Panel</certara-tab-panel>
</certara-tabs>

Data

Settings

Styles

Legend

Axis

Tab 1 Panel

Tab 2 Panel

Tab 3 Panel

Tab 4 Panel

Tab 5 Panel

<certara-tabs class="d-flex">
  <certara-tab-list slot="list" variant="buttons-vertical" size="sm">
    <certara-tab-item tab="data-tab">
      <certara-icon name="table" size="20"></certara-icon>
      <span>Data</span>
    </certara-tab-item>
    <certara-tab-item tab="settings-tab">
      <certara-icon name="gear" size="20"></certara-icon>
      <span>Settings</span>
    </certara-tab-item>
    <certara-tab-item tab="style-tab">
      <certara-icon name="palette" size="20"></certara-icon>
      <span>Styles</span>
    </certara-tab-item>
    <certara-tab-item tab="legend-tab">
      <certara-icon name="list" size="20"></certara-icon>
      <span>Legend</span>
    </certara-tab-item>
    <certara-tab-item tab="axis-tab">
      <certara-icon name="chart-line" size="20"></certara-icon>
      <span>Axis</span>
    </certara-tab-item>
  </certara-tab-list>
  <certara-tab-panel tab="data-tab">Tab 1 Panel</certara-tab-panel>
  <certara-tab-panel tab="settings-tab">Tab 2 Panel</certara-tab-panel>
  <certara-tab-panel tab="style-tab">Tab 3 Panel</certara-tab-panel>
  <certara-tab-panel tab="legend-tab">Tab 4 Panel</certara-tab-panel>
  <certara-tab-panel tab="axis-tab">Tab 5 Panel</certara-tab-panel>
</certara-tabs>

import { CertaraIcon, CertaraTabItem, CertaraTabList, CertaraTabPanel, CertaraTabs } from '@certara/certara-ui-react';

<CertaraTabs className="d-flex">
  <CertaraTabList slot="list" variant="buttons-vertical" size="sm">
    <CertaraTabItem tab="data-tab">
      <CertaraIcon name="table" size={20} />
      <span>Data</span>
    </CertaraTabItem>
    <CertaraTabItem tab="settings-tab">
      <CertaraIcon name="gear" size={20} />
      <span>Settings</span>
    </CertaraTabItem>
    <CertaraTabItem tab="style-tab">
      <CertaraIcon name="palette" size={20} />
      <span>Styles</span>
    </CertaraTabItem>
    <CertaraTabItem tab="legend-tab">
      <CertaraIcon name="list" size={20} />
      <span>Legend</span>
    </CertaraTabItem>
    <CertaraTabItem tab="axis-tab">
      <CertaraIcon name="chart-line" size={20} />
      <span>Axis</span>
    </CertaraTabItem>
  </CertaraTabList>
  <CertaraTabPanel tab="data-tab">Tab 1 Panel</CertaraTabPanel>
  <CertaraTabPanel tab="settings-tab">Tab 2 Panel</CertaraTabPanel>
  <CertaraTabPanel tab="style-tab">Tab 3 Panel</CertaraTabPanel>
  <CertaraTabPanel tab="legend-tab">Tab 4 Panel</CertaraTabPanel>
  <CertaraTabPanel tab="axis-tab">Tab 5 Panel</CertaraTabPanel>
</CertaraTabs>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-tabs class="d-flex">
  <certara-tab-list slot="list" variant="buttons-vertical" size="sm">
    <certara-tab-item tab="data-tab">
      <certara-icon name="table" size="20"></certara-icon>
      <span>Data</span>
    </certara-tab-item>
    <certara-tab-item tab="settings-tab">
      <certara-icon name="gear" size="20"></certara-icon>
      <span>Settings</span>
    </certara-tab-item>
    <certara-tab-item tab="style-tab">
      <certara-icon name="palette" size="20"></certara-icon>
      <span>Styles</span>
    </certara-tab-item>
    <certara-tab-item tab="legend-tab">
      <certara-icon name="list" size="20"></certara-icon>
      <span>Legend</span>
    </certara-tab-item>
    <certara-tab-item tab="axis-tab">
      <certara-icon name="chart-line" size="20"></certara-icon>
      <span>Axis</span>
    </certara-tab-item>
  </certara-tab-list>
  <certara-tab-panel tab="data-tab">Tab 1 Panel</certara-tab-panel>
  <certara-tab-panel tab="settings-tab">Tab 2 Panel</certara-tab-panel>
  <certara-tab-panel tab="style-tab">Tab 3 Panel</certara-tab-panel>
  <certara-tab-panel tab="legend-tab">Tab 4 Panel</certara-tab-panel>
  <certara-tab-panel tab="axis-tab">Tab 5 Panel</certara-tab-panel>
</certara-tabs>

certara-tabs

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

Properties

`defaultTab`


Attribute	`default-tab`
Type	`string`
Default	`undefined`
Required	`false`
Description	The tab to default to on first render. If navigation is used, the navigation value will override the defaultTab value.

`name`


Attribute	`name`
Type	`string`
Default	`'tab'`
Required	`false`
Description	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.

`navigation`


Attribute	`navigation`
Type	`"fragment" \| "path" \| "query"`
Default	`undefined`
Required	`false`
Description	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.

`scrollable`


Attribute	`scrollable`
Type	`boolean`
Default	`false`
Required	`false`
Description	When true, the active tab panel will be scrollable within the available space.

Events

Name	Description	Bubbles
`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.	`false`
`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)).	`true`
`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.	`false`
`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.	`false`

Methods

Name	Signature	Description
`getTab`	`(tab: string \| HTMLCertaraTabPanelElement) => Promise<HTMLCertaraTabPanelElement \| undefined>`	Programmatically retrieve a tab panel within the tab set.
`select`	`(tab: string \| HTMLCertaraTabPanelElement) => Promise<boolean>`	Programmatically switch to a different tab.

Slots

Name	Description
	Slot for the tab panels and content. Should use `<certara-tab-panel>` children.
`list`	Slot for the tab list. Should use `<certara-tab-list>`.

certara-tab-list

The wrapping component for the tab items. Handles logic for toggling tabs.

Properties

`size`


Attribute	`size`
Type	`"sm"`
Default	`undefined`
Required	`false`
Description	Size of the tabs. Only works if variant is ‘buttons’

`variant`


Attribute	`variant`
Type	`"buttons" \| "buttons-vertical" \| "default" \| "navs-vertical" \| "panel"`
Default	`'default'`
Required	`false`
Description	The variant toggle for different styles of tabs

Events

Name	Description	Bubbles
`certaraTabChanged`		`true`

Methods

There are no public methods available for this component

Slots

Name	Description
	Slot for the tab items. Should use `<certara-tab-item>` children.

certara-tab-item

Component for the tab items.

Properties

`disabled`


Attribute	`disabled`
Type	`boolean`
Default	`false`
Required	`false`
Description	Booelan value to disable the tab

`errorNotification`


Attribute	`error-notification`
Type	`string`
Default	`undefined`
Required	`false`
Description	Message to display in a red certara-pill within the tab. This typically should be a number to represent the number of errors within a tab. Currently, styles are only supported for vertical-button tab variants.

`href`


Attribute	`href`
Type	`string`
Default	`undefined`
Required	`false`
Description	Use href to provide a link if the tab needs to navigate to a new page

`path`


Attribute	`path`
Type	`string`
Default	`undefined`
Required	`false`
Description	Route path for path-based navigation (e.g. Angular Router). When set with certara-tabs navigation=“path”, clicking this tab emits certaraTabsPathNavigate so the host can navigate (e.g. router.navigateByUrl).

`rel`


Attribute	`rel`
Type	`string`
Default	`undefined`
Required	`false`
Description	rel to be used in tandem with href if necessary

`selected`


Attribute	`selected`
Type	`boolean`
Default	`false`
Required	`false`
Description	Boolean value to represent if the tab is currently selected or not. Used internally and does not need to be set by consumers.

`tab`


Attribute	`tab`
Type	`string`
Default	`undefined`
Required	`false`
Description	The name of the tab, similar to an id. This must match the ‘tab’ attribute in the coresponding certata-tab-panel component and be unique to other tab items.

`target`


Attribute	`target`
Type	`"_blank" \| "_parent" \| "_self" \| "_top" \| "_unfencedTop"`
Default	`undefined`
Required	`false`
Description	target to be used in tandem with href if necessary

Events

Name	Description	Bubbles
`certaraTabItemClick`	Event fired when the tab is clicked	`true`

Methods

There are no public methods available for this component

Slots

Name	Description
	Slot for rendering the content to show in the tab item.

certara-tab-panel

Component to hold the main content for the tab

Properties

`active`


Attribute	`active`
Type	`boolean`
Default	`false`
Required	`false`
Description	Boolean value to represent if the tab panel should be shown. Used internally.

`tab`


Attribute	`tab`
Type	`string`
Default	`undefined`
Required	`true`
Description	The tab name, similar to an id. This should match the ‘tab’ attribute on the panels corresponding `<certara-tab-item>` component and be unique to all other `<certara-tab-panel>` components.

Events

There are no events available for this component

Methods

Name	Signature	Description
`setActive`	`() => Promise<void>`	Programatically set the tab panel to be active

Slots

Name	Description
	Slot to render the content to show in the tab panel