@ebiz/designer-components 0.1.2 → 0.1.4

package/src/views/EbizSpace.vue

@@ -1,186 +1,186 @@
-<template>
-  <div class="space-demo">
-    <h2>EbizSpace 间距组件</h2>
-    
-    <h3>基本用法</h3>
-    <div class="demo-block">
-      <EbizSpace>
-        <EbizTdesignButton>按钮1</EbizTdesignButton>
-        <EbizTdesignButton>按钮2</EbizTdesignButton>
-        <EbizTdesignButton>按钮3</EbizTdesignButton>
-      </EbizSpace>
-    </div>
-    
-    <h3>垂直间距</h3>
-    <div class="demo-block">
-      <EbizSpace direction="vertical" style="width: 100%">
-        <EbizTdesignCard title="卡片1" summary="这是卡片1的内容">
-          卡片内容区域可以是文字、图片、表单、表格等形式信息内容
-        </EbizTdesignCard>
-        <EbizTdesignCard title="卡片2" summary="这是卡片2的内容">
-          卡片内容区域可以是文字、图片、表单、表格等形式信息内容
-        </EbizTdesignCard>
-      </EbizSpace>
-    </div>
-    
-    <h3>间距大小</h3>
-    <div class="demo-block">
-      <h4>小间距 (small)</h4>
-      <EbizSpace size="small">
-        <EbizTdesignButton>按钮1</EbizTdesignButton>
-        <EbizTdesignButton>按钮2</EbizTdesignButton>
-        <EbizTdesignButton>按钮3</EbizTdesignButton>
-      </EbizSpace>
-      
-      <h4>中等间距 (medium - 默认)</h4>
-      <EbizSpace size="medium">
-        <EbizTdesignButton>按钮1</EbizTdesignButton>
-        <EbizTdesignButton>按钮2</EbizTdesignButton>
-        <EbizTdesignButton>按钮3</EbizTdesignButton>
-      </EbizSpace>
-      
-      <h4>大间距 (large)</h4>
-      <EbizSpace size="large">
-        <EbizTdesignButton>按钮1</EbizTdesignButton>
-        <EbizTdesignButton>按钮2</EbizTdesignButton>
-        <EbizTdesignButton>按钮3</EbizTdesignButton>
-      </EbizSpace>
-      
-      <h4>自定义间距 (24px)</h4>
-      <EbizSpace :size="24">
-        <EbizTdesignButton>按钮1</EbizTdesignButton>
-        <EbizTdesignButton>按钮2</EbizTdesignButton>
-        <EbizTdesignButton>按钮3</EbizTdesignButton>
-      </EbizSpace>
-      
-      <h4>自定义行列间距 [16, 24]</h4>
-      <EbizSpace :size="[16, 24]" breakLine>
-        <EbizTdesignButton>按钮1</EbizTdesignButton>
-        <EbizTdesignButton>按钮2</EbizTdesignButton>
-        <EbizTdesignButton>按钮3</EbizTdesignButton>
-        <EbizTdesignButton>按钮4</EbizTdesignButton>
-        <EbizTdesignButton>按钮5</EbizTdesignButton>
-        <EbizTdesignButton>按钮6</EbizTdesignButton>
-      </EbizSpace>
-    </div>
-    
-    <h3>对齐方式</h3>
-    <div class="demo-block alignment">
-      <EbizSpace direction="vertical" size="large">
-        <div>
-          <span class="alignment-text">顶部对齐 (start):</span>
-          <EbizSpace align="start">
-            <div class="alignment-block small"></div>
-            <div class="alignment-block medium"></div>
-            <div class="alignment-block large"></div>
-          </EbizSpace>
-        </div>
-        
-        <div>
-          <span class="alignment-text">居中对齐 (center):</span>
-          <EbizSpace align="center">
-            <div class="alignment-block small"></div>
-            <div class="alignment-block medium"></div>
-            <div class="alignment-block large"></div>
-          </EbizSpace>
-        </div>
-        
-        <div>
-          <span class="alignment-text">底部对齐 (end):</span>
-          <EbizSpace align="end">
-            <div class="alignment-block small"></div>
-            <div class="alignment-block medium"></div>
-            <div class="alignment-block large"></div>
-          </EbizSpace>
-        </div>
-        
-        <div>
-          <span class="alignment-text">基线对齐 (baseline):</span>
-          <EbizSpace align="baseline">
-            <div class="alignment-block small">
-              <span style="position: relative; top: 16px;">文本</span>
-            </div>
-            <div class="alignment-block medium">
-              <span style="position: relative; top: 32px;">文本</span>
-            </div>
-            <div class="alignment-block large">
-              <span style="position: relative; top: 48px;">文本</span>
-            </div>
-          </EbizSpace>
-        </div>
-      </EbizSpace>
-    </div>
-    
-    <h3>自动换行</h3>
-    <div class="demo-block">
-      <EbizSpace breakLine>
-        <EbizTdesignButton v-for="i in 10" :key="i">按钮{{ i }}</EbizTdesignButton>
-      </EbizSpace>
-    </div>
-    
-    <h3>设置分隔符</h3>
-    <div class="demo-block">
-      <EbizSpace separator="|">
-        <span>文本1</span>
-        <span>文本2</span>
-        <span>文本3</span>
-        <span>文本4</span>
-      </EbizSpace>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { EbizSpace, EbizTdesignButton, EbizTdesignCard } from '../index.js';
-</script>
-
-<style scoped>
-.space-demo {
-  padding: 20px;
-}
-
-.demo-block {
-  margin-bottom: 20px;
-  padding: 16px;
-  border: 1px solid #e0e0e0;
-  border-radius: 4px;
-}
-
-.alignment-block {
-  background-color: #e0e6ff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.alignment-block.small {
-  width: 60px;
-  height: 40px;
-}
-
-.alignment-block.medium {
-  width: 80px;
-  height: 80px;
-}
-
-.alignment-block.large {
-  width: 100px;
-  height: 120px;
-}
-
-.alignment-text {
-  display: inline-block;
-  width: 150px;
-  font-weight: 600;
-}
-
-h3 {
-  margin-top: 30px;
-  margin-bottom: 10px;
-}
-
-h4 {
-  margin-top: 16px;
-  margin-bottom: 8px;
-}
+<template>
+  <div class="space-demo">
+    <h2>EbizSpace 间距组件</h2>
+    
+    <h3>基本用法</h3>
+    <div class="demo-block">
+      <EbizSpace>
+        <EbizTdesignButton>按钮1</EbizTdesignButton>
+        <EbizTdesignButton>按钮2</EbizTdesignButton>
+        <EbizTdesignButton>按钮3</EbizTdesignButton>
+      </EbizSpace>
+    </div>
+    
+    <h3>垂直间距</h3>
+    <div class="demo-block">
+      <EbizSpace direction="vertical" style="width: 100%">
+        <EbizTdesignCard title="卡片1" summary="这是卡片1的内容">
+          卡片内容区域可以是文字、图片、表单、表格等形式信息内容
+        </EbizTdesignCard>
+        <EbizTdesignCard title="卡片2" summary="这是卡片2的内容">
+          卡片内容区域可以是文字、图片、表单、表格等形式信息内容
+        </EbizTdesignCard>
+      </EbizSpace>
+    </div>
+    
+    <h3>间距大小</h3>
+    <div class="demo-block">
+      <h4>小间距 (small)</h4>
+      <EbizSpace size="small">
+        <EbizTdesignButton>按钮1</EbizTdesignButton>
+        <EbizTdesignButton>按钮2</EbizTdesignButton>
+        <EbizTdesignButton>按钮3</EbizTdesignButton>
+      </EbizSpace>
+      
+      <h4>中等间距 (medium - 默认)</h4>
+      <EbizSpace size="medium">
+        <EbizTdesignButton>按钮1</EbizTdesignButton>
+        <EbizTdesignButton>按钮2</EbizTdesignButton>
+        <EbizTdesignButton>按钮3</EbizTdesignButton>
+      </EbizSpace>
+      
+      <h4>大间距 (large)</h4>
+      <EbizSpace size="large">
+        <EbizTdesignButton>按钮1</EbizTdesignButton>
+        <EbizTdesignButton>按钮2</EbizTdesignButton>
+        <EbizTdesignButton>按钮3</EbizTdesignButton>
+      </EbizSpace>
+      
+      <h4>自定义间距 (24px)</h4>
+      <EbizSpace :size="24">
+        <EbizTdesignButton>按钮1</EbizTdesignButton>
+        <EbizTdesignButton>按钮2</EbizTdesignButton>
+        <EbizTdesignButton>按钮3</EbizTdesignButton>
+      </EbizSpace>
+      
+      <h4>自定义行列间距 [16, 24]</h4>
+      <EbizSpace :size="[16, 24]" breakLine>
+        <EbizTdesignButton>按钮1</EbizTdesignButton>
+        <EbizTdesignButton>按钮2</EbizTdesignButton>
+        <EbizTdesignButton>按钮3</EbizTdesignButton>
+        <EbizTdesignButton>按钮4</EbizTdesignButton>
+        <EbizTdesignButton>按钮5</EbizTdesignButton>
+        <EbizTdesignButton>按钮6</EbizTdesignButton>
+      </EbizSpace>
+    </div>
+    
+    <h3>对齐方式</h3>
+    <div class="demo-block alignment">
+      <EbizSpace direction="vertical" size="large">
+        <div>
+          <span class="alignment-text">顶部对齐 (start):</span>
+          <EbizSpace align="start">
+            <div class="alignment-block small"></div>
+            <div class="alignment-block medium"></div>
+            <div class="alignment-block large"></div>
+          </EbizSpace>
+        </div>
+        
+        <div>
+          <span class="alignment-text">居中对齐 (center):</span>
+          <EbizSpace align="center">
+            <div class="alignment-block small"></div>
+            <div class="alignment-block medium"></div>
+            <div class="alignment-block large"></div>
+          </EbizSpace>
+        </div>
+        
+        <div>
+          <span class="alignment-text">底部对齐 (end):</span>
+          <EbizSpace align="end">
+            <div class="alignment-block small"></div>
+            <div class="alignment-block medium"></div>
+            <div class="alignment-block large"></div>
+          </EbizSpace>
+        </div>
+        
+        <div>
+          <span class="alignment-text">基线对齐 (baseline):</span>
+          <EbizSpace align="baseline">
+            <div class="alignment-block small">
+              <span style="position: relative; top: 16px;">文本</span>
+            </div>
+            <div class="alignment-block medium">
+              <span style="position: relative; top: 32px;">文本</span>
+            </div>
+            <div class="alignment-block large">
+              <span style="position: relative; top: 48px;">文本</span>
+            </div>
+          </EbizSpace>
+        </div>
+      </EbizSpace>
+    </div>
+    
+    <h3>自动换行</h3>
+    <div class="demo-block">
+      <EbizSpace breakLine>
+        <EbizTdesignButton v-for="i in 10" :key="i">按钮{{ i }}</EbizTdesignButton>
+      </EbizSpace>
+    </div>
+    
+    <h3>设置分隔符</h3>
+    <div class="demo-block">
+      <EbizSpace separator="|">
+        <span>文本1</span>
+        <span>文本2</span>
+        <span>文本3</span>
+        <span>文本4</span>
+      </EbizSpace>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { EbizSpace, EbizTdesignButton, EbizTdesignCard } from '../index.js';
+</script>
+
+<style scoped>
+.space-demo {
+  padding: 20px;
+}
+
+.demo-block {
+  margin-bottom: 20px;
+  padding: 16px;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+}
+
+.alignment-block {
+  background-color: #e0e6ff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.alignment-block.small {
+  width: 60px;
+  height: 40px;
+}
+
+.alignment-block.medium {
+  width: 80px;
+  height: 80px;
+}
+
+.alignment-block.large {
+  width: 100px;
+  height: 120px;
+}
+
+.alignment-text {
+  display: inline-block;
+  width: 150px;
+  font-weight: 600;
+}
+
+h3 {
+  margin-top: 30px;
+  margin-bottom: 10px;
+}
+
+h4 {
+  margin-top: 16px;
+  margin-bottom: 8px;
+}
 </style>