标记

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

import {

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

特性#

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

示例#

变体#

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

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

export function MarkerVariantsDemo() {

状态#

设置 role="status"，并为流式或进行中的标记包含一个 Spinner，这样更新就会被播报出来。

import {
  Marker,
  MarkerContent,

闪烁效果#

为 MarkerContent 添加 shimmer 工具类，以实现动画式流式文本效果。该工具随 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 {

带图标#

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

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

import {

链接和按钮#

在 Marker 上使用 asChild 属性，可将标记变成链接或按钮。

"use client"

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

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

无障碍#

Marker 默认是展示性元素。正确的语义取决于你的使用方式，因此应根据意图选择角色，而不是依赖单一默认值。

状态和进度#

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

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

带标签的分隔符#

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

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

带边框的标记#

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

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

装饰性图标#

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

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

交互式标记#

当标记用于链接或触发操作时，请使用 asChild 属性将其渲染为真实的 <button> 或 <a>，这样它才能获得焦点并暴露正确的角色。可访问名称来自标记文本。

Copy<Marker asChild>
  <a href="/files">
    <MarkerIcon>
      <FileTextIcon />
    </MarkerIcon>
    <MarkerContent>已浏览 4 个文件</MarkerContent>
  </a>
</Marker>

API 参考#

Marker#

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

MarkerIcon#

一个装饰性图标槽位。使用 aria-hidden 对辅助技术隐藏。

MarkerContent#

标记文本内容。