🔷 Quasar Lesson 02 — UI Components

1. QBtn — Button

<!-- Basic -->
<q-btn label="Click Me" color="primary" />

<!-- With icon -->
<q-btn label="Save" icon="save" color="positive" />

<!-- Styles -->
<q-btn flat label="Flat" />
<q-btn outline label="Outline" />
<q-btn round icon="home" />
<q-btn fab icon="add" color="accent" />

<!-- Sizes -->
<q-btn size="xs" label="XS" />
<q-btn size="lg" label="Large" />

<!-- Loading / Disable -->
<q-btn :loading="saving" label="Submit" />
<q-btn disable label="Disabled" />

2. QInput — Text Input

<!-- Basic -->
<q-input v-model="name" label="Your Name" />

<!-- Styles -->
<q-input outlined v-model="email" label="Email" />
<q-input filled v-model="msg" label="Message" />
<q-input standout v-model="search" />

<!-- Password -->
<q-input type="password" v-model="pass" label="Password"
  :type="isPwd ? 'password' : 'text'"
>
  <template v-slot:append>
    <q-icon :name="isPwd ? 'visibility_off' : 'visibility'"
      @click="isPwd = !isPwd" />
  </template>
</q-input>

<!-- With icon -->
<q-input outlined v-model="search" label="Search"
  prepend-icon="search" />

3. QCard — Card

<q-card class="my-card">

  <q-img src="image.jpg" />

  <q-card-section>
    <div class="text-h6">Card Title</div>
    <div class="text-subtitle2">Subtitle</div>
  </q-card-section>

  <q-card-section>
    Card description text goes here.
  </q-card-section>

  <q-separator />

  <q-card-actions>
    <q-btn flat label="Learn More" color="primary" />
    <q-btn flat label="Share" color="primary" />
  </q-card-actions>

</q-card>

4. Icons, Badges & Chips

<!-- QIcon (Material Icons) -->
<q-icon name="home" />
<q-icon name="favorite" color="red" size="2em" />

<!-- QBadge -->
<q-btn icon="notifications">
  <q-badge color="red" floating>5</q-badge>
</q-btn>

<!-- QAvatar -->
<q-avatar icon="person" color="primary" text-color="white" />
<q-avatar><img src="avatar.png"></q-avatar>

<!-- QChip -->
<q-chip>Default</q-chip>
<q-chip removable color="primary" text-color="white">Tag</q-chip>

5. Component Reference