Panel パネル

軽やかな半透明のコンテナ。関連する情報に階層を与えます。

基本的な使い方

インタラクティブプレビュー

デバイスの概要

同期の状態を確認し、進捗を更新します。

未同期

サンプルの進捗72%

Vue のソースを表示

Vue · TypeScript

<script setup lang="ts">
import { AgmButton, AgmHudProgress, AgmHudStatus, AgmPanel } from 'augma'
import { shallowRef } from 'vue'

const progress = shallowRef(72)
</script>

<template>
  <AgmPanel title="デバイスの概要" description="同期の状態を確認し、進捗を更新します。" style="width: 100%; max-width: 400px">
    <template #actions>
      <AgmHudStatus :tone="progress === 100 ? 'success' : 'neutral'">{{ progress === 100 ? '同期済み' : '未同期' }}</AgmHudStatus>
    </template>
    <AgmHudProgress label="サンプルの進捗" :value="progress" />
    <template #footer>
      <AgmButton variant="ghost" :disabled="progress === 72" @click="progress = 72">リセット</AgmButton>
      <AgmButton :disabled="progress === 100" @click="progress = 100">同期を完了</AgmButton>
    </template>
  </AgmPanel>
</template>

API

プロパティ	型	デフォルト	説明
description	string	undefined	タイトル下の補足説明。header をカスタマイズした場合はスロットが優先されます
title	string	undefined	パネルのタイトル

スロット

• default：内容
• header：カスタムのタイトルと説明
• actions：タイトルバーの操作（タイトルがなくても使用可）
• footer：下部の操作エリア

キーボード操作と利用上の注意

パネル自体はフォーカスを持ちません。内容は自然な文書の順序に従います。

インストール

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

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

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