Quasar UI login form design

Open BasketZ February 07, 2023

Quasar is a UI framework that provides a comprehensive collection of high-quality UI components, and it’s perfect for building a login form. With Quasar, you can create a professional-looking login form in just a few lines of code. In this tutorial, we’ll be using the standalone version of Quasar to create a login form.

Here's a Quasar UI login form design using Quasar UMD (Universal Module Definition) or standalone version:
 Quasar UI login form design,Quasar login form design tutorial,Quasar responsive login form,Quasar simple login form,Quasar material design login form,Quasar UI login form example,Quasar login form best practices,Quasar login form UI kit,Quasar form design inspiration,Quasar form design templates

Prerequisites

Before we start, make sure you have a basic understanding of HTML, CSS, and JavaScript. If you’re new to Quasar, it would be helpful to read through their documentation to familiarize yourself with the framework.


Create the HTML Template

The first step is to create the HTML template for the login form. The template is comprised of two parts: the header and the body. In the header, we'll include the required Quasar CSS files, and in the body, we’ll include the login form. Here’s the complete HTML code:


<!DOCTYPE html>  
 <html>
   <head>  
    <link  
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"  
      rel="stylesheet"  
      type="text/css"  
    />  
    <link  
     href="https://cdn.jsdelivr.net/npm/quasar@2.11.5/dist/quasar.prod.css"  
     rel="stylesheet"  
     type="text/css"  
   />  
   </head>  
   <body>  
     <!-- example of injection point where you write your app template -->  
     <div id="q-app">  
    <q-layout view="lHh lpr lFf" style="height: 100vh">  
     <q-page-container>  
      <q-page  
       class="window-height window-width row justify-center items-center"  
       style="background: linear-gradient(#c89c9e, #4f2742)"  
      >  
       <div class="column q-pa-lg">  
        <div class="row">  
         <q-card  
          class="shadow-24 rounded-borders"  
          style="width: 400px; height: 540px"  
         >  
          <q-card-section class="bg-teal-10">  
           <h4 class="text-h5 text-white q-my-md">Login Form</h4>  
          </q-card-section>  
          <q-card-section>  
           <q-form class="q-px-sm q-pt-xl">  
            <q-input type="email" label="Email" >  
             <template v-slot:prepend>  
              <q-icon name="email" />  
             </template>  
            </q-input>  
            <q-input type="password" label="Password">  
             <template v-slot:prepend>  
              <q-icon name="lock" />  
             </template>  
            </q-input>  
            <br>  
            <q-card-actions class="q-px-lg">  
             <q-btn  
              unelevated  
              size="lg"  
              color="teal-8"  
              @click="submit"  
              class="full-width text-white"  
              label="Log In"  
             />  
            </q-card-actions>  
            <q-card-section  
             v-if="!register"  
             class="text-center q-pa-sm"  
            >  
             <p class="text-grey-6">Not registered yet?</p>  
            </q-card-section>  
           </q-form>  
          </q-card-section>  
         </q-card>  
        </div>  
       </div>  
      </q-page>  
     </q-page-container>  
    </q-layout>  
   </div>  
   <!-- Add the following at the end of your body tag -->  
   <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>  
   <script src="https://cdn.jsdelivr.net/npm/quasar@2.11.5/dist/quasar.umd.prod.js"></script>  
   <script>  
    const app = Vue.createApp({  
     setup() {  
      return {};  
     },  
    });  
    app.use(Quasar);  
    app.mount("#q-app");  
   </script>  
  </body>  
 </html>
This code provides a basic template for a Quasar UI login form.

Let's break down the code to understand it better.

  1. The first section of the code loads the required CSS and fonts files. This is required to use Quasar UI components in your application.
  2. The second section of the code is where the main logic of the login form is written. The q-app div acts as an injection point where the template for the login form is written.
  3. The q-layout component provides a layout for the page. It takes in several properties that define how the page should be arranged. In this case, the properties view="lHh lpr lFf" and style="height: 100vh" are used to make the layout take up the full height and width of the screen.
  4. The q-page-container component provides a container for the main content of the page. Within it, the q-page component is used to define the main content of the page.
  5. The q-card component is used to define a card that contains the form fields for the login form. The q-card-section component is used to divide the card into multiple sections.
  6. The form fields consist of two q-input components, one for the email and one for the password. The type property of the q-input component is used to specify the type of the input field. In this case, the type is set to "email" for the email field and "password" for the password field.
  7. The q-card-actions component is used to define the actions that can be taken on the form, in this case, the "Log In" button. The q-btn component is used to define the button.
  8. The final section of the code loads the required JavaScript files and sets up the Vue.js application. The Vue.createApp method is used to create a Vue.js application, and the app.use method is used to add the Quasar UI library to the application. The app.mount method is used to mount the application to the q-app div.

This code provides a basic template for a Quasar UI login form. You can customize it further to meet your requirements.
Tags:

Post a Comment

0 Comments