Skip to content

ak-status 状态标记

用于表达职业、稀有度、部署状态和终端连接状态。ak-tag 适合短标签,ak-status 适合带说明的实时状态。

PREVIEW / STATUS/BASICTags and terminal status
先锋 高级资深干员 感染者 未编入
Online 作战终端已连接 Caution 理智低于警戒值 Offline 信号中断
SOURCE / HTML
html
<div class="ak-tag-group" aria-label="干员标签">
  <span class="ak-tag">先锋</span>
  <span class="ak-tag ak-tag--advanced">高级资深干员</span>
  <span class="ak-tag ak-tag--danger">感染者</span>
  <span class="ak-tag ak-tag--neutral">未编入</span>
</div>

<div class="ak-status-group" aria-label="终端状态">
  <span class="ak-status">
    <span class="ak-status__signal" aria-hidden="true"></span>
    <span class="ak-status__label">Online</span>
    <span class="ak-status__detail">作战终端已连接</span>
  </span>
  <span class="ak-status ak-status--warning">
    <span class="ak-status__signal" aria-hidden="true"></span>
    <span class="ak-status__label">Caution</span>
    <span class="ak-status__detail">理智低于警戒值</span>
  </span>
  <span class="ak-status ak-status--offline">
    <span class="ak-status__signal" aria-hidden="true"></span>
    <span class="ak-status__label">Offline</span>
    <span class="ak-status__detail">信号中断</span>
  </span>
</div>

Tag variants

ClassUse case
.ak-tag主状态、职业或默认分类
.ak-tag--advanced高稀有度、警戒或重要内容
.ak-tag--danger危险、感染、禁止状态
.ak-tag--neutral未编入、离线、次要状态

通过 --ak-tag-signal--ak-tag-text--ak-tag-surface 覆盖局部视觉。

Status variants

ak-status 提供 warningcriticaloffline 修饰类。状态点包含低频脉冲,并自动遵循 prefers-reduced-motion

Unofficial Arknights-inspired interface study.