From cbe373c061539c1bec516428348d247e800131b3 Mon Sep 17 00:00:00 2001
From: Hooray <304327508@qq.com>
Date: Sat, 2 Aug 2025 03:54:26 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=8D=95=E9=80=89=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E7=BB=84=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component_built_in_example/button.vue      | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/src/views/component_built_in_example/button.vue b/src/views/component_built_in_example/button.vue
index bd786468..7bc32684 100644
--- a/src/views/component_built_in_example/button.vue
+++ b/src/views/component_built_in_example/button.vue
@@ -3,6 +3,10 @@ meta:
   enabled: false
 </route>
 
+<script setup lang="ts">
+const hand = ref<'peace' | 'rock' | 'paper'>('peace')
+</script>
+
 <template>
   <div>
     <FaPageHeader title="按钮" description="FaButton" />
@@ -64,6 +68,20 @@ meta:
             删除
           </FaButton>
         </FaButtonGroup>
+        <div class="flex flex-col gap-2">
+          <div>单选按钮组</div>
+          <FaButtonGroup class="gap-0 space-x-[-1px]">
+            <FaButton :variant="hand === 'peace' ? 'default' : 'outline'" size="icon" :class="{ 'z-1': hand === 'peace' }" @click="hand = 'peace'">
+              <FaIcon name="i-fa-regular:hand-peace" class="size-4" />
+            </FaButton>
+            <FaButton :variant="hand === 'rock' ? 'default' : 'outline'" size="icon" :class="{ 'z-1': hand === 'rock' }" @click="hand = 'rock'">
+              <FaIcon name="i-fa-regular:hand-rock" class="size-4" />
+            </FaButton>
+            <FaButton :variant="hand === 'paper' ? 'default' : 'outline'" size="icon" :class="{ 'z-1': hand === 'paper' }" @click="hand = 'paper'">
+              <FaIcon name="i-fa-regular:hand-paper" class="size-4" />
+            </FaButton>
+          </FaButtonGroup>
+        </div>
       </div>
     </FaPageMain>
   </div>