Chip

Vue 组件
Avatar 头像
Vue 组件
Icon 图标
Vue 组件
Badge 徽标

QChip Vue 组件基本上是一个简单的 UI 实体块，以紧凑的方式展示更复杂的数据，例如用来展示联系人。

QChip 可以包含多种内容：头像、文案、图标。还能被设置成可关闭或可删除的。

TIP

也看看 QBadge.

QChip API

QChip API
remove-aria-label
: String
v2.8.4+
说明
删除图标的 aria-label

用法

<template>
  <div class="q-pa-md q-gutter-md">
    <div>
      <q-chip icon="event">Add to calendar</q-chip>
      <q-chip icon="bookmark">Bookmark</q-chip>
      <q-chip icon="alarm" label="Set alarm" />
      <q-chip class="glossy" icon="directions">Get directions</q-chip>
    </div>
    <div>
      <q-chip color="primary" text-color="white" icon="event">
        Add to calendar
      </q-chip>
      <q-chip color="teal" text-color="white" icon="bookmark">
        Bookmark
      </q-chip>
      <q-chip class="glossy" color="orange" text-color="white" icon-right="star">
        Star
      </q-chip>
      <q-chip color="red" text-color="white" icon="alarm" label="Set alarm" />
      <q-chip color="deep-orange" text-color="white" icon="directions">
        Get directions
      </q-chip>
      <q-chip>
        <q-avatar icon="bookmark" color="red" text-color="white" />
        Bookmark
      </q-chip>
      <q-chip>
        <q-avatar color="red" text-color="white">50</q-avatar>
        Emails
      </q-chip>
      <q-chip>
        <q-avatar>
          <img src="https://cdn.quasar.dev/img/avatar5.jpg">
        </q-avatar>
        John
      </q-chip>
    </div>
  </div>
</template>
Add to calendar
Bookmark
Set alarm
Get directions
Add to calendar
Bookmark
Star
Set alarm
Get directions
Bookmark
50
Emails
John 
<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>
Add to calendar
Bookmark
Set alarm
Get directions
Add to calendar
Bookmark
Star
Set alarm
Get directions
Bookmark
50
Emails
Mary 
<template>
  <div class="q-pa-md q-gutter-md">
    <div>
      <q-chip size="18px" icon="bookmark">
        Bookmark
      </q-chip>
    </div>

    <div>
      <q-chip size="xs" icon="bookmark">
        Bookmark
      </q-chip>

      <q-chip size="sm" icon="bookmark">
        Bookmark
      </q-chip>

      <q-chip size="md" icon="bookmark">
        Bookmark
      </q-chip>

      <q-chip size="lg" icon="bookmark">
        Bookmark
      </q-chip>

      <q-chip size="xl" icon="bookmark">
        Bookmark
      </q-chip>
    </div>

    <div>
      <q-chip dense size="xs" icon="bookmark">
        Bookmark
      </q-chip>

      <q-chip dense size="sm" icon="bookmark">
        Bookmark
      </q-chip>

      <q-chip dense size="md" icon="bookmark">
        Bookmark
      </q-chip>

      <q-chip dense size="lg" icon="bookmark">
        Bookmark
      </q-chip>

      <q-chip dense size="xl" icon="bookmark">
        Bookmark
      </q-chip>
    </div>
  </div>
</template>
Bookmark
Bookmark
Bookmark
Bookmark
Bookmark
Bookmark
Bookmark
Bookmark
Bookmark
Bookmark
Bookmark 
<template>
  <div class="q-pa-md q-gutter-md">
    <div>
      <q-chip square icon="event">Add to calendar</q-chip>
      <q-chip class="glossy" square icon="bookmark">Bookmark</q-chip>
      <q-chip square icon="alarm" label="Set alarm" />
      <q-chip square icon="directions">Get directions</q-chip>
    </div>
    <div>
      <q-chip square color="primary" text-color="white" icon="event">
        Add to calendar
      </q-chip>
      <q-chip class="glossy" square color="teal" text-color="white" icon="bookmark">
        Bookmark
      </q-chip>
      <q-chip square color="orange" text-color="white" icon-right="star">
        Star
      </q-chip>
      <q-chip square color="red" text-color="white" icon="alarm" label="Set alarm" />
      <q-chip square color="deep-orange" text-color="white" icon="directions">
        Get directions
      </q-chip>
      <q-chip square>
        <q-avatar icon="bookmark" color="red" text-color="white" />
        Bookmark
      </q-chip>
      <q-chip square>
        <q-avatar color="red" text-color="white">50</q-avatar>
        Emails
      </q-chip>
      <q-chip square>
        <q-avatar>
          <img src="https://cdn.quasar.dev/img/boy-avatar.png">
        </q-avatar>
        John
      </q-chip>
    </div>
  </div>
</template>
Add to calendar
Bookmark
Set alarm
Get directions
Add to calendar
Bookmark
Star
Set alarm
Get directions
Bookmark
50
Emails
John 
<template>
  <div class="q-pa-md">
    <q-chip outline color="primary" text-color="white" icon="event">
      Add to calendar
    </q-chip>
    <q-chip outline color="teal" text-color="white" icon="bookmark">
      Bookmark
    </q-chip>
    <q-chip outline color="orange" text-color="white" icon-right="star">
      Star
    </q-chip>
    <q-chip outline square color="red" text-color="white" icon="alarm" label="Set alarm" />
    <q-chip outline square color="deep-orange" text-color="white" icon="directions">
      Get directions
    </q-chip>
  </div>
</template>
Add to calendar
Bookmark
Star
Set alarm
Get directions 
<template>
  <div class="q-pa-md">
    <q-chip clickable @click="onClick" color="primary" text-color="white" icon="event">
      Add to calendar
    </q-chip>
    <q-chip clickable @click="onClick" icon="bookmark">
      Bookmark
    </q-chip>
    <q-chip clickable @click="onClick" color="teal" text-color="white" icon="bookmark">
      Bookmark
    </q-chip>
    <q-chip clickable @click="onClick" color="red" text-color="white" icon="alarm" label="Set alarm" />
    <q-chip clickable @click="onClick" color="orange" text-color="white" icon="directions">
      Get directions
    </q-chip>
  </div>
</template>
Add to calendar
Bookmark
Bookmark
Set alarm
Get directions 
<template>
  <div class="q-pa-md">
    <div class="q-gutter-xs">
      <q-chip v-model:selected="desert.Icecream" color="primary" text-color="white" icon="cake">
        Ice cream
      </q-chip>
      <q-chip v-model:selected="desert.Eclair" color="teal" text-color="white" icon="cake">
        Eclair
      </q-chip>
      <q-chip v-model:selected="desert.Cupcake" color="orange" text-color="white" icon="cake">
        Cupcake
      </q-chip>
      <q-chip v-model:selected="desert.Gingerbread" color="red" text-color="white" icon="cake">
        Gingerbread
      </q-chip>
    </div>

    <div class="q-mt-sm">
      Your pick: {{ selection }}
    </div>
  </div>
</template>
Ice cream
Eclair
Cupcake
Gingerbread
Your pick: Eclair
<template>
  <div class="q-pa-md">
    <div class="q-gutter-xs">
      <q-chip removable v-model="icecream" @remove="log('Icecream')" color="primary" text-color="white" icon="cake">
        Ice cream
      </q-chip>
      <q-chip removable v-model="eclair" @remove="log('Icecream')" color="teal" text-color="white" icon="cake">
        Eclair
      </q-chip>
      <q-chip removable v-model="cupcake" @remove="log('Icecream')" color="orange" text-color="white" icon="cake">
        Cupcake
      </q-chip>
      <q-chip disable removable v-model="gingerbread" @remove="log('Icecream')" color="red" text-color="white" icon="cake">
        Gingerbread (disable)
      </q-chip>
    </div>

    <q-btn color="primary" label="Reset" @click="onResetClick" class="q-mt-sm" />
  </div>
</template>
Ice cream
Eclair
Cupcake
Gingerbread (disable) 
<template>
  <div class="q-pa-md">
    <div class="q-gutter-xs row" style="max-width: 300px" :class="{ 'truncate-chip-labels': truncate }">
      <q-chip
        removable
        v-model="vanilla"
        color="primary"
        text-color="white"
        icon="cake"
        :label="vanillaLabel"
        :title="vanillaLabel"
      />
      <q-chip
        removable
        v-model="chocolate"
        color="teal"
        text-color="white"
        icon="cake"
        :label="chocolateLabel"
      >
        <q-tooltip>{{ chocolateLabel }}</q-tooltip>
      </q-chip>
      <q-chip
        removable
        v-model="strawberry"
        color="orange"
        text-color="white"
        icon="cake"
      >
        <div class="ellipsis">
          {{ strawberryLabel }}
          <q-tooltip>{{ strawberryLabel }}</q-tooltip>
        </div>
      </q-chip>
      <q-chip
        removable
        v-model="cookies"
        color="red"
        text-color="white"
      >
        <q-avatar>
          <img src="https://cdn.quasar.dev/img/boy-avatar.png">
        </q-avatar>
        <div class="ellipsis">
          {{ cookiesLabel }}
          <q-tooltip>{{ cookiesLabel }}</q-tooltip>
        </div>
      </q-chip>
    </div>

    <div class="row items-center q-mt-sm">
      <q-btn color="primary" label="Reset" @click="onResetClick" class="q-mr-sm" />
      <q-toggle v-model="truncate" label="Truncate labels" />
    </div>
  </div>
</template>
I want vanilla flavoured ice cream
I want chocolate flavoured ice cream
I want strawberry flavoured ice cream
I want cookies flavoured ice cream
Truncate labels
查看更多？
Vue 组件
Chat Message 聊天消息
Vue 组件
Circular Progress 环形进度
发现了一处错误？帮助改进提交问题
Privacy Policy | Quasar Artwork
版权声明 本中文文档内容版权为站长个人所有，保留所有权利。
免责声明 本站点所包含的任何跳转链接均为第三方广告内容，站点对这些广告内容的准确性、合法性、真实性不承担任何责任。用户点击跳转链接进入第三方网站后，应自行判断广告内容的真实性和合法性，并自行承担因使用广告内容而产生的风险和责任。任何因使用第三方广告内容而导致的损失或损害，本站点概不负责。