Dieter's Words

Tabs and Alpine.js

Published  

Tabs are hard. Especially when you want them to work on a small screen and you switch to a select field. Well I have a small solution here using Alpine.js and some templates. Hopefully next time won't be so hard.

<div x-data="{activeTab:1,tabs:[{id:1,title:'One'},{id:2,title:'Two'}]}">
  <div>    <select @change="activeTab = Number($el.value)" x-model="activeTab">
      <template x-for="tab in tabs">
        <option :value="tab.id" x-text="tab.title"></option>
      </template>
    </select>
  </div>
  <div>
    <template x-for="tab in tabs">
      <a href="#" @click.prevent="activeTab = tab.id">
        <span x-text="tab.title">
      </a>
    </template>
  </div>
</div>

Now obviously this does not come with any code or the actual tab content but that can be easily added.

Dieter Lunn

© DYNABLOGGER.COM
powered by DynaBlogger