Marker

import { GitBranchIcon, SearchIcon } from "lucide-react"

import { Marker, MarkerContent, MarkerIcon } from "@/components/ui/marker"

Marker 组件用于显示内联对话标记，例如状态更新、系统备注、带边框的行和带标签的分隔符。可将其与对话线程中的 Message 组合使用。

安装#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add marker
Copy

用法#

Copyimport { Marker, MarkerContent, MarkerIcon } from "@/components/ui/marker"

Copy<Marker>
  <MarkerIcon>
    <CheckIcon />
  </MarkerIcon>
  <MarkerContent>已浏览 4 个文件</MarkerContent>
</Marker>

组合#

使用以下组合来构建标记：

CopyMarker
├── MarkerIcon
└── MarkerContent

功能#

• 内联标记、带边框的行和带标签的分隔符变体
• 装饰性图标插槽，对辅助技术隐藏
• 通过 render 实现多态根，用于链接和按钮标记
• 可与 shimmer 工具配合使用，以流式展示状态文本
• 可通过每一部分上的 className 属性自定义样式

示例#

变体#

使用 variant 在内联标记、带边框的行和带标签的分隔符之间切换。

import { Marker, MarkerContent } from "@/components/ui/marker"

export function MarkerVariantsDemo() {

状态#

设置 role="status"，并为流式或进行中的标记包含一个 Spinner，以便播报更新。

import { Marker, MarkerContent, MarkerIcon } from "@/components/ui/marker"
import { Spinner } from "@/components/ui/spinner"

闪烁效果#

将 shimmer 工具类添加到 MarkerContent，以实现动画流式文本效果。该工具随 shadcn 包一起提供——请参阅 shimmer 文档了解安装方法。

import { Marker, MarkerContent } from "@/components/ui/marker"

export function MarkerShimmerDemo() {

分隔符#

在对话中，将 separator 变体用于带标签的分隔线，例如日期或章节分隔。

import { Marker, MarkerContent } from "@/components/ui/marker"

export function MarkerSeparatorDemo() {

边框#

对于需要保持默认标记对齐、同时将下一行分隔开的状态行，使用 border 变体。

import { FileTextIcon, GitBranchIcon, SearchIcon } from "lucide-react"

import { Marker, MarkerContent, MarkerIcon } from "@/components/ui/marker"

带图标#

使用 MarkerIcon 在内容旁边渲染图标。使用 flex-col 将图标堆叠在内容上方。

import { BookOpenCheck, GitBranchIcon, SearchIcon } from "lucide-react"

import { Marker, MarkerContent, MarkerIcon } from "@/components/ui/marker"

链接和按钮#

使用 Marker 上的 render 属性将标记变为链接或按钮。

"use client"

import { GitBranchIcon, RotateCcwIcon } from "lucide-react"

Copyimport { Marker, MarkerContent } from "@/components/ui/marker"
 
export function MarkerLinkDemo() {
  return (
    <Marker render={<a href="#" />}>
      <MarkerContent>查看拉取请求</MarkerContent>
    </Marker>
  )
}

无障碍访问#

Marker 默认仅用于展示。正确的语义取决于你如何使用它，因此应根据用途选择 role，而不是依赖单一默认值。

状态和进度#

对于诸如“Thinking...”或正在运行的工具这类流式或进度标记，设置 role="status"，这样辅助技术会在更新出现时播报它。Marker 会将 role 传递到底层元素。

Copy<Marker role="status">
  <MarkerIcon>
    <Spinner />
  </MarkerIcon>
  <MarkerContent>压缩对话</MarkerContent>
</Marker>

带标签的分隔符#

带有文本的分隔符，例如日期或章节标签，不需要 role。分隔线是装饰性的 CSS 伪元素，而文本会作为普通内容被播报。

Copy<Marker variant="separator">
  <MarkerContent>今天</MarkerContent>
</Marker>

带边框的标记#

带边框的标记与默认标记保持相同的语义。底部边框是装饰性的，因此应根据标记的用途选择 role="status"、render 或不设置 role。

Copy<Marker variant="border">
  <MarkerIcon>
    <FileTextIcon />
  </MarkerIcon>
  <MarkerContent>打开了实现说明</MarkerContent>
</Marker>

装饰性图标#

MarkerIcon 仅用于装饰，并通过 aria-hidden 对辅助技术隐藏，因此相邻的 MarkerContent 承载含义。对于仅图标的标记，请提供 aria-label 或可见文本，以免被播报为空。

Copy<Marker aria-label="已同步">
  <MarkerIcon>
    <CheckIcon />
  </MarkerIcon>
</Marker>

交互式标记#

当标记用于链接或触发操作时，请使用 render prop 将其渲染为真正的 <button> 或 <a>，这样它才可聚焦并暴露正确的 role。可访问名称来自标记文本。

Copy<Marker render={<a href="/files" />}>
  <MarkerIcon>
    <FileTextIcon />
  </MarkerIcon>
  <MarkerContent>浏览了 4 个文件</MarkerContent>
</Marker>

API 参考#

Marker#

根标记元素。该文件还导出 markerVariants，用于将标记样式组合到自定义组件中。

MarkerIcon#

装饰性图标插槽。通过 aria-hidden 对辅助技术隐藏。

MarkerContent#

标记文本内容。