Components

Tabs

The Tabs component is used to display a group of tab panels, each with their own content.

Usage

The Tabs component is comprised of two components:

  • TabGroup - a wrapper for grouping related tabs.
  • TabPanel - a tab container that contains a header (the trigger element) and content (code, or any other content, including block components).

Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

::tab-group
  ::tab-panel
  #default
  Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

    ::button
    This tab has a button
    ::

  #header
  Tab 1
  ::

  ::tab-panel
  #default
  [And this one has a link!](/components/tabs).

  At rutrum cursus suscipit est elit magna pretium accumsan. Non mauris mus massa id habitasse. Phasellus eros eu efficitur vel morbi quisque habitasse. Cursus eu magnis inceptos; lectus fusce mattis sodales auctor. Himenaeos elit sociosqu adipiscing urna nec.

  #header
  Tab 2
  ::
::

TabGroup

Props

dividerBorder

The border between the tab headers and tab content.

  • Type: string | null
  • Default: 1px solid #e0e4ea

Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

::tab-group
---
divider-border: "1px solid #000"
---
  ::tab-panel
  #default
  Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

  #header
  Tab 1
  ::

  ::tab-panel
  #default
  At rutrum cursus suscipit est elit magna pretium accumsan. Non mauris mus massa id habitasse. Phasellus eros eu efficitur vel morbi quisque habitasse. Cursus eu magnis inceptos; lectus fusce mattis sodales auctor. Himenaeos elit sociosqu adipiscing urna nec.

  #header
  Tab 2
  ::
::
TabGroup Component Props

The border which divides tab header and content. Accepts string | null.

orientation

The value to determine the orientation of the tab headers.

  • Type: 'vertical' | 'horizontal'
  • Default: horizontal

Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

::tab-group
---
orientation: "vertical"
---
  ::tab-panel
  #default
  Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

  #header
  Tab 1
  ::

  ::tab-panel
  #default
  Elit labore laboris aute dolore consequat minim ullamco. Nulla officia voluptate ea sunt consectetur esse fugiat id minim nulla aliqua. Ipsum irure exercitation deserunt culpa reprehenderit. Elit adipisicing labore qui enim est aliquip sit non adipisicing sunt ullamco non cillum.
  ::
::
TabGroup Component Props

The value to determine the direction of the tab headers. Accepts 'vertical' | 'horizontal'. Default is 'horizontal'.

headerProps

You can configure common properties for all child Tab Panel headers from the parent Tab Group component by passing the desired settings via the group's headerProps.

Each headerProps child property will be bound to all tab headers in the current group.

Should you desire to customize an individual Tab Panel, you can provide these same options directly to the individual Tab Panel component as top-level props.

  • Type: TabHeaderSharedProps
  • Default: 
    {
  color: '#6c7489',
  padding: '12px',
  margin: '0',
  border: 'none',
  borderRadius: 'initial',
  background: 'initial',
  fontSize: '14px',
  fontWeight: '600',
  lineHeight: '24px',
  activeColor: '#000933',
  activeBackground: 'initial',
  activeBorder: '2px solid #0044f4',
  activeFontWeight: '700',
  disabledColor: '#afb7c5',
  disabledBackground: 'initial',
}

Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

::tab-group
---
header-props:
  color: "#000"
  padding: "8px"
  margin: "0 0 8px"
  border: "1px solid #5b615d"
  border-radius: "4px"
  background: "#eee"
  font-size: "14px"
  font-weight: 400
  line-height: "16px"
  active-color: "#ffffff"
  active-border: "1px solid #5b615d"
  active-background: "#007ac1"
  active-font-weight: 600
  disabled-color: "#afb7c5"
  disabled-background: "#f9fafb"
---
  ::tab-panel
  #default
  Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

  #header
  Tab 1
  ::

  ::tab-panel
  #default
  At rutrum cursus suscipit est elit magna pretium accumsan. Non mauris mus massa id habitasse. Phasellus eros eu efficitur vel morbi quisque habitasse. Cursus eu magnis inceptos; lectus fusce mattis sodales auctor. Himenaeos elit sociosqu adipiscing urna nec.

  #header
  Tab 2
  ::
::
TabGroup Component Props
Options to bind to all tab headers in the current tab group.

The border of the element. Accepts string | null.

The border radius of the element. Accepts string | null.

The margin of the component. Accepts string | null.

The text color of the element. Accepts string.

The padding of the component. Accepts string | null.

The background of the component. Accepts string.

Tab header font size.

Tab header font weight.

Tab header line height.

Tab header text color when panel is active.

Tab header background when panel is active.

Tab header font weight when panel is active.

Tab header border when panel is active. Applies to the border-bottom (if orientation is horizontal) or border-right (if orientation is vertical)

Tab header text color when panel is disabled.

Tab header background when panel is disabled.

panelProps

Options to style all tab panels tab group.

  • Type: Object

PanelProps include the shared props listed below:

  • border - default is none
  • background - default is initial
  • padding - default is 12px

See here for more information on shared props.

Shared Props

The TabGroup component also includes the shared props listed below:

  • border - default is none
  • borderRadius - default is 0
  • margin - default is 0
  • gap - default is 12px
  • width - default is 100%
  • maxWidth - default is 100%
  • styles - default is ''.

See here for more information on shared props.

Slots

default

Use the #default slot to add TabPanel components to display content inside TabGroup.

TabPanel

The Tab Panel provides both the tab header (the header) and the tab content.

The TabPanel must be a used as a direct child of the TabGroup component.

Props

active

A boolean to determine if the Tab Panel is active and content is initially displayed.

The activeColor, activeBackground and activeFontWeight prop values will be applied to the header element if active prop is set to true.

  • Type: boolean
  • Default: false

At rutrum cursus suscipit est elit magna pretium accumsan. Non mauris mus massa id habitasse. Phasellus eros eu efficitur vel morbi quisque habitasse. Cursus eu magnis inceptos; lectus fusce mattis sodales auctor. Himenaeos elit sociosqu adipiscing urna nec.

::tab-group
  ::tab-panel
  #default
  Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

  #header
  Tab 1
  ::

  ::tab-panel
  ---
  active: true
  ---
  #default
  At rutrum cursus suscipit est elit magna pretium accumsan. Non mauris mus massa id habitasse. Phasellus eros eu efficitur vel morbi quisque habitasse. Cursus eu magnis inceptos; lectus fusce mattis sodales auctor. Himenaeos elit sociosqu adipiscing urna nec.

  #header
  Tab 2
  ::
::

code

A boolean to indicate the tab content is only displaying a code block to auto-apply some default styles (tab group border and content background).

  • Type: boolean
  • Default: false
interface Example {
  key: string
}

::tab-group
  ::tab-panel
  ---
  code: true
  ---
  #default
  ​```typescript
  interface Example {
  key: string
  }
  ​```

  #header
  Tab 1
  ::

  ::tab-panel
  #default
  At rutrum cursus suscipit est elit magna pretium accumsan. Non mauris mus massa id habitasse. Phasellus eros eu efficitur vel morbi quisque habitasse. Cursus eu magnis inceptos; lectus fusce mattis sodales auctor. Himenaeos elit sociosqu adipiscing urna nec.

  #header
  Tab 2
  ::
::

disabled

A boolean to determine if the Tab Panel is disabled (meaning the user cannot click to see the tab content).

The disabledColor and disabledBackground prop values will be applied to the header if disabled prop is set to true.

  • Type: boolean
  • Default: false

At rutrum cursus suscipit est elit magna pretium accumsan. Non mauris mus massa id habitasse. Phasellus eros eu efficitur vel morbi quisque habitasse. Cursus eu magnis inceptos; lectus fusce mattis sodales auctor. Himenaeos elit sociosqu adipiscing urna nec.

::tab-group
  ::tab-panel
  ---
  disabled: true
  ---
  #default
  Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

  #header
  Tab 1
  ::

  ::tab-panel
  ---
  active: true
  ---
  #default
  At rutrum cursus suscipit est elit magna pretium accumsan. Non mauris mus massa id habitasse. Phasellus eros eu efficitur vel morbi quisque habitasse. Cursus eu magnis inceptos; lectus fusce mattis sodales auctor. Himenaeos elit sociosqu adipiscing urna nec.

  #header
  Tab 2
  ::
::

Text to display in the header of the Tab Panel. If the header slot is provided, the slot content takes precedence.

  • Type: string
  • Default: ''

Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

::tab-group
  ::tab-panel
  ---
  header: "Tab 1"
  ---
  Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.
  ::

  ::tab-panel
  ---
  header: "Tab 2"
  ---
  At rutrum cursus suscipit est elit magna pretium accumsan. Non mauris mus massa id habitasse. Phasellus eros eu efficitur vel morbi quisque habitasse. Cursus eu magnis inceptos; lectus fusce mattis sodales auctor. Himenaeos elit sociosqu adipiscing urna nec.
  ::
::

href

Optionally provide a URL or absolute path for the tab header to navigate to when clicked.

  • Type: string
  • Default: undefined

This panel shows content available on this page.

Clicking the second tab will change the active tab and navigate to another page.

::tab-group
  ::tab-panel
  ---
  active: true
  ---
  #default
  This panel shows content available on this page.

  Clicking the second tab will change the active tab and navigate to another page.

  #header
  Tab 1
  ::

  ::tab-panel
  ---
  href: "#props-1"
  ---
  #header
  Scroll to props
  ::
::

panelProps

Options to style content area in the current Tab Panel.

PanelProps passed to the Tab Panel will overwrite panelProps passed to the Tab Group component.

  • Type: Object

PanelProps include the shared props listed below:

  • border - default is none
  • background - default is initial
  • padding - default is 12px

See here for more information on shared props.

HeaderProps

Shared Props

HeaderProps include the shared props listed below:

  • color - default is #6c7489
  • padding - default is 12px
  • margin - default is 0
  • border - default is none
  • borderRadius - default is initial
  • background - default is initial

See here for more information on shared props.

fontSize

The font size of the header.

  • Type: string
  • Default: 14px

Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

::tab-group
  ::tab-panel
  ---
  header-props:
    font-size: "16px"
  ---
  #default
  Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

  #header
  Tab 1
  ::

  ::tab-panel
  #default
  At rutrum cursus suscipit est elit magna pretium accumsan. Non mauris mus massa id habitasse. Phasellus eros eu efficitur vel morbi quisque habitasse. Cursus eu magnis inceptos; lectus fusce mattis sodales auctor. Himenaeos elit sociosqu adipiscing urna nec.

  #header
  Tab 2
  ::
::
fontWeight

The font weight of the header.

  • Type: string
  • Default: 600

Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

::tab-group
  ::tab-panel
  #default
  Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

  #header
  Tab 1
  ::

  ::tab-panel
  ---
  header-props:
    font-weight: "400"
  ---
  #default
  At rutrum cursus suscipit est elit magna pretium accumsan. Non mauris mus massa id habitasse. Phasellus eros eu efficitur vel morbi quisque habitasse. Cursus eu magnis inceptos; lectus fusce mattis sodales auctor. Himenaeos elit sociosqu adipiscing urna nec.

  #header
  Tab 2
  ::
::
lineHeight

The line height of the header.

  • Type: string
  • Default: 24px

Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

::tab-group
  ::tab-panel
  #default
  Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

  #header
  Tab 1
  ::

  ::tab-panel
  ---
  header-props:
    line-height: "16px"
  ---
  #default
  At rutrum cursus suscipit est elit magna pretium accumsan. Non mauris mus massa id habitasse. Phasellus eros eu efficitur vel morbi quisque habitasse. Cursus eu magnis inceptos; lectus fusce mattis sodales auctor. Himenaeos elit sociosqu adipiscing urna nec.

  #header
  Tab 2
  ::
::
activeColor

The text color of the header when Tab Panel element is active.

  • Type: string
  • Default: #000933

Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

::tab-group
  ::tab-panel
  ---
  header-props:
    active-color: "green"
  ---
  #default
  Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

  #header
  Tab 1
  ::

  ::tab-panel
  #default
  At rutrum cursus suscipit est elit magna pretium accumsan. Non mauris mus massa id habitasse. Phasellus eros eu efficitur vel morbi quisque habitasse. Cursus eu magnis inceptos; lectus fusce mattis sodales auctor. Himenaeos elit sociosqu adipiscing urna nec.

  #header
  Tab 2
  ::
::
activeBackground

The background of the header when Tab Panel element is active.

  • Type: string
  • Default: initial

Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

::tab-group
  ::tab-panel
  ---
  header-props:
    active-background: "linear-gradient(lightgray, lightblue)"
  ---
  #default
  Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

  #header
  Tab 1
  ::

  ::tab-panel
  #default
  At rutrum cursus suscipit est elit magna pretium accumsan. Non mauris mus massa id habitasse. Phasellus eros eu efficitur vel morbi quisque habitasse. Cursus eu magnis inceptos; lectus fusce mattis sodales auctor. Himenaeos elit sociosqu adipiscing urna nec.

  #header
  Tab 2
  ::
::
activeFontWeight

The font weight of the header when Tab Panel element is active.

  • Type: string | null
  • Default: 700

Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

::tab-group
  ::tab-panel
  ---
  header-props:
    active-font-weight: "700"
  ---
  #default
  Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

  #header
  Tab 1
  ::

  ::tab-panel
  #default
  At rutrum cursus suscipit est elit magna pretium accumsan. Non mauris mus massa id habitasse. Phasellus eros eu efficitur vel morbi quisque habitasse. Cursus eu magnis inceptos; lectus fusce mattis sodales auctor. Himenaeos elit sociosqu adipiscing urna nec.

  #header
  Tab 2
  ::
::
disabledColor

The text color of the header when Tab Panel element is disabled.

  • Type: string
  • Default: #afb7c5

At rutrum cursus suscipit est elit magna pretium accumsan. Non mauris mus massa id habitasse. Phasellus eros eu efficitur vel morbi quisque habitasse. Cursus eu magnis inceptos; lectus fusce mattis sodales auctor. Himenaeos elit sociosqu adipiscing urna nec.

::tab-group
  ::tab-panel
  ---
  disabled: true
  header-props:
    disabled-color: "#acbfb1"
  ---
  #default
  Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

  #header
  Tab 1
  ::

  ::tab-panel
  ---
  active: true
  ---
  #default
  At rutrum cursus suscipit est elit magna pretium accumsan. Non mauris mus massa id habitasse. Phasellus eros eu efficitur vel morbi quisque habitasse. Cursus eu magnis inceptos; lectus fusce mattis sodales auctor. Himenaeos elit sociosqu adipiscing urna nec.

  #header
  Tab 2
  ::
::
disabledBackground

The background color of the header when Tab Panel element is disabled.

  • Type: string
  • Default: initial

At rutrum cursus suscipit est elit magna pretium accumsan. Non mauris mus massa id habitasse. Phasellus eros eu efficitur vel morbi quisque habitasse. Cursus eu magnis inceptos; lectus fusce mattis sodales auctor. Himenaeos elit sociosqu adipiscing urna nec.

::tab-group
  ::tab-panel
  ---
  disabled: true
  header-props:
    disabled-background: "linear-gradient(lightgray, lightblue)"
  ---
  #default
  Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

  #header
  Tab 1
  ::

  ::tab-panel
  ---
  active: true
  ---
  #default
  At rutrum cursus suscipit est elit magna pretium accumsan. Non mauris mus massa id habitasse. Phasellus eros eu efficitur vel morbi quisque habitasse. Cursus eu magnis inceptos; lectus fusce mattis sodales auctor. Himenaeos elit sociosqu adipiscing urna nec.

  #header
  Tab 2
  ::
::

Shared Props

The Tab Panel component also includes the shared props listed below:

  • styles - default is ''.

See here for more information on shared props.

Slots

default

Use the #default slot to add content to display when the Tab Panel is active.

Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

::tab-group
  ::tab-panel
  ---
  header: "Tab 1"
  ---
  Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.
  ::
::

header

Use the #header slot to provide custom content for the tab header (the trigger element) of the Tab Panel.

Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

::tab-group
  ::tab-panel
  #default
  Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

  #header
  Tab 1
  ::
::