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 Name	Type	Bindable	Default	Comment
disabled	boolean \| null \| undefined	no	false	When true, the tab list and its tabs are disabled.
selectedValue	string \| undefined	no	undefined	The value of the currently selected tab.
vertical	boolean \| null \| undefined	no	false	When true, the tab list is displayed vertically.
onSelect	(value: string) => void	no	undefined	Called when the selectedValue changes.

	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, events, and methods.

Anatomy

<div class="sterling-tab-list">
  {@render children()}
</div>