Tabs

Swap one box of content for another using a horizontal menu

Tabs are great for consolidating lengthy or otherwise complex content in a compact space.

Pocky’s tabs are flexible to use, and only require a simple naming convention:

  1. Place your tab buttons in a tab-[number] slot.
  2. Place its associated panel in its matching tabpanel-[number] slot using the same number.
	
selected: tab-1

Water types

  • Blastoise
  • Starmie
  • Quaxly
PropTypeDescription
bind:selectedstringSet initial tab / bind updates to state
<script lang="ts">
import Tabs from '../components/tabs.svelte';

let selected = 'tab-1';
</script>

<pre>
  <code>
selected: {selected}
  </code>
</pre>

<Tabs bind:selected>
  <span slot="tab-0">Fire</span>
  <span slot="tab-1">Water</span>
  <span slot="tab-2">Ghost</span>

  <div slot="tabpanel-0">
    <h1>Fire types</h1>
    <ul>
      <li>Charmander</li>
      <li>Magmar</li>
      <li>Darumaka</li>
    </ul>
  </div>

  <div slot="tabpanel-1">
    <h1>Water types</h1>
    <ul>
      <li>Blastoise</li>
      <li>Starmie</li>
      <li>Quaxly</li>
    </ul>
  </div>

  <div slot="tabpanel-2">
    <h1>Ghost types</h1>
    <ul>
      <li>Haunter</li>
      <li>Gengar</li>
      <li>Duskull</li>
    </ul>
  </div>
</Tabs>