基础

Marker 内容标注

用于内容标注场景的 MoriUI 组件。

资源

导入

import { Marker, MarkerContent, MarkerIcon } from 'moriui'

组合方式

Marker 组合 MarkerIcon 与 MarkerContent，在时间线或内容流中提供轻量标注。

特性

当前公开能力包含 default、border、separator 三种变体；不登记 MoriUI 未实现的 shimmer。

状态与进度

动态状态使用 role=status/aria-live，进度需要明确文本或专用 Progress。

有标签的分隔线

separator 变体用作结构分隔时提供 role=separator 与可访问名称。

带边框标记

border 是视觉变化；状态含义仍需由文本或 aria-label 提供。

装饰图标

重复文字含义的图标应 aria-hidden，独立图标需要可访问名称。

交互标记

需要点击的 Marker 使用 as 渲染为 a/button，或把明确的 Button 放在标记中。

示例

概览

在内容流中标记时间。

今天

<script setup lang="ts">
  import { Marker, MarkerContent } from 'moriui'
</script>

<template>
  <Marker><MarkerContent>今天</MarkerContent></Marker>
</template>

变体

对比三种公开变体。

默认标记

描边标记

分隔标记

<script setup lang="ts">
  import { Marker, MarkerContent } from 'moriui'
</script>

<template>
  <div class="grid w-full max-w-md gap-3">
    <Marker><MarkerContent>默认标记</MarkerContent></Marker><Marker variant="border">
      <MarkerContent>描边标记</MarkerContent>
    </Marker><Marker variant="separator">
      <MarkerContent>分隔标记</MarkerContent>
    </Marker>
  </div>
</template>

状态

用文字与实时区域表达保存状态。

所有更改已保存

<script setup lang="ts">
  import { CheckCircle } from '@lucide/vue'
  import { Marker, MarkerContent, MarkerIcon } from 'moriui'
</script>

<template>
  <Marker role="status" aria-live="polite">
    <MarkerIcon><CheckCircle class="size-4" /></MarkerIcon><MarkerContent>所有更改已保存</MarkerContent>
  </Marker>
</template>

分隔线

在分隔线上放置可读标签。

3 条未读消息

<script setup lang="ts">
  import { Marker, MarkerContent } from 'moriui'
</script>

<template>
  <Marker variant="separator" role="separator" aria-label="未读消息">
    <MarkerContent>3 条未读消息</MarkerContent>
  </Marker>
</template>

描边

描边标记同时提供状态名称。

正在同步

<script setup lang="ts">
  import { Circle } from '@lucide/vue'
  import { Marker, MarkerContent, MarkerIcon } from 'moriui'
</script>

<template>
  <Marker variant="border" aria-label="同步状态">
    <MarkerIcon><Circle class="size-3 fill-current" /></MarkerIcon><MarkerContent>正在同步</MarkerContent>
  </Marker>
</template>

带图标

装饰图标与文本组合。

部署完成

<script setup lang="ts">
  import { CheckCircle } from '@lucide/vue'
  import { Marker, MarkerContent, MarkerIcon } from 'moriui'
</script>

<template>
  <Marker><MarkerIcon><CheckCircle class="size-4" aria-hidden="true" /></MarkerIcon><MarkerContent>部署完成</MarkerContent></Marker>
</template>

链接与按钮

在标记中放置明确操作。

查看完整活动记录打开

<script setup lang="ts">
  import { Button, Marker, MarkerContent } from 'moriui'
</script>

<template>
  <Marker>
    <MarkerContent>查看完整活动记录</MarkerContent><Button
      as="a"
      href="#marker-api"
      size="xs"
      variant="link"
    >
      打开
    </Button>
  </Marker>
</template>

API

属性	类型	默认值	说明
Marker variant	`'default' \| 'border' \| 'separator'`	`'default'`	标记的视觉结构。
Marker as	`string \| Component`	`'div'`	Marker 根元素。
Marker asChild	`boolean`	`false`	将样式合并到唯一子元素。
MarkerIcon class	`HTMLAttributes["class"]`	`undefined`	合并到标记图标区域的调用方类。
MarkerContent class	`HTMLAttributes["class"]`	`undefined`	合并到标记内容区域的调用方类。

无障碍说明

状态与进度使用合适的实时区域；分隔用途提供 separator 语义；图标不能成为唯一含义来源；交互标记使用 a 或 button。

关联组件

状态徽记内容分隔线