气泡 Bubble
展示在说话的样子，似乎 AI 对话交互很喜欢用。
基础使用
Bubble 默认采用主题色浅色调，小尾巴位于左下角，适合作为对话左侧的气泡；将 variant 设为 'primary'、tailPlacement 设为 'bottom-right' 即可得到右侧的实色气泡。
Hi! I am a bubble with a tail at the bottom-left corner.
Bubbles are great for chats, comments and annotations.
隐藏源代码
配色
variant 控制 Bubble 的样式，可选 'plain'（默认，浅色调底色）与 'primary'（实色底色）。
theme 设置主题色，可选 'primary'（默认）、'sakura'、'success'、'warning'、'danger'、'info'、'notice'，其中 'info' 为中性灰。也可以通过 color 传入自定义颜色，它会覆盖 theme。
plain
primary
sakura
success
warning
danger
info
notice
primary
primary
sakura
success
warning
danger
info
notice
color
#8b5cf6
#8b5cf6
隐藏源代码
小尾巴
通过 tailPlacement 可以把小尾巴放到 Bubble 的四个角上。设置 tail: false 可以去掉尾巴，tailWidth、tailHeight 则分别控制尾巴的根部宽度和高度（px）。
bottom-left
bottom-right
top-left
top-right
tail=false
tailWidth=4, tailHeight=3
隐藏源代码
圆角
shape 提供两种预设：'rect'（默认，直角）与 'round'（完全圆角）。
borderRadius 控制圆角大小。
尾巴附着的那一个角始终是直角
Default (shape="rect")
shape="round"
round + borderRadius=8 (radius wins)
borderRadius=12
[16, 0, 16, 0]
The tail corner stays square
隐藏源代码
API
BubbleProps
| 属性 | 类型 | 可选 | 默认值 | 描述 | 版本 |
|---|---|---|---|---|---|
| variant | 'plain' | 'primary' | 是 | 'plain' | Bubble 的样式变体。 | 0.2.1 |
| theme | 'primary' | 'sakura' | 'success' | 'warning' | 'danger' | 'info' | 'notice' | 是 | 'primary' | Bubble 的主题色。 | 0.2.1 |
| color | string | 是 | | 自定义颜色，会覆盖 theme。 | 0.2.1 |
| tail | boolean | 是 | true | 是否绘制小尾巴。 | 0.2.1 |
| tailPlacement | 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' | 是 | 'bottom-left' | 小尾巴所在的角。 | 0.2.1 |
| tailWidth | number | 是 | 2 | 小尾巴根部的宽度。 | 0.2.1 |
| tailHeight | number | 是 | 2 | 小尾巴的高度。 | 0.2.1 |
| borderRadius | NumberOrPercentage | NumberOrPercentage[] | 是 | | 圆角半径，优先级高于 shape，和 CSS border-radius 行为一致；单值或长度为 1 的数组 → 四角同时生效；长度为 2 的数组 → [左上 & 右下, 右上 & 左下]；长度为 3 的数组 → [左上, 右上 & 左下, 右下]；长度为 4 的数组 → 按顺时针顺序依次作用于四角。 | 0.2.1 |
| shape | 'rect' | 'round' | 是 | 'rect' | 圆角预设，优先级低于 borderRadius。 | 0.2.1 |
| pollSizeChange | boolean | 是 | false | 是否在容器大小变化时重新绘制。 | 0.2.1 |
BubbleSlots
| 插槽 | 参数 | 描述 | 版本 |
|---|---|---|---|
| default | | Bubble 的内容。 | 0.2.1 |
NumberOrPercentage
ts
export type NumberOrPercentage = number | `${number}%`