zzzUI
English

Marker

对话流中不属于任何人发言的提示，例如有人加入、日期、重新连接。字号小、颜色淡、斜体。

安装

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/marker

示例

日期、事件与归档提示

Tonight
Mara joined the channel
Earlier messages are archived
marker-kinds.tsx
import { InfoIcon } from "@/components/zero/icons";import { Marker, MarkerContent, MarkerIcon } from "@/components/zero/marker";export default function MarkerKinds() {  return (    <div className="grid w-full max-w-md gap-5">      <Marker variant="separator">        <MarkerContent>Tonight</MarkerContent>      </Marker>      <Marker>        <MarkerIcon>          <InfoIcon />        </MarkerIcon>        <MarkerContent>Mara joined the channel</MarkerContent>      </Marker>      <Marker variant="border">        <MarkerContent>Earlier messages are archived</MarkerContent>      </Marker>    </div>  );}

行为

separator 将其置于横贯全宽的两条淡色细线之间；border 在其下方添加一条线。MarkerIcon 在其前方放置图标。

属性

Marker

属性类型默认值说明
variant"default" | "separator" | "border""default"无装饰、夹在两条线之间，或位于一条线之上。
renderReactElement—渲染为指定元素。

MarkerIcon, MarkerContent