zzzUI
English

Bubble

承载发言内容的直角方框，靠近发言人的一角以 45° 斜切。

安装

terminal
# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/bubble

示例

六种样式

Take the canal, it is faster tonight.
On it. Eighteen minutes.
👍 2
Dispatcher is away until 22:00.
Couldn't reach the north gate.
bubble-variants.tsx
import {  Bubble,  BubbleContent,  BubbleGroup,  BubbleReactions,} from "@/components/zero/bubble";export default function BubbleVariants() {  return (    <BubbleGroup className="w-full max-w-md gap-4">      <Bubble>        <BubbleContent>Take the canal, it is faster tonight.</BubbleContent>      </Bubble>      <Bubble variant="secondary" align="end">        <BubbleContent>On it. Eighteen minutes.</BubbleContent>        <BubbleReactions>👍 2</BubbleReactions>      </Bubble>      <Bubble variant="muted">        <BubbleContent>Dispatcher is away until 22:00.</BubbleContent>      </Bubble>      <Bubble variant="outline">        <BubbleContent render={<button type="button" />}>          Send me the route        </BubbleContent>      </Bubble>      <Bubble variant="danger">        <BubbleContent>Couldn't reach the north gate.</BubbleContent>      </Bubble>    </BubbleGroup>  );}

行为

自己的发言用强调色，对方的发言用浮起色，次要内容用面板色；另有描边的黑色凹槽、表示出错的红色，以及完全不带方框的样式。位于 Message 中时，气泡跟随该消息所在的一侧。

BubbleContent 支持 render，因此气泡可以是按钮或链接，例如建议回复。BubbleReactions 在气泡边缘固定一个显示表情回应的小号斜切块。

属性

Bubble

属性类型默认值说明
variant"default" | "secondary" | "muted" | "outline" | "danger" | "ghost""default"填充样式。
align"start" | "end""start"不在 Message 中时，位于哪一侧。

BubbleReactions

属性类型默认值说明
side"top" | "bottom""bottom"位于哪条边。
align"start" | "end""end"位于该边的哪一端。

BubbleGroup, BubbleContent