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