29 lines
1.1 KiB
Vue
29 lines
1.1 KiB
Vue
<script setup lang="ts">
|
||
// 组内按钮仍各自保留 type / size；混排时建议统一变体
|
||
import { G3Button, G3ButtonGroup, G3Space } from '@g3soft/ui'
|
||
import { AlignCenter, AlignLeft, AlignRight } from '@lucide/vue'
|
||
</script>
|
||
|
||
<template>
|
||
<G3Space direction="vertical" :size="12" style="display: flex">
|
||
<G3ButtonGroup>
|
||
<G3Button type="outline">描边组</G3Button>
|
||
<G3Button type="outline">描边组</G3Button>
|
||
<G3Button type="outline">描边组</G3Button>
|
||
</G3ButtonGroup>
|
||
|
||
<!-- 图标工具条：只保留首尾圆角 -->
|
||
<G3ButtonGroup>
|
||
<G3Button type="icon" aria-label="左对齐"><template #icon><AlignLeft /></template></G3Button>
|
||
<G3Button type="icon" aria-label="居中"><template #icon><AlignCenter /></template></G3Button>
|
||
<G3Button type="icon" aria-label="右对齐"><template #icon><AlignRight /></template></G3Button>
|
||
</G3ButtonGroup>
|
||
|
||
<G3ButtonGroup>
|
||
<G3Button size="small" type="outline">小号</G3Button>
|
||
<G3Button size="small" type="outline">小号</G3Button>
|
||
<G3Button size="small" type="outline">小号</G3Button>
|
||
</G3ButtonGroup>
|
||
</G3Space>
|
||
</template>
|