Button 按钮

轻触，即刻响应。用于触发操作与状态切换。

基础用法

交互预览

已操作 0 次

查看 Vue 源码

Vue · TypeScript

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

const count = shallowRef(0)
</script>

<template>
  <div class="example-demo">
    <div class="example-row">
      <AgmButton @click="count++">连接设备</AgmButton>
      <AgmButton variant="outline" @click="count++">次要操作</AgmButton>
      <AgmButton variant="ghost" @click="count++">轻量操作</AgmButton>
      <AgmButton loading>加载中</AgmButton>
      <AgmButton disabled>不可用</AgmButton>
    </div>
    <AgmHudStatus :tone="count ? 'success' : 'neutral'">
      已操作 <strong class="example-count">{{ count }}</strong> 次
    </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;
}
/* The readout sits on its own line, so the button row never moves as the count grows. */
.example-demo {
  display: grid;
  justify-items: start;
  gap: 20px;
}
.example-count {
  color: var(--agm-text);
  font-variant-numeric: tabular-nums;
}
</style>

API

属性	类型	默认值	说明
variant	'primary' | 'outline' | 'ghost'	'primary'	视觉层级
disabled	boolean	false	禁止操作
loading	boolean	false	处理中，同时禁止重复操作
type	'button' | 'submit' | 'reset'	'button'	原生按钮类型

插槽

• default：按钮文字

键盘操作与使用边界

Tab 聚焦；Enter 或 Space 激活。加载中与禁用状态不接受操作。

安装

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

复制可编辑源码：

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