Augma

主题

HudStatus 状态 ​

用文字与颜色共同表达状态变化。

基础用法 ​

已连接等待连接连接中断未连接
查看 Vue 源码
Vue · TypeScript
<script setup lang="ts">
import { AgmHudStatus } from 'augma'
</script>

<template>
  <div class="example-row">
    <AgmHudStatus>已连接</AgmHudStatus>
    <AgmHudStatus tone="warning">等待连接</AgmHudStatus>
    <AgmHudStatus tone="danger">连接中断</AgmHudStatus>
    <AgmHudStatus tone="neutral">未连接</AgmHudStatus>
  </div>
</template>

<style scoped>
.example-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.example-stack {
  display: grid;
  gap: 24px;
  width: 100%;
  max-width: 360px;
}
</style>

API ​

属性类型默认值说明
tone'success' | 'warning' | 'danger' | 'neutral''success'状态语义

插槽 ​

  • default：状态文字

键盘操作与使用边界 ​

使用 role=status 温和播报动态变化；始终提供文字，不单靠颜色。

安装 ​

ts
import { AgmHudStatus } from 'augma'
import 'augma/style.css'

复制可编辑源码：

sh
pnpm dlx [email protected] add https://augma.yunyoujun.cn/r/hud-status.json