Panel

A light, translucent container that gives related information structure.

Basic usage

Live preview

Device overview

Check the sync status and update the progress.

Not synced

Sample progress72%

View Vue source

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="Device overview" description="Check the sync status and update the progress." style="width: 100%; max-width: 400px">
    <template #actions>
      <AgmHudStatus :tone="progress === 100 ? 'success' : 'neutral'">{{ progress === 100 ? 'Synced' : 'Not synced' }}</AgmHudStatus>
    </template>
    <AgmHudProgress label="Sample progress" :value="progress" />
    <template #footer>
      <AgmButton variant="ghost" :disabled="progress === 72" @click="progress = 72">Reset</AgmButton>
      <AgmButton :disabled="progress === 100" @click="progress = 100">Finish sync</AgmButton>
    </template>
  </AgmPanel>
</template>

API

Prop	Type	Default	Description
description	string	undefined	Supporting text under the title; a custom header slot replaces it
title	string	undefined	Panel title

Slots

• default: content
• header: custom title and description
• actions: header actions, also available without a title
• footer: bottom action area

Keyboard and usage notes

The panel does not take focus itself; its content follows the natural document order.

Installation

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

Copy the editable source:

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