20261007220117

code/g3soft-libs/docs/examples/button/basic.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+import { G3Button } from '@g3soft/ui'
+</script>
+
+<template>
+  <G3Button>默认按钮</G3Button>
+  <G3Button type="primary">主要按钮</G3Button>
+</template>

code/g3soft-libs/docs/examples/button/block.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { G3Button } from '@g3soft/ui'
+</script>
+
+<template>
+  <div class="demo-block">
+    <G3Button type="primary" block>撑满宽度</G3Button>
+  </div>
+</template>
+
+<style scoped>
+.demo-block {
+  width: 100%;
+}
+</style>

code/g3soft-libs/docs/examples/button/icon.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { G3Button } from '@g3soft/ui'
+</script>
+
+<template>
+  <G3Button type="primary">
+    <template #icon>+</template>
+    新增
+  </G3Button>
+  <G3Button icon-only title="搜索">🔍</G3Button>
+</template>

code/g3soft-libs/docs/examples/button/size.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { G3Button } from '@g3soft/ui'
+</script>
+
+<template>
+  <G3Button type="primary" size="small">小</G3Button>
+  <G3Button type="primary">中</G3Button>
+  <G3Button type="primary" size="large">大</G3Button>
+</template>

code/g3soft-libs/docs/examples/button/state.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { G3Button } from '@g3soft/ui'
+
+const loading = ref(false)
+
+function handleAsync() {
+  if (loading.value) return
+  loading.value = true
+  setTimeout(() => {
+    loading.value = false
+  }, 1500)
+}
+</script>
+
+<template>
+  <G3Button type="primary" :loading="loading" @click="handleAsync">点击加载</G3Button>
+  <G3Button disabled>禁用</G3Button>
+  <G3Button type="primary" disabled>禁用（主要）</G3Button>
+</template>

code/g3soft-libs/docs/examples/button/type.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { G3Button } from '@g3soft/ui'
+</script>
+
+<template>
+  <G3Button type="success">成功按钮</G3Button>
+  <G3Button type="warning">警告按钮</G3Button>
+  <G3Button type="danger">危险按钮</G3Button>
+  <G3Button type="text">文字按钮</G3Button>
+  <G3Button type="link">链接按钮</G3Button>
+</template>