#tailwindcss #design

Create Tab View Using Alpinejs

~ 6 MINS READ

20th Nov 2021

By Mohammed Omer

Alpinejs is a minimal, lightweight javascript framework, it sits between vanilla javascript and javascript frameworks like Vue and React and it is very easy to learn and add some behavior to your pages from inside your html file!

Alpinejs is not a replacement for react, vue or angular. You can think of it as a modern alternative for jquery.

This tutorial doesn't require any prior knowledge of alpinejs. A little experience with javascript will be enough to follow along. So let's build a simple tab view to illustrate the power and simplicity of alpinejs.

Building a simple tab view

We will start by a very basic html markup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alpine Tab View</title>
</head>
<body>

</body>
</html>

Then we will pull alpinejs from a CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.3.0/alpine.js"></script>

I will also be using tailwindcss to style tab elemets, but feel free to use any css framework or even plain css.

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

Now that alpine is ready, we can use it to build cool elements! Let's build our tab view:

We will first create a wrapper to hold data that we will be working on

<div x-data="{ current: 1 }"></div>

The above div will hold the data that our tab view will depend on.

data defined by x-data attribute will be available for the entire div block that the data is declared on, so we can use this data to conditionally hide and show elements, bind classes and many other things.

Now we will create three buttons to control which tab should be open

<div class="flex overflow-hidden border-b-2">
    <button class="px-4 py-2 w-full" x-on:click="current = 1"
        x-bind:class="{ 'text-white bg-blue-600': current === 1 }">First Tab</button>
    <button class="px-4 py-2 w-full" x-on:click="current = 2"
        x-bind:class="{ 'text-white bg-blue-600': current === 2 }">Second Tab</button>
    <button class="px-4 py-2 w-full" x-on:click="current = 3"
        x-bind:class="{ 'text-white bg-blue-600': current === 3 }">Third Tab</button>
</div>

The above div will create three buttons equally expanded over the width of the screen.

When clicking the first button, the current variable will be set to 1, the second button will set current to 2 and the third will set it to 3 (We will be using this value to show the appropriate tab and hide other tabs).

we can use x-on:click to determine what should happen when an element is clicked (mostly manipulating data)

The active button will have the classes text-white bg-blue-600

we can use x-bind to bind an attribute (like a class attribute) to a value, whenever this value changes the attribute will reevaluate accordingly.

Lastly, we create three elements to hold the actual contents of each tab

<div x-show="current === 1" class="p-3 text-center mt-6">
    <p>First Tab Content</p>
</div>
<div x-show="current === 2" class="p-3 text-center mt-6">
    <p>Second Tab Content</p>
</div>
<div x-show="current === 3" class="p-3 text-center mt-6">
    <p>Third Tab Content</p>
</div>

Lastly, we create 3 div elements, each one corresponds to one of the tabs. If current is equal to 1 (i.e. first tab is active) then the expression current === 1 will evaluate to true and the first div will be visible, similarly the second and third tabs will be visible when current value is 2 and 3 respectively.

we can use x-show to conditionally show an element based on a boolean expression.

And now we have a simple working tab view 🎉🎉

Tab View

Note: if you are using Vuejs make sure you are using the long-hand syntax ( x-bind and x-on ) instead of the short-hand syntax ( : and @ ) respectively, otherwise, vue and alpine will clash and you will see unexpected results

Putting it all together

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.3.0/alpine.js"></script>
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
    <title>Alpine Tab View</title>
</head>

<body>
    <div x-data="{ current: 1 }">
        <div class="flex overflow-hidden border-b-2">
            <button class="px-4 py-2 w-full" x-on:click="current = 1"
                x-bind:class="{ 'text-white bg-blue-600': current === 1 }">First Tab</button>
            <button class="px-4 py-2 w-full" x-on:click="current = 2"
                x-bind:class="{ 'text-white bg-blue-600': current === 2 }">Second Tab</button>
            <button class="px-4 py-2 w-full" x-on:click="current = 3"
                x-bind:class="{ 'text-white bg-blue-600': current === 3 }">Third Tab</button>
        </div>
        <div x-show="current === 1" class="p-3 text-center mt-6">
            <p>First Tab Content</p>
        </div>
        <div x-show="current === 2" class="p-3 text-center mt-6">
            <p>Second Tab Content</p>
        </div>
        <div x-show="current === 3" class="p-3 text-center mt-6">
            <p>Third Tab Content</p>
        </div>
    </div>
</body>

</html>

The best place to learn more about alpinejs is the official documentation

If you liked this post consider sharing it :

Create Tab View Using Alpinejs

Building a simple tab view

Putting it all together

You may also like