Tabs

Show design guidelines

Code

Framework

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>

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>

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>

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>

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>

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" \| "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. The tab specified in the URL will also be shown on initial load.

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

`rel`


Attribute	`rel`
Type	`string`
Default	`undefined`
Required	`false`
Description	rel to be used intandem 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