Tabs

Show design guidelines

Code

Framework HTML React Angular

Default

Tab 1 Tab 2 Tab 3 Tab 4 Tab 1 Panel Tab 2 Panel Tab 3 Panel Tab 4 Panel

Toggle dark mode

  <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>

Panel

Tab 1 Tab 2 Tab 3 Tab 4 Tab 1 Panel Tab 2 Panel Tab 3 Panel Tab 4 Panel

Toggle dark mode

  <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>

Buttons

Tab 1 Tab 2 Tab 3 Tab 4 Tab 1 Panel Tab 2 Panel Tab 3 Panel Tab 4 Panel

Toggle dark mode

  <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>

Buttons small

Tab 1 Tab 2 Tab 3 Tab 4 Tab 1 Panel Tab 2 Panel Tab 3 Panel Tab 4 Panel

Toggle dark mode

  <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>

Vertical

Data Settings Styles Legend Axis Tab 1 Panel Tab 2 Panel Tab 3 Panel Tab 4 Panel Tab 5 Panel

Toggle dark mode

  <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
list	Slot for the tab list

certara-tab-list

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

Properties

selectedTab

Attribute	selected-tab
Type	string
Default	undefined
Required	false
Description	The current selected tab within the tab list. This is used internally and doesn’t need to be set.

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" | "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

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