Augma

主题

IconButton 图标按钮 ​

圆形操作入口，为图标提供明确的可访问名称。

基础用法 ​

未标记
查看 Vue 源码
Vue · TypeScript
<script setup lang="ts">
import { AgmIconButton } from 'augma'
import { shallowRef } from 'vue'

const active = shallowRef(false)
</script>

<template>
  <div class="example-row">
    <AgmIconButton
      label="切换标记"
      :pressed="active"
      @click="active = !active"
    />
    <span>{{ active ? '已标记' : '未标记' }}</span>
    <AgmIconButton label="不可用操作" disabled />
  </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;
}
</style>

API ​

属性类型默认值说明
labelstring必填可访问名称
disabledbooleanfalse禁止操作
pressedbooleanundefined可选的切换状态

插槽 ​

  • default：图标，默认加号

键盘操作与使用边界 ​

Tab 聚焦；Enter 或 Space 激活。label 必须描述动作。

安装 ​

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