Tab

RC 0.8Kb +0.6 multi

import 'pyro/tab'
import 'pyro/tab-group'

Preview Code Stackblitz

one two three

Usage

<pyro-tab-group id="tabGroup">
  <pyro-tab>one</pyro-tab>
  <pyro-tab>two</pyro-tab>
  <pyro-tab>three</pyro-tab>
</pyro-tab-group>

Variations

Props

interface TabProps {
  /** Exposed by pyro-tab-group as value in click event handler */
  value?: string | number;
  /** Label of tab */
  label?: string;
  /** Selected */
  selected?: boolean;
  /** The id of the panel the this tab shows */
  'aria-controls'?: string;
  /** Tab clicked */
  onClick?: (e: Event) => void;
  /** Slot for label */
  children?: any;
}
interface TabGroupProps {
  /** The tabs fill all available space */
  fill?: boolean;
  /** Contains value of clicked tab  */
  onClick?: (e: TargetValueEvent) => void;
  /** Slot for tabs */
  children?: any;
}

Slots

/**
 * Tab
 * @slot - Label, overrides the label prop
 * 
 * Tab group
 * @slot - `pyro-tab`s or elements containing `pyro-tab`s
 */

CSS prop theming

The

Full theming sheet

/**
 * Tab
 * @prop {--pyro-tab-padding = --pyro-spacing} - `padding`
 * @prop {--pyro-tab-text-color = --pyro-text-color} - `color`
 * @prop {--pyro-tab-background = transparent} - `background`
 * @prop {--pyro-tab-border = --pyro-border} - `border`
 * @prop {--pyro-tab-selected-border = --pyro-border} - `border`
 * @prop {--pyro-tab-selected-border-width = calc(2 * var(--pyro-border-width)} - `border-width`
 * @prop {--pyro-tab-selected-border-color = --pyro-accent-color} - `border-color`
 * @prop {--pyro-tab-gap = 0} - gap between tabs
 * 
 * Tab group
 * @prop {--pyro-tab-group-gap = 0} - gap between tabs
 * @prop {--pyro-tab-group-justify-content = flex-start} - justify tabs with flexbox `justify-content`
 */