TabList

A list of <Tabs> where one 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>
  <Tab value="Second">Second</Tab>
  <Tab value="Third">Third</Tab>
  <Tab value="Fourth">Fourth</Tab>
</TabList>

Members

Property Name	Type	Default	Comment
disabled	boolean	false	When true, the tab list and its tabs are disabled
selectedValue	string \| undefined	undefined	The value of the currently selected tab
vertical	boolean	false	When true, the tab list is displayed vertically
variant	string	''	Additional class names to apply

	Event Name	Data	Comment
	select	value	Raised when a tab is selected

	Method Name	Parameters	Return Type	Comment
	selectFirstTab			Selects the first tab.
	selectPreviousTab			Selects the previous tab.
	selectNextTab			Selects the next tab.
	selectLastTab			Selects the last tab.

Considerations

Includes HTMLDivElement props, event, and methods

Anatomy

<div class="sterling-tab-list">
  <!-- children -->
  <slot {disabled} {selectedValue} {variant} {vertical} />
</div>