quasar/docs/src/examples/QChip/Dense.vue at dev · hipertracker/quasar · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<template>
  <div class="q-pa-md q-gutter-md">
    <div>
      <q-chip dense icon="event">Add to calendar</q-chip>
      <q-chip dense icon="bookmark">Bookmark</q-chip>
      <q-chip dense icon="alarm" label="Set alarm" />
      <q-chip dense icon="directions">Get directions</q-chip>
    </div>
    <div>
      <q-chip dense color="primary" text-color="white" icon="event">
        Add to calendar
      </q-chip>
      <q-chip dense color="teal" text-color="white" icon="bookmark">
        Bookmark
      </q-chip>
      <q-chip dense color="orange" text-color="white" icon-right="star">
        Star
      </q-chip>
      <q-chip dense color="red" text-color="white" icon="alarm" label="Set alarm" />
      <q-chip dense color="deep-orange" text-color="white" icon="directions">
        Get directions
      </q-chip>
      <q-chip dense>
        <q-avatar icon="bookmark" color="red" text-color="white" />
        Bookmark
      </q-chip>
      <q-chip dense>
        <q-avatar color="red" text-color="white">50</q-avatar>
        Emails
      </q-chip>
      <q-chip dense>
        <q-avatar>
          <img src="https://cdn.quasar.dev/img/avatar3.jpg">
        </q-avatar>
        Mary
      </q-chip>
    </div>
  </div>
</template>