Animation of Floating Labels on Input Borders: Using Vue.js and Quasar Framework #vuejs #quasarframework #floatinglabels

In this tutorial, we will learn how to create a floating label animation on an input border using Vue.js and Quasar Framework. This animation adds a sleek and modern look to your forms, making them more visually appealing for users.

Before we get started, make sure you have Vue.js and Quasar Framework installed in your project. If not, you can install Vue.js by running the following command:

npm install vue

And Quasar Framework by running:

npm install quasar

Now let’s begin by creating a new Vue.js component for our input field with the floating label animation. In your Vue project, create a new file called FloatingInput.vue and add the following code:

<template>
  <div class="floating-input">
    <label :for="id" class="floating-label" :class="{ 'active': isActive }">{{ label }}</label>
    <input
      :id="id"
      v-model="inputValue"
      @focus="isActive = true"
      @blur="isActive = inputValue !== ''"
    />
    <div class="border-bottom"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: 'floating-input',
      label: 'Label',
      inputValue: '',
      isActive: false
    };
  }
}
</script>

<style>
.floating-input {
  position: relative;
  margin-bottom: 16px;
}

.floating-label {
  position: absolute;
  top: 0;
  left: 0;
  transition: top 0.3s, font-size 0.3s;
  font-size: 16px;
  color: #757575;
}

.active {
  top: -16px;
  font-size: 12px;
}

input {
  width: 100%;
  padding: 8px 0;
  border: none;
  border-bottom: 1px solid #757575;
  outline: none;
}

.border-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #1e88e5;
  transition: background-color 0.3s;
}

input:focus ~ .border-bottom {
  background-color: #1e88e5;
}
</style>

In this code, we have created a Vue component called FloatingInput with a label and an input field. We are using isActive data property to track whether the input field is focused or has some value. When the input field is focused or has some value, the label will float above the input field.

To use this component in your Vue project, simply import it in your parent component and include it in your template like this:

<template>
  <div>
    <FloatingInput label="Name" />
    <FloatingInput label="Email" />
  </div>
</template>

<script>
import FloatingInput from './FloatingInput.vue';

export default {
  components: {
    FloatingInput
  }
}
</script>

Now when you run your Vue project, you should see the floating label animation on your input fields. You can customize the styling and animation of the label and input field to suit your design preferences.

That’s it! You have successfully implemented a floating label animation on an input border using Vue.js and Quasar Framework. I hope this tutorial was helpful for you. Thank you for reading!