Augma

主题

Panel 面板 ​

轻盈的半透明容器，为相关信息建立层次。

基础用法 ​

设备概览

就绪

将重要信息轻轻放在视野之中。

示例进度72%
查看 Vue 源码
Vue · TypeScript
<script setup lang="ts">
import { AgmHudProgress, AgmHudStatus, AgmPanel } from 'augma'
</script>

<template>
  <AgmPanel title="设备概览" style="width: 100%; max-width: 360px">
    <template #actions>
      <AgmHudStatus>就绪</AgmHudStatus>
    </template>
    <p>将重要信息轻轻放在视野之中。</p>
    <AgmHudProgress label="示例进度" :value="72" />
  </AgmPanel>
</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 ​

属性类型默认值说明
titlestringundefined面板标题

插槽 ​

  • default：内容
  • header：自定义标题
  • actions：标题栏操作

键盘操作与使用边界 ​

面板本身不接管焦点；内容遵循自然的文档顺序。

安装 ​

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

复制可编辑源码：

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