How to conditionally set the style of an HTML element using Alpine.js

#alpinejs #style #tutorial #condition

Creating a Conditional Style with Alpine.js

In this tutorial, we will explore how to conditionally set the style of an HTML element using Alpine.js. Our goal is to create an interactive color-changing application where a container contains multiple buttons representing different colors. When a button is clicked, the background color of an <h1> element will dynamically update based on the selected color.

Step 1: Set up the HTML structure and Alpine.js

First, let's set up the basic HTML structure and include the Alpine.js library. Create a new HTML file and add the following code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Alpine.js Example</title>
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@2.8.2/dist/alpine.js"></script>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .color-button {
        margin-right: 5px;
        margin-top: 5px;
      }
      .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 600px;
        border: 1px solid lightgray;
        padding: 20px;
        transition: box-shadow 0.3s;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
      }

      .container:hover {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      }
      .container-btn {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <!-- HTML code goes here -->
    </div>
  </body>
</html>

Step 2: Define the data using x-data

Next, let's define the data using the x-data directive provided by Alpine.js. This directive allows us to create an instance of Alpine.js and define its data properties. Add the x-data attribute to the <div> element inside the container and initialize the color property as an empty string. Update the code as follows:

<div x-data="{ color: '' }" class="container">
  <!-- HTML code goes here -->
</div>

Step 3: Bind the style using x-bind

To dynamically update the style of the <h1> element based on the selected color, we will use the x-bind directive. With x-bind, we can bind the value of an attribute to an expression. Add the x-bind directive to the <h1> element's style attribute and bind it to the color data property. Update the code as follows:

<h1 x-bind:style="'background-color: ' + color">HELLO WORLD</h1>

Step 4: Handle button clicks using x-on

Now, let's handle the button clicks using the x-on directive provided by Alpine.js. This directive allows us to listen for events and execute expressions when those events occur. Add the x-on directive to each button and define the click event handler. Inside the event handler, update the color data property based on the selected color. Update the code as follows:

<div class="container-btn">
  <button x-on:click="color = 'red'" class="color-button">Red</button>
  <button x-on:click="color = 'white'" class="color-button">White</button>
  <button x-on:click="color = 'blue'" class="color-button">Blue</button>
  <button x-on:click="color = 'green'" class="color-button">Green</button>
  <button x-on:click="color = 'yellow'" class="color-button">Yellow</button>
</div>

Step 5: Test the functionality

Now that you have completed the necessary steps, it's time to test the functionality of our color-changing application. Your finished html code shall look like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Alpine.js Example</title>
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@2.8.2/dist/alpine.js"></script>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .color-button {
        margin-right: 5px;
        margin-top: 5px;
      }
      .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 600px;
        border: 1px solid lightgray;
        padding: 20px;
        transition: box-shadow 0.3s;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
      }

      .container:hover {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      }
      .container-btn {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div x-data="{ color: '' }" class="container">
      <h1 x-bind:style="'background-color: ' + color">HELLO WORLD</h1>
      <div class="container-btn">
        <button x-on:click="color = 'red'" class="color-button">Red</button>
        <button x-on:click="color = 'white'" class="color-button">White</button>
        <button x-on:click="color = 'blue'" class="color-button">Blue</button>
        <button x-on:click="color = 'green'" class="color-button">Green</button>
        <button x-on:click="color = 'yellow'" class="color-button">
          Yellow
        </button>
      </div>
    </div>
  </body>
</html>

Open the HTML file in a web browser and click on the buttons. The background color of the <h1> element should dynamically update based on the selected color.

You have successfully learned how to use Alpine.js to create a conditional style in web application. Understanding the concepts of x-data, data properties, and the x-bind and x-on directives is crucial for building interactive applications with Alpine.js. Feel free to customize the code and experiment with different styles and interactions to enhance your projects.