matyunya / smelte

UI framework with material components built with Svelte and Tailwind CSS
https://smeltejs.com/
MIT License
1.53k stars 114 forks source link

Correct Tab.selected prop to match usage #259

Closed gtosh4 closed 3 years ago

gtosh4 commented 3 years ago

This matches how it's used in the #if block and defaults to not matching (undefined !== null).

Excerpt from the web guide that uses it as well:

  <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>

Where the selected variable is the items' id.