sterling-svelte  2.0.0
A modern, accessible, lightweight UI component library for Svelte.

TabList

A list of tabs where a single tab can be selected.

Code
<script lang="ts">
  import { TabList, Tab } from '@geoffcox/sterling-svelte';

  let selectedValue : string;
</script>


<TabList bind:selectedValue>
  <Tab value="First">First</Tab>
  <!-- ... --->
</TabList>

Members

Property NameTypeDefaultComment
disabledboolean | null | undefinedfalseWhen true, the tab list and its tabs are disabled.
selectedValuestring | undefinedundefinedThe value of the currently selected tab.
verticalboolean | null | undefinedfalseWhen true, the tab list is displayed vertically.
onSelect(value: string) => voidundefinedCalled when the selectedValue changes.

Method NameParametersReturn TypeComment
selectFirstTabSelects the first tab.
selectPreviousTabSelects the previous tab.
selectNextTabSelects the next tab.
selectLastTabSelects the last tab.

Considerations

  • Includes HTMLDivElement props, events, and methods.

Anatomy

tab list (<div>)
  children (Snippet)