Tabs

Tabs can be used as navigation elements like the ones you see on the top right. You need to bind current pathname as value prop for active indicator to work correctly.

<script>
  import { Tabs } from "smelte";
  import { stores } from '@sapper/app';
  const { page } = stores();

  const topMenu = [
      { to: '/components', text: 'Components' },
      { to: '/typography', text: 'Typography' },
      { to: '/color', text: 'Color' },
    ];

  // Or simply use document.location.pathname
  // if your app isn't sapper.
  $: path = $page.path;
</script>

<Tabs items={topMenu} bind:selected={path} />

Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.

<script>
	import {
    Tabs,
    Tab,
    Image,
    TextField
	} from "smelte";

  let loading = false;
</script>

<div style="max-width: 400px">
  <Tabs
    selected="1"
    class="bg-black shadow-sm mt-6 text-white rounded-t-lg"
    color="yellow-a200"
    let:selected={selected}
    {loading}
    items={[
      { id: "1", text: 'Cats', icon: 'alarm_on' },
      { id: "2", text: 'Kittens', icon: 'bug_report' },
      { id: "3", text: 'Kitties', icon: 'eject' },
    ]}>
    <div
      slot="content"
      class="flex items-center content-center overflow-hidden w-full bg-gray-900 h-full"
      style="height: 250px"
    >
      <Tab id="1" {selected}>
        <Image
          alt="kitten 1"
          class="w-full"
          src="https://placekitten.com/400/250"
          width="400"
          height="250"
        />
      </Tab>
      <Tab id="2" {selected}>
        <Image
          alt="kitten 1"
          class="w-full"
          src="https://placekitten.com/400/251"
          width="400"
          height="250"
        />
      </Tab>
      <Tab id="3" {selected}>
        <Image
          alt="kitten 3"
          class="w-full"
          src="https://placekitten.com/400/253"
          width="400"
          height="250"
        />
      </Tab>
    </div>
  </Tabs>
</div>