quasar

Responsive Layouts

Quasar provides a powerful layout system that allows you to create responsive and adaptive layouts with ease. The example demonstrates a basic layout with a header and a page container.

<template>
  <q-layout view="hHh lpR fFf">
    <q-header elevated>
      <q-toolbar>
        <q-toolbar-title>
          My App
        </q-toolbar-title>
      </q-toolbar>
    </q-header>
    <q-page-container>
      <q-page>
        <div class="q-pa-md">
          <q-card>
            <q-card-section>
              Welcome to Quasar!
            </q-card-section>
          </q-card>
        </div>
      </q-page>
    </q-page-container>
  </q-layout>
</template>
<script>
export default {
  name: 'MyLayout'
}
</script>

Form Components

Quasar offers a wide range of form components that are easy to use and integrate. The example shows a simple form with input fields for name and email, and a submit button.

<template>
  <q-form @submit="onSubmit">
    <q-input filled v-model="formData.name" label="Name" />
    <q-input filled v-model="formData.email" label="Email" type="email" />
    <q-btn type="submit" label="Submit" color="primary" />
  </q-form>
</template>
<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        email: ''
      }
    }
  },
  methods: {
    onSubmit() {
      console.log(this.formData);
    }
  }
}
</script>

Dialogs and Notifications

Quasar provides built-in support for dialogs and notifications, making it easy to create interactive and user-friendly interfaces. The example demonstrates how to show a dialog with a title, message, and OK/Cancel buttons.

<template>
  <q-page>
    <q-btn @click="showDialog" label="Show Dialog" color="primary" />
  </q-page>
</template>
<script>
export default {
  methods: {
    showDialog() {
      this.$q.dialog({
        title: 'Dialog Title',
        message: 'This is a dialog message.',
        ok: 'OK',
        cancel: 'Cancel'
      }).onOk(() => {
        console.log('OK clicked');
      }).onCancel(() => {
        console.log('Cancel clicked');
      });
    }
  }
}
</script>