`<c-tabs>`

Examples

Basic

Vue

React

Angular

TypeScript

<template>
  <div>
    <c-tabs v-model="tab">
      <c-tab value="summary">Summary</c-tab>

      <c-tab value="members">Members</c-tab>

      <c-tab value="settings">Settings</c-tab>

      <c-tab-items slot="items">
        <c-tab-item value="summary">
          <p>Overview of the project and its recent activity.</p>
        </c-tab-item>

        <c-tab-item value="members">
          <p>People with access to this project.</p>
        </c-tab-item>

        <c-tab-item value="settings">
          <p>Project name, description and visibility.</p>
        </c-tab-item>
      </c-tab-items>
    </c-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const tab = ref<'summary' | 'members' | 'settings'>('summary');
</script>

Vertical

Vue

React

Angular

TypeScript

<template>
  <div>
    <c-tabs vertical value="profile">
      <c-tab value="profile">Profile</c-tab>

      <c-tab value="security">Security</c-tab>

      <c-tab value="tokens">API tokens</c-tab>

      <c-tab-items slot="items">
        <c-tab-item value="profile">
          <p>Your name, email and avatar.</p>
        </c-tab-item>

        <c-tab-item value="security">
          <p>Password and two-factor authentication.</p>
        </c-tab-item>

        <c-tab-item value="tokens">
          <p>Personal access tokens for the API.</p>
        </c-tab-item>
      </c-tab-items>
    </c-tabs>
  </div>
</template>

Basic · c-tab

Vue

React

Angular

TypeScript

<template>
  <div>
    <c-tabs value="summary">
      <c-tab value="summary">Summary</c-tab>

      <c-tab value="members">Members</c-tab>

      <c-tab value="settings" disabled>Settings</c-tab>

      <c-tab-items slot="items">
        <c-tab-item value="summary">
          <p>Overview of the project and its recent activity.</p>
        </c-tab-item>

        <c-tab-item value="members">
          <p>People with access to this project.</p>
        </c-tab-item>

        <c-tab-item value="settings">
          <p>Project name, description and visibility.</p>
        </c-tab-item>
      </c-tab-items>
    </c-tabs>
  </div>
</template>

Basic · c-tab-items

Vue

React

Angular

TypeScript

<template>
  <div>
    <c-tabs value="summary">
      <c-tab value="summary">Summary</c-tab>

      <c-tab value="members">Members</c-tab>

      <c-tab value="settings">Settings</c-tab>

      <c-tab-items slot="items">
        <c-tab-item value="summary">
          <p>Overview of the project and its recent activity.</p>
        </c-tab-item>

        <c-tab-item value="members">
          <p>People with access to this project.</p>
        </c-tab-item>

        <c-tab-item value="settings">
          <p>Project name, description and visibility.</p>
        </c-tab-item>
      </c-tab-items>
    </c-tabs>
  </div>
</template>

Basic · c-tab-buttons

Vue

React

Angular

TypeScript

<template>
  <c-tabs v-model="tab">
    <c-tab-buttons>
      <c-button value="overview">Overview</c-button>

      <c-button value="members">Members</c-button>

      <c-button value="settings">Settings</c-button>
    </c-tab-buttons>

    <c-tab-items slot="items">
      <c-tab-item value="overview">
        <p>Overview of the project and its recent activity.</p>
      </c-tab-item>

      <c-tab-item value="members">
        <p>People with access to this project.</p>
      </c-tab-item>

      <c-tab-item value="settings">
        <p>Project name, description and visibility.</p>
      </c-tab-item>
    </c-tab-items>
  </c-tabs>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const tab = ref<'overview' | 'members' | 'settings'>('overview');
</script>

API reference

`<c-tabs>`

Properties

Property	Attribute	Type	Default	Description
`borderless`	`borderless`	`boolean`	`false`	Disable the bottom border
`disableAnimation`	`disable-animation`	`boolean`	`false`	Disable animation
`justify`	`justify`	`CTabsJustify`	`'stretch'`	Justification of the children
`mobileBreakpoint`	`mobile-breakpoint`	`number`	`640`	Mobile breakpoint in pixels - affects the content stacking with the vertical tabs
`value`	`value`	`number \| string`	`0`	Currently active tab
`vertical`	`vertical`	`boolean`	`false`	Vertical tabs

Events

Event	Detail	Description
`changeValue`	`number \| string`	Fired when the user activates a tab (click, or Enter/Space on a focused tab), carrying the newly selected tab value. Legacy value-change event. Also dispatched as `change-value` — bind that name in Vue templates.
`input`	`void`	Native bubbling input event dispatched for plain `v-model` support; carries no detail.
`update:value`	`number \| string`	Fired alongside `changeValue` with the newly selected tab value; fulfills the `v-model`/`v-control` contract.

Slots

Slot	Description
`default`	Default slot
`items`	The c-tab-items container holding the tab content panels

CSS parts

Style from outside with c-tabs::part(name) — parts are the library's only styling customization API.

Part	Description
`container`	The header row wrapping the tab list and the overflow scroll buttons
`tabs`	The clipping viewport the tab list scrolls inside
`content`	Wrapper around the slotted tab content panels

Types

Importable from the package root: import type { … } from '@cscfi/csc-ui'

`CTabsJustify`

Justification of the tab headers along the tab row. `stretch` grows the tabs to fill the full row width.

export type CTabsJustify = 'center' | 'end' | 'start' | 'stretch';

`CTabsProps`

export interface CTabsProps {
  /**
   * Disable the bottom border
   *
   * @seeded from csc-ui — verify
   */
  borderless?: boolean;
  /**
   * Disable animation
   *
   * @seeded from csc-ui — verify
   */
  disableAnimation?: boolean;
  /**
   * Justification of the children
   *
   * @seeded from csc-ui — verify
   */
  justify?: CTabsJustify;
  /**
   * Mobile breakpoint in pixels
   * - affects the content stacking with the vertical tabs
   *
   * @seeded from csc-ui — verify
   */
  mobileBreakpoint?: number;
  /**
   * Currently active tab
   *
   * @seeded from csc-ui — verify
   */
  value?: number | string;
  /**
   * Vertical tabs
   *
   * @seeded from csc-ui — verify
   */
  vertical?: boolean;
}

`<c-tab>`

Properties

Property	Attribute	Type	Default	Description
`active`	`active`	`boolean`	`false`	Mark tab as active
`disabled`	`disabled`	`boolean`	`false`	Mark tab as disabled
`hostId`	`host-id`	`string`	`''`	Id of the tab
`position`	`position`	`number`	—	Position in the set
`setsize`	`setsize`	`number`	—	Size of the set
`value`	`value`	`number \| string`	—	Value for the tab - for use in c-tabs

Events

Event	Detail	Description
`tabChange`	`{ element: HTMLElement \| null; value: number \| string \| undefined; }`	Fired when the tab is activated (click, or Space/Enter), carrying the tab element and its value; the parent `<c-tabs>` listens for it to switch the active tab. Also dispatched as `tab-change` — bind that name in Vue templates.
`tabFocus`	`number \| string \| undefined`	Fired when the tab receives focus, so the parent `<c-tabs>` can drive arrow-key navigation. Also dispatched as `tab-focus` — bind that name in Vue templates.

Slots

Slot	Description
`default`	Default slot

CSS parts

Style from outside with c-tab::part(name) — parts are the library's only styling customization API.

Part	Description
`root`	The tab's inner content box centering the slotted label

`<c-tab-items>`

Properties

Property	Attribute	Type	Default	Description
`disableAnimation`	`disable-animation`	`boolean`	`false`	Disable animation
`value`	`value`	`number \| string`	`0`	Currently active tab

Slots

Slot	Description
`default`	Default slot

CSS parts

Style from outside with c-tab-items::part(name) — parts are the library's only styling customization API.

Part	Description
`root`	The sliding track that lays out the c-tab-item panels

`<c-tab-item>`

Properties

Property	Attribute	Type	Default	Description
`active`	`active`	`boolean`	`false`	Active
`value`	`value`	`number \| string`	`0`	Tab value

Events

Event	Detail	Description
`contentChange`	`void`	Fired whenever the panel's content is resized, so the parent `<c-tab-items>` can re-measure and keep the slide position correct. Also dispatched as `content-change` — bind that name in Vue templates.

Slots

Slot	Description
`default`	Default slot

CSS parts

Style from outside with c-tab-item::part(name) — parts are the library's only styling customization API.

Part	Description
`root`	The panel's padded content wrapper

`<c-tab-buttons>`

Tab buttons present a `c-tabs` tab list as a segmented control instead of the underlined tab row. Author it only inside `<c-tabs>`, with plain `<c-button>` children whose `value`s match the `c-tab-item` panels; `c-tabs` owns the active value and pushes it down.

Properties

Property	Attribute	Type	Default	Description
`disabled`	`disabled`	`boolean`	`false`	Disable the whole tab strip — every slotted c-button is disabled and the selection can no longer be changed.
`size`	`size`	`CTabButtonsSize`	`'default'`	Size of the buttons
`value`	`value`	`number \| string`	`0`	Value of the active tab — pushed down by the parent c-tabs.

Events

Event	Detail	Description
`tabChange`	`{ element: HTMLElement \| null; value: number \| string; }`	Fired when the user activates a tab button, carrying the newly selected value. The parent `<c-tabs>` listens for it and pushes the accepted value back down; consumers should listen to `c-tabs` instead. Also dispatched as `tab-change` — bind that name in Vue templates.

Slots

Slot	Description
`default`	Default slot for the c-button elements

CSS parts

Style from outside with c-tab-buttons::part(name) — parts are the library's only styling customization API.

Part	Description
`root`	The segmented-control box framing the buttons
`indicator`	The sliding fill highlighting the active tab

Types

Importable from the package root: import type { … } from '@cscfi/csc-ui'

`CTabButtonsProps`

export interface CTabButtonsProps {
  /** Disable the whole tab strip — every slotted c-button is disabled and the selection can no longer be changed. */
  disabled?: boolean;
  /**
   * Size of the buttons
   *
   * @seeded from csc-ui — verify
   */
  size?: CTabButtonsSize;
  /**
   * Value of the active tab — pushed down by the parent c-tabs.
   *
   * @seeded from csc-ui — verify
   */
  value?: number | string;
}

`CTabButtonsSize`

Size of the tab strip. `small` renders a more compact control; the size is also propagated to every slotted `<c-button>`. Omitting the attribute renders the default size.

export type CTabButtonsSize = 'default' | 'small';