为什么捐赠
API 浏览器
联系站长
标签

QChip 组件用于显示简短的信息片段,如标签、联系人等复杂底层数据的紧凑表示。

Chip 可以包含头像、文本或图标等元素,也可以配置为可点击、可关闭或可移除。

TIP

也可以看看 QBadge

正在加载 QChip API...

用法

基础示例


紧凑模式


自定义尺寸


方形样式


轮廓样式


可点击


可选择


可移除


长标签截断


Accessibility
v2.25+

A clickable chip (through the clickable prop or a selected model) exposes itself as role="button" and activates on Enter or Space. Only chips driven by a selected model additionally expose aria-pressed — a plain action chip does not claim toggle semantics. A disabled chip keeps its role (announced as dimmed via aria-disabled) but is taken out of the tab order.

The remove icon of a removable chip is a keyboard-operable control of its own, named by the localized “Remove” label from the Quasar Language Pack. That generic name says nothing about what would be removed, so set remove-aria-label per chip for context — e.g. “Remove tag: Vue”.