Tab

A <button>: an interactive element in a tab list activated to show associated content

Code

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

<Tab text="sterling-svelte" value="tab-1" />

Members

Property Name	Type	Default	Comment
disabled	boolean	false	When true, the tab is disabled
selected	boolean	false	When true, the tab is selected
text	string \| undefined	undefined	The text of the tab; not used when the default slot is filled
value	string		The value uniquely identifying this tab within the tab list
variant	string	''	Additional class names to apply

Considerations

When the parent TabList is disabled, the Tab is also disabled.
Includes HTMLButtonElement props, event, and methods

Anatomy

<button class="sterling-tab">
  <slot {disabled} {selected} {text} {value} {variant}>
    <div class="text">{text || value}</div>
  </slot>
  <div class="indicator" />
</button>