u

code/base-project/base-vue/packages/ao-design/src/button/demo.vue

@@ -0,0 +1,121 @@
+<template>
+  <!-- 状态按钮 (solid) -->
+  <div style="display: flex; gap: 8px; margin-bottom: 16px;">
+    <AButton status="normal">
+      Normal
+    </AButton>
+    <AButton status="primary">
+      主按钮
+    </AButton>
+    <AButton status="warning">
+      警告
+    </AButton>
+    <AButton status="danger">
+      危险
+    </AButton>
+    <AButton status="success">
+      成功
+    </AButton>
+  </div>
+
+  <div style="display: flex; gap: 8px; margin-bottom: 16px;">
+    <AButton status="normal" type="outline">
+      Normal
+    </AButton>
+    <AButton status="primary" type="outline">
+      主按钮
+    </AButton>
+    <AButton status="warning" type="outline">
+      警告
+    </AButton>
+    <AButton status="danger" type="outline">
+      危险
+    </AButton>
+    <AButton status="success" type="outline">
+      成功
+    </AButton>
+  </div>
+
+  <div style="display: flex; gap: 8px; margin-bottom: 16px;">
+    <AButton status="normal" type="dashed">
+      Normal
+    </AButton>
+    <AButton status="primary" type="dashed">
+      主按钮
+    </AButton>
+    <AButton status="warning" type="dashed">
+      警告
+    </AButton>
+    <AButton status="danger" type="dashed">
+      危险
+    </AButton>
+    <AButton status="success" type="dashed">
+      成功
+    </AButton>
+  </div>
+
+  <div style="display: flex; gap: 8px; margin-bottom: 16px;">
+    <AButton status="normal" type="text">
+      Normal
+    </AButton>
+    <AButton status="primary" type="text">
+      主按钮
+    </AButton>
+    <AButton status="warning" type="text">
+      警告
+    </AButton>
+    <AButton status="danger" type="text">
+      危险
+    </AButton>
+    <AButton status="success" type="text">
+      成功
+    </AButton>
+  </div>
+
+  <div style="display: flex; gap: 8px; margin-bottom: 16px;">
+    <AButton status="normal" disabled>
+      禁用
+    </AButton>
+    <AButton status="primary" disabled>
+      禁用
+    </AButton>
+    <AButton type="outline" disabled>
+      禁用
+    </AButton>
+    <AButton type="dashed" disabled>
+      禁用
+    </AButton>
+    <AButton type="text" disabled>
+      禁用
+    </AButton>
+  </div>
+
+  <div style="display: flex; gap: 8px; margin-bottom: 16px;">
+    <AButton status="normal" loading>
+      loading
+    </AButton>
+    <AButton status="primary" loading>
+      loading
+    </AButton>
+    <AButton type="outline" loading>
+      loading
+    </AButton>
+    <AButton type="dashed" loading>
+      loading
+    </AButton>
+    <AButton type="text" loading>
+      loading
+    </AButton>
+  </div>
+  <div style="display: flex; gap: 8px; margin-bottom: 16px;">
+    <AButton status="primary" size="small">
+      small
+    </AButton>
+    <AButton status="primary" size="medium">
+      medium
+    </AButton>
+    <AButton status="primary" size="large">
+      large
+    </AButton>
+  </div>
+</template>