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 で変化を控えめに読み上げます。色だけに頼らず、必ずテキストを添えてください。

インストール

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

編集可能なソースをコピー：

pnpm dlx [email protected] add https://augma.yyj.moe/r/hud-status.json