UI components · Navigation

Tabs

A tablist of native buttons, with tab panels. Group: Navigation · component 9 of 17, new in silverpoint 0.3.

size="lg"

mode="precision"

substrate="green"

States

The 2 reference states silverpoint declares for Tabs, live on both grounds, with their code. As in upstream's documentation the examples are uncontrolled: the state's value is the default value. Pick a framework once and every example on the site follows it.

`first`

silverpoint · cream

cyanotype · prussian

tsx

import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import '@silverpoint/grounds/ui.css';
import { SpTabPanel, SpTabs } from '@silverpoint/react/ui/tabs';

<SpTabs
  label="Views"
  items={[{ key: 'overview', label: 'Overview' }, { key: 'traffic', label: 'Traffic' }, { key: 'errors', label: 'Errors' }, { key: 'settings', label: 'Settings' }]}
  defaultValue="overview"
>
  <SpTabPanel value="overview">Overview: the charts of this view.</SpTabPanel>
  <SpTabPanel value="traffic">Traffic: the charts of this view.</SpTabPanel>
  <SpTabPanel value="errors">Errors: the charts of this view.</SpTabPanel>
  <SpTabPanel value="settings">Settings: the charts of this view.</SpTabPanel>
</SpTabs>

vue

<script setup lang="ts">
import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import '@silverpoint/grounds/ui.css';
import { SpTabPanel, SpTabs } from '@silverpoint/vue/ui/tabs';
</script>

<template>
  <SpTabs
    label="Views"
    :items="[{ key: 'overview', label: 'Overview' }, { key: 'traffic', label: 'Traffic' }, { key: 'errors', label: 'Errors' }, { key: 'settings', label: 'Settings' }]"
    default-value="overview"
  >
    <SpTabPanel value="overview">Overview: the charts of this view.</SpTabPanel>
    <SpTabPanel value="traffic">Traffic: the charts of this view.</SpTabPanel>
    <SpTabPanel value="errors">Errors: the charts of this view.</SpTabPanel>
    <SpTabPanel value="settings">Settings: the charts of this view.</SpTabPanel>
  </SpTabs>
</template>

// src/styles.css:
//   @import '@silverpoint/fonts/fonts.css';
//   @import '@silverpoint/grounds/styles.css';
//   @import '@silverpoint/grounds/ui.css';

import { Component } from '@angular/core';
import { SpTabPanel, SpTabs } from '@silverpoint/angular/ui/tabs';

@Component({
  selector: 'app-root',
  imports: [SpTabPanel, SpTabs],
  template: `
    <sp-tabs
      label="Views"
      [items]="[{ key: 'overview', label: 'Overview' }, { key: 'traffic', label: 'Traffic' }, { key: 'errors', label: 'Errors' }, { key: 'settings', label: 'Settings' }]"
      defaultValue="overview"
    >
      <sp-tab-panel value="overview">Overview: the charts of this view.</sp-tab-panel>
      <sp-tab-panel value="traffic">Traffic: the charts of this view.</sp-tab-panel>
      <sp-tab-panel value="errors">Errors: the charts of this view.</sp-tab-panel>
      <sp-tab-panel value="settings">Settings: the charts of this view.</sp-tab-panel>
    </sp-tabs>
  `,
})
export class App {}

python

from reflex_silverpoint_react import sp_tab_panel, sp_tabs, ui_item

sp_tabs(
    sp_tab_panel("Overview: the charts of this view.", value="overview"),
    sp_tab_panel("Traffic: the charts of this view.", value="traffic"),
    sp_tab_panel("Errors: the charts of this view.", value="errors"),
    sp_tab_panel("Settings: the charts of this view.", value="settings"),
    label="Views",
    items=[
        ui_item("overview", "Overview"),
        ui_item("traffic", "Traffic"),
        ui_item("errors", "Errors"),
        ui_item("settings", "Settings"),
    ],
    default_value="overview",
)

`disabled-tab`

silverpoint · cream

cyanotype · prussian

tsx

import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import '@silverpoint/grounds/ui.css';
import { SpTabPanel, SpTabs } from '@silverpoint/react/ui/tabs';

<SpTabs
  label="Views"
  items={[{ key: 'overview', label: 'Overview' }, { key: 'traffic', label: 'Traffic' }, { key: 'errors', label: 'Errors' }, { key: 'settings', label: 'Settings', disabled: true }]}
  defaultValue="traffic"
>
  <SpTabPanel value="overview">Overview: the charts of this view.</SpTabPanel>
  <SpTabPanel value="traffic">Traffic: the charts of this view.</SpTabPanel>
  <SpTabPanel value="errors">Errors: the charts of this view.</SpTabPanel>
  <SpTabPanel value="settings">Settings: the charts of this view.</SpTabPanel>
</SpTabs>

vue

<script setup lang="ts">
import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import '@silverpoint/grounds/ui.css';
import { SpTabPanel, SpTabs } from '@silverpoint/vue/ui/tabs';
</script>

<template>
  <SpTabs
    label="Views"
    :items="[{ key: 'overview', label: 'Overview' }, { key: 'traffic', label: 'Traffic' }, { key: 'errors', label: 'Errors' }, { key: 'settings', label: 'Settings', disabled: true }]"
    default-value="traffic"
  >
    <SpTabPanel value="overview">Overview: the charts of this view.</SpTabPanel>
    <SpTabPanel value="traffic">Traffic: the charts of this view.</SpTabPanel>
    <SpTabPanel value="errors">Errors: the charts of this view.</SpTabPanel>
    <SpTabPanel value="settings">Settings: the charts of this view.</SpTabPanel>
  </SpTabs>
</template>

// src/styles.css:
//   @import '@silverpoint/fonts/fonts.css';
//   @import '@silverpoint/grounds/styles.css';
//   @import '@silverpoint/grounds/ui.css';

import { Component } from '@angular/core';
import { SpTabPanel, SpTabs } from '@silverpoint/angular/ui/tabs';

@Component({
  selector: 'app-root',
  imports: [SpTabPanel, SpTabs],
  template: `
    <sp-tabs
      label="Views"
      [items]="[{ key: 'overview', label: 'Overview' }, { key: 'traffic', label: 'Traffic' }, { key: 'errors', label: 'Errors' }, { key: 'settings', label: 'Settings', disabled: true }]"
      defaultValue="traffic"
    >
      <sp-tab-panel value="overview">Overview: the charts of this view.</sp-tab-panel>
      <sp-tab-panel value="traffic">Traffic: the charts of this view.</sp-tab-panel>
      <sp-tab-panel value="errors">Errors: the charts of this view.</sp-tab-panel>
      <sp-tab-panel value="settings">Settings: the charts of this view.</sp-tab-panel>
    </sp-tabs>
  `,
})
export class App {}

python

from reflex_silverpoint_react import sp_tab_panel, sp_tabs, ui_item

sp_tabs(
    sp_tab_panel("Overview: the charts of this view.", value="overview"),
    sp_tab_panel("Traffic: the charts of this view.", value="traffic"),
    sp_tab_panel("Errors: the charts of this view.", value="errors"),
    sp_tab_panel("Settings: the charts of this view.", value="settings"),
    label="Views",
    items=[
        ui_item("overview", "Overview"),
        ui_item("traffic", "Traffic"),
        ui_item("errors", "Errors"),
        ui_item("settings", "Settings", disabled=True),
    ],
    default_value="traffic",
)

Import

Each component has its own subpath under ui/, and every adapter exports them all from ui. Import @silverpoint/grounds/ui.css once, beside styles.css; Reflex adds it for you.

Framework	Import
React	`import { SpTabs } from '@silverpoint/react/ui/tabs';`
Vue	`import { SpTabs } from '@silverpoint/vue/ui/tabs';`
Angular	`import { SpTabs } from '@silverpoint/angular/ui/tabs'; // <sp-tabs>`
Reflex	`from reflex_silverpoint_react import sp_tabs`

Binding the value

Controlled or uncontrolled, the way each framework does it. The change event carries the new value itself (a string, a bool or a number), never a DOM event.

Framework	Controlled	Uncontrolled
React	`value / onChange`	`defaultValue`
Vue	`v-model="x"`	`default-value`
Angular	`[(value)]="x", ngModel, formControl`	`[defaultValue]`
Reflex	`value=State.x, on_change=State.set_x`	`default_value=…`

Props

The props Tabs adds to the ones every UI component takes.

React / Angular	Vue	Reflex	Type	Description
`items`	`items`	`items`	`list[dict[str, Any]]`	The tabs, [{key, label, disabled?}]; a disabled one is skipped by the arrows.
`label`	`label`	`label`	`str`	Accessible name of the tab list.
`orientation`	`orientation`	`orientation`	`Literal['horizontal', 'vertical']`	horizontal (default) or vertical.
`activation`	`activation`	`activation`	`Literal['automatic', 'manual']`	automatic (default): a tab is selected as focus reaches it; manual: on Enter or Space.
`value`	`value`	`value`	`str`	Controlled key; an unknown one shows the first enabled tab.
`defaultValue`	`default-value`	`default_value`	`str`	Initial key of uncontrolled tabs.
`onChange`	`on-change`	`on_change`	`event`	The key selected (a string).

Common props

Every UI component also takes these. Like a chart's, they fall back to the dashboard the component sits in, then to the provider. Read more about the UI components.

React / Angular	Vue	Reflex	Type	Description
`id`	`id`	`id`	`str`	The frame variant and every related id derive from it.
`ground`	`ground`	`ground`	`Literal['silverpoint', 'cyanotype'] \| str \| dict[str, Any]`	Style ground: "silverpoint" or "cyanotype", or a ground object. Defaults to the dashboard's, then the provider's, or silverpoint.
`substrate`	`substrate`	`substrate`	`Literal['cream', 'green', 'blue', 'ochre', 'prussian']`	Prepared substrate within the ground.
`mode`	`mode`	`mode`	`Literal['ink', 'precision']`	ink by default; precision disables inking.
`seed`	`seed`	`seed`	`str \| int`	Seed of the frame's hand; overrides id for the frame variant only.
`size`	`size`	`size`	`Literal['sm', 'md', 'lg']`	Control size: sm, md (default) or lg.
`palette`	`palette`	`palette`	`dict[str, str]`	Colours over the ground's (set with palette=), merged over the dashboard's and the provider's.
`className`	`class-name`	`class_name`	`str`	Added to the component's root element, after its own classes.

Report it

Found something wrong with SpTabs? Open an issue on GitHub — the form comes pre-filled with the component and the version.