Marker 会话标记
会话时间戳/系统事件标记:行内小状态、描边胶囊行、带文字分隔线。IM 里的「今天 10:00」时间分隔、「某某 加入群聊」系统事件、AI 流式「生成中」状态都归此类。
基础用法(三变体)
default / border / separator
variant="default"(小号次级文字,默认)适合系统便签;border 描边胶囊行适合状态徽标;separator 两侧伸缩线 + 中间文字,是时间戳分隔的主形态。
时间戳分隔(separator)
会话流里的时间分隔
分隔线语义纪律:带文字的分隔不得加 role="separator"——其可读名来自 aria-label、文字会被视为装饰,屏幕阅读器反而读不到「昨天/今天」。本组件不加该角色,线只是视觉装饰。
图标与流式状态
icon 槽 + role=status
slot="icon" 放装饰图标(包裹层 aria-hidden,内容承载语义)。流式/进度状态由宿主直接写 role="status"(浏览器原生 ARIA 反射,AT 播报状态变化)——组件不重复转发。
语义状态(status)与流式微光(shimmer)
info / success / warning / danger + 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-font | inherit |
--oas-marker-shimmer-from | var(--oas-color-text-secondary) |
--oas-marker-shimmer-to | var(--oas-color-text-primary) |
CSS 变量:--oas-marker-font(字号开口,默认 inherit)。部件:::part(marker) / ::part(icon) / ::part(content)。a11y 纪律:带文字分隔线不得加 role="separator"(其可读名来自 aria-label、文字被视为装饰)。