test: 💍 线性布局demo补充

vusion · Jan 13, 2024 · db531af · db531af
1 parent be0bc43
commit db531af
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 32 deletions.
diff --git a/src-vusion/styles/theme.css b/src-vusion/styles/theme.css
@@ -61,6 +61,11 @@
   --van-space-base: var(
     --van-space-baset
   ); /* @desc 布局内各元素之间的外间距, 如：1px */ /* @prefix van */
+  --van-space-shrink: -1px;
+  --van-space-mini: 4px;
+  --van-space-small: 10px;
+  --van-space-large: 30px;
+
 
   /* @component van-panel */
   --van-panel-background-color: #fff; /* @type color */ /* @desc panel背景色 */ /* @depStaticStyles ["background-color"] */

diff --git a/src/linear-layout/api.ts b/src/linear-layout/api.ts
@@ -56,7 +56,7 @@ namespace nasl.ui {
       },
       if: _ => _.justify !== 'space-between' && _.justify !== 'space-around'
     })
-    gap: 'shrink' | 'none' | 'small' | 'normal' | 'large' = 'normal';
+    gap: 'shrink' | 'none' | 'mini' | 'small' | 'large' = 'none';
     @Prop<VanLinearLayoutOptions, 'layout'>({
       group: '主要属性',
       title: '子元素展示方式',

diff --git a/src/linear-layout/demo/index.vue b/src/linear-layout/demo/index.vue
@@ -1,43 +1,62 @@
 <template>
   <demo-section>
-    <demo-block>
-      <div>单行排布</div>
-
-      <van-linear-layout ref="linear1" direction="horizontal" mode="flex" justify="start" alignment="start">
-          <van-text :ref="`text2`" text="普通文本"></van-text>
-          <van-button :ref="`button1`" type="default" size="middle" text="确定" squareroud="round"></van-button>
-      </van-linear-layout>
+    <demo-block title="行内">
+      <div style="height: 100px; background-color: red;">
+          <van-linear-layout mode="inline" style="width: 100px; height: 50px; background-color: blue;">
+          </van-linear-layout>
+          <van-linear-layout mode="inline" style="width: 100px; height: 50px; background-color: green;">
+          </van-linear-layout>
+        </div>
     </demo-block>
 
-    <demo-block>
-      <div>多行排布</div>
-      <van-linear-layout direction="vertical">
-          <van-linear-layout>
+    <demo-block title="块级">
+      <div style="height: 100px; background-color: red;">
+          <van-linear-layout mode="block" style="width: 100px; height: 50px; background-color: blue;">
           </van-linear-layout>
-          <van-linear-layout>
+          <van-linear-layout mode="block" style="width: 100px; height: 50px; background-color: green;">
           </van-linear-layout>
+        </div>
+    </demo-block>
+
+    <demo-block title="弹性--单行排布">
+      <van-linear-layout mode="flex" direction="horizontal" gap="small" justify="center" alignment="center" style="height: 100px; background-color: red;">
+          <div style="width: 100px; height: 50px; background-color: blue;">
+          </div>
+          <div style="width: 100px; height: 50px; background-color: green;">
+          </div>
       </van-linear-layout>
     </demo-block>
 
-    <demo-block>
-      <div>两端排布</div>
+    <demo-block title="多行排布">
+      <van-linear-layout mode="flex" direction="vertical" gap="small" justify="center" alignment="center" style="background-color: red;">
+          <div style="width: 100px; height: 50px; background-color: blue;">
+          </div>
+          <div style="width: 100px; height: 50px; background-color: green;">
+          </div>
+      </van-linear-layout>
+    </demo-block>
 
-      <van-linear-layout justify="space-between">
-        <van-linear-layout>
-        </van-linear-layout>
-        <van-linear-layout>
-        </van-linear-layout>
+    <demo-block title="两端排布">
+      <van-linear-layout mode="flex" direction="horizontal" justify="space-between" alignment="center" style="height: 100px; background-color: red;">
+        <div style="width: 100px; height: 50px; background-color: blue;">
+          </div>
+          <div style="width: 100px; height: 50px; background-color: green;">
+          </div>
       </van-linear-layout>
     </demo-block>
 
+    <demo-block title="平均排布">
+      <van-linear-layout mode="flex" direction="horizontal" justify="space-around" alignment="center" style="height: 100px; background-color: red;">
+        <div style="width: 100px; height: 50px; background-color: blue;">
+          </div>
+          <div style="width: 100px; height: 50px; background-color: green;">
+          </div>
+      </van-linear-layout>
+    </demo-block>
   </demo-section>
-
 </template>
 
 <script>
 export default {
-  mounted() {
-    this.$refs.linear1.openLoading()
-  }
 }
 </script>
diff --git a/src/linear-layout/index.less b/src/linear-layout/index.less
@@ -29,11 +29,11 @@
 }
 
 .van-linear-layout[direction="horizontal"][gap="shrink"]>*:not(:last-child) {
-  margin-right: var(--space-shrink);
+  margin-right: var(--van-space-shrink);
 }
 
 .van-linear-layout[direction="vertical"][gap="shrink"]>*:not(:last-child) {
-  margin-bottom: var(--space-shrink);
+  margin-bottom: var(--van-space-shrink);
 }
 
 .van-linear-layout[direction="horizontal"][gap="shrink"]>*:hover {
@@ -49,27 +49,27 @@
 }
 
 .van-linear-layout[direction="horizontal"][gap="mini"]>*:not(:last-child) {
-  margin-right: var(--space-mini);
+  margin-right: var(--van-space-mini);
 }
 
 .van-linear-layout[direction="vertical"][gap="mini"]>*:not(:last-child) {
-  margin-bottom: var(--space-mini);
+  margin-bottom: var(--van-space-mini);
 }
 
 .van-linear-layout[direction="horizontal"][gap="small"]>*:not(:last-child) {
-  margin-right: var(--space-small);
+  margin-right: var(--van-space-small);
 }
 
 .van-linear-layout[direction="vertical"][gap="small"]>*:not(:last-child) {
-  margin-bottom: var(--space-small);
+  margin-bottom: var(--van-space-small);
 }
 
 .van-linear-layout[direction="horizontal"][gap="large"]>*:not(:last-child) {
-  margin-right: var(--space-large);
+  margin-right: var(--van-space-large);
 }
 
 .van-linear-layout[direction="vertical"][gap="large"]>*:not(:last-child) {
-  margin-bottom: var(--space-large);
+  margin-bottom: var(--van-space-large);
 }
 
 /* @deprecated */

diff --git a/src/linear-layout/test/__snapshots__/demo.spec.js.snap b/src/linear-layout/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders demo correctly 1`] = `
+<div>
+  <div>
+    <div style="height: 100px; background-color: red;">
+      <div type="" direction="horizontal" vusion-slot-name="default" class="van-linear-layout" mode="inline" style="width: 100px; height: 50px; background-color: blue;"></div>
+      <div type="" direction="horizontal" vusion-slot-name="default" class="van-linear-layout" mode="inline" style="width: 100px; height: 50px; background-color: green;"></div>
+    </div>
+  </div>
+  <div>
+    <div style="height: 100px; background-color: red;">
+      <div type="" direction="horizontal" vusion-slot-name="default" class="van-linear-layout" mode="block" style="width: 100px; height: 50px; background-color: blue;"></div>
+      <div type="" direction="horizontal" vusion-slot-name="default" class="van-linear-layout" mode="block" style="width: 100px; height: 50px; background-color: green;"></div>
+    </div>
+  </div>
+  <div>
+    <div type="" direction="horizontal" vusion-slot-name="default" class="van-linear-layout" mode="flex" gap="small" justify="center" alignment="center" style="height: 100px; background-color: red;">
+      <div style="width: 100px; height: 50px; background-color: blue;"></div>
+      <div style="width: 100px; height: 50px; background-color: green;"></div>
+    </div>
+  </div>
+  <div>
+    <div type="" direction="vertical" vusion-slot-name="default" class="van-linear-layout" mode="flex" gap="small" justify="center" alignment="center" style="background-color: red;">
+      <div style="width: 100px; height: 50px; background-color: blue;"></div>
+      <div style="width: 100px; height: 50px; background-color: green;"></div>
+    </div>
+  </div>
+  <div>
+    <div type="" direction="horizontal" vusion-slot-name="default" class="van-linear-layout" mode="flex" justify="space-between" alignment="center" style="height: 100px; background-color: red;">
+      <div style="width: 100px; height: 50px; background-color: blue;"></div>
+      <div style="width: 100px; height: 50px; background-color: green;"></div>
+    </div>
+  </div>
+  <div>
+    <div type="" direction="horizontal" vusion-slot-name="default" class="van-linear-layout" mode="flex" justify="space-around" alignment="center" style="height: 100px; background-color: red;">
+      <div style="width: 100px; height: 50px; background-color: blue;"></div>
+      <div style="width: 100px; height: 50px; background-color: green;"></div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/linear-layout/test/demo.spec.js b/src/linear-layout/test/demo.spec.js
@@ -0,0 +1,4 @@
+import Demo from '../demo'
+import { snapshotDemo } from '../../../test/demo';
+
+snapshotDemo(Demo);