Skip to content

Marker 会话标记 ​

会话时间戳/系统事件标记:行内小状态、描边胶囊行、带文字分隔线。IM 里的「今天 10:00」时间分隔、「某某 加入群聊」系统事件、AI 流式「生成中」状态都归此类。

基础用法(三变体) ​

default / border / separator

系统消息:会话已创建新成员加入今天 10:00

variant="default"(小号次级文字,默认)适合系统便签;border 描边胶囊行适合状态徽标;separator 两侧伸缩线 + 中间文字,是时间戳分隔的主形态。

时间戳分隔(separator) ​

会话流里的时间分隔

昨天昨天最后的消息。今天 10:00今天的新消息。

分隔线语义纪律:带文字的分隔不得加 role="separator"——其可读名来自 aria-label、文字会被视为装饰,屏幕阅读器反而读不到「昨天/今天」。本组件不加该角色,线只是视觉装饰。

图标与流式状态 ​

icon 槽 + role=status

正在生成回答… 已全部同步

slot="icon" 放装饰图标(包裹层 aria-hidden,内容承载语义)。流式/进度状态由宿主直接写 role="status"(浏览器原生 ARIA 反射,AT 播报状态变化)——组件不重复转发。

语义状态(status)与流式微光(shimmer) ​

info / success / warning / danger + shimmer

已连接服务器同步完成(12 项)存储空间不足 10%连接已断开今天 10:00正在生成回答…(shimmer 流式微光)

status(info / success / warning / danger)是语义状态档:文字、描边(border)与分隔线(separator)取语义色 token,暗色下自动适配。shimmer 布尔在场开启流式微光(文本渐变扫过,只动背景位置不改尺寸;prefers-reduced-motion 降级为静态文字)。status 只改视觉语义,不改 ARIA role——流式播报仍由宿主声明 role="status"。

空态 ​

空内容

第一行(default)无内容整件隐藏;第二行 separator 保留分隔线本体(线是它的存在意义)。

API ​

oas-marker ​

属性 ​

属性说明类型默认值
shimmer布尔在场:流式微光(文本渐变扫过;prefers-reduced-motion 降级为静态文字)——
status语义状态档:info / success / warning / danger——文字、描边与分隔线取语义色 token(暗色自动适配;不改 ARIA role,流式播报仍由宿主声明)——
variant变体:default(小号次级文字,默认)/ border(描边胶囊行)/ separator(两侧伸缩线 + 中间文字,时间戳分隔主形态);空内容时 default/border 整件隐藏、separator 保留分隔线本体——

插槽 ​

名称说明
默认文字内容
icon装饰图标槽(包裹层 aria-hidden;流式/进度状态由宿主直接写 role=status,组件不重复转发)

CSS 变量 ​

CSS 变量默认值
--oas-marker-fontinherit
--oas-marker-shimmer-fromvar(--oas-color-text-secondary)
--oas-marker-shimmer-tovar(--oas-color-text-primary)

CSS 变量:--oas-marker-font(字号开口,默认 inherit)。部件:::part(marker) / ::part(icon) / ::part(content)。a11y 纪律:带文字分隔线不得加 role="separator"(其可读名来自 aria-label、文字被视为装饰)。

基于 MIT OR Apache-2.0 双许可发布