120k
New

标记

PreviousNext

在对话中显示行内状态、系统备注、带边框的行或带标签的分隔符。

Base UIReact AriaRadix UI
Switched to a new branch
Thinking...
Conversation compacted
Explored 4 files
import { GitBranchIcon, SearchIcon } from "lucide-react"

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

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

安装

pnpm dlx shadcn@latest add marker

用法

import { Marker, MarkerContent, MarkerIcon } from "@/components/ui/marker"
<Marker>
  <MarkerIcon>
    <CheckIcon />
  </MarkerIcon>
  <MarkerContent>已探索 4 个文件</MarkerContent>
</Marker>

组合

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

Marker
├── MarkerIcon
└── MarkerContent

特性

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

变体

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

A default marker for inline notes.
A separator marker
A border marker for row boundaries.
import { Marker, MarkerContent } from "@/components/ui/marker"

export function MarkerVariantsDemo() {
变体描述
default用于状态、备注和操作的行内标记。
border在行下方带有底部边框的默认标记。
separator两侧带有分隔线的居中标签。

状态

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

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

Shimmer

将 shimmer 工具类添加到 MarkerContent，以实现动画流式文本效果。该工具随 shadcn 软件包一起提供——有关安装信息，请参阅 shimmer 文档。

Thinking...
Reading 4 files
import { Marker, MarkerContent } from "@/components/ui/marker"

export function MarkerShimmerDemo() {

分隔线

在对话中，对于日期或章节分隔等带标签的分隔线，请使用 separator 变体。

Today
Worked for 42s
Conversation compacted
import { Marker, MarkerContent } from "@/components/ui/marker"

export function MarkerSeparatorDemo() {

边框

对于需要保持默认标记对齐方式并与下一行分隔开的状态行，请使用 border 变体。

Switched to release-candidate
Reviewed 8 related files
Opened implementation notes
import { FileTextIcon, GitBranchIcon, SearchIcon } from "lucide-react"

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

带图标

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

Switched to a new branch
Explored 4 files
Syncing completed
import { BookOpenCheck, GitBranchIcon, SearchIcon } from "lucide-react"

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

链接和按钮

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

View the pull request
"use client"

import { GitBranchIcon, RotateCcwIcon } from "lucide-react"
import { Marker, MarkerContent } from "@/components/ui/marker"
 
export function MarkerLinkDemo() {
  return (
    <Marker render={(props) => <a {...props} href="#" />}>
      <MarkerContent>查看拉取请求</MarkerContent>
    </Marker>
  )
}

可访问性

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

状态和进度

对于“思考中……”或正在运行的工具等流式或进度标记，请设置 role="status"，以便辅助技术在更新出现时播报内容。Marker 会将 role 传递给底层元素。

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

带标签的分隔线

带有文本的分隔线（例如日期或分区标签）不需要设置角色。分隔线由装饰性的 CSS 伪元素构成，文本会作为普通内容被播报。

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

带边框的标记

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

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

装饰性图标

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

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

交互式标记

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

<Marker render={(props) => <a {...props} href="/files" />}>
  <MarkerIcon>
    <FileTextIcon />
  </MarkerIcon>
  <MarkerContent>已浏览 4 个文件</MarkerContent>
</Marker>

API 参考

Marker

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

属性类型默认值描述
variant"default" | "border" | "separator""default"标记布局。
renderReactElement | function-渲染为其他元素，例如链接。
classNamestring-应用于根元素的其他类名。

MarkerIcon

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

属性类型默认值描述
classNamestring-应用于图标插槽的其他类名。

MarkerContent

标记文本内容。

属性类型默认值描述
classNamestring-应用于内容插槽的其他类名。