chore(space): split demo

jdf2e · Dec 13, 2023 · 3c38998 · 3c38998
1 parent e97a16f
commit 3c38998
Show file tree

Hide file tree

Showing 19 changed files with 243 additions and 334 deletions.
diff --git a/packages/nutui-taro-demo/src/layout/pages/space/basic.vue b/packages/nutui-taro-demo/src/layout/pages/space/basic.vue
@@ -0,0 +1,8 @@
+<template>
+  <nut-space>
+    <nut-button>Button</nut-button>
+    <nut-button>Button</nut-button>
+    <nut-button>Button</nut-button>
+    <nut-button>Button</nut-button>
+  </nut-space>
+</template>
diff --git a/packages/nutui-taro-demo/src/layout/pages/space/direction.vue b/packages/nutui-taro-demo/src/layout/pages/space/direction.vue
@@ -0,0 +1,8 @@
+<template>
+  <nut-space direction="vertical" fill>
+    <nut-button block>Button</nut-button>
+    <nut-button block>Button</nut-button>
+    <nut-button block>Button</nut-button>
+    <nut-button block>Button</nut-button>
+  </nut-space>
+</template>
diff --git a/packages/nutui-taro-demo/src/layout/pages/space/gutter.vue b/packages/nutui-taro-demo/src/layout/pages/space/gutter.vue
@@ -0,0 +1,14 @@
+<template>
+  <!-- gutter -->
+  <nut-space :gutter="20" style="margin-bottom: 10px">
+    <nut-button>Button</nut-button>
+    <nut-button>Button</nut-button>
+    <nut-button>Button</nut-button>
+  </nut-space>
+  <!-- css variable -->
+  <nut-space :style="{ '--nut-space-gap': '30px' }">
+    <nut-button>Button</nut-button>
+    <nut-button>Button</nut-button>
+    <nut-button>Button</nut-button>
+  </nut-space>
+</template>
diff --git a/packages/nutui-taro-demo/src/layout/pages/space/index.vue b/packages/nutui-taro-demo/src/layout/pages/space/index.vue
@@ -1,50 +1,38 @@
 <template>
-  <Demo>
-    <h2>基础用法</h2>
-    <nut-cell>
-      <nut-space>
-        <nut-button type="primary">按钮</nut-button>
-        <nut-button type="primary">按钮</nut-button>
-        <nut-button type="primary">按钮</nut-button>
-        <nut-button type="primary">按钮</nut-button>
-      </nut-space>
-    </nut-cell>
-    <h2>垂直排列</h2>
-    <nut-cell>
-      <nut-space direction="vertical" fill>
-        <nut-button type="primary" block>按钮</nut-button>
-        <nut-button type="primary" block>按钮</nut-button>
-        <nut-button type="primary" block>按钮</nut-button>
-        <nut-button type="primary" block>按钮</nut-button>
-      </nut-space>
-    </nut-cell>
-    <h2>自定义间距</h2>
-    <nut-cell>
-      <nut-space :gutter="20">
-        <nut-button type="primary">按钮</nut-button>
-        <nut-button type="primary">按钮</nut-button>
-        <nut-button type="primary">按钮</nut-button>
-      </nut-space>
-    </nut-cell>
-    <nut-cell :style="{ '--nut-space-gap': '30px' }">
-      <nut-space>
-        <nut-button type="primary">按钮</nut-button>
-        <nut-button type="primary">按钮</nut-button>
-        <nut-button type="primary">按钮</nut-button>
-      </nut-space>
-    </nut-cell>
-    <h2>自动换行</h2>
-    <nut-cell>
-      <nut-space wrap>
-        <nut-button type="primary" block>按钮</nut-button>
-        <nut-button type="primary" block>按钮</nut-button>
-        <nut-button type="primary" block>按钮</nut-button>
-        <nut-button type="primary" block>按钮</nut-button>
-        <nut-button type="primary" block>按钮</nut-button>
-        <nut-button type="primary" block>按钮</nut-button>
-        <nut-button type="primary" block>按钮</nut-button>
-        <nut-button type="primary" block>按钮</nut-button>
-      </nut-space>
-    </nut-cell>
+  <Demo class="full">
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('direction') }}</h2>
+    <Direction />
+
+    <h2>{{ t('gutter') }}</h2>
+    <Gutter />
+
+    <h2>{{ t('wrap') }}</h2>
+    <Wrap />
   </Demo>
 </template>
+
+<script lang="ts" setup>
+import { useTranslate } from '../../../utils';
+import Basic from './basic.vue';
+import Direction from './direction.vue';
+import Gutter from './gutter.vue';
+import Wrap from './wrap.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    direction: '垂直排列',
+    gutter: '自定义间距',
+    wrap: '自动换行'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    direction: 'Custom Direction',
+    gutter: 'Custom gutter',
+    wrap: 'Word wrap'
+  }
+});
+</script>
diff --git a/packages/nutui-taro-demo/src/layout/pages/space/wrap.vue b/packages/nutui-taro-demo/src/layout/pages/space/wrap.vue
@@ -0,0 +1,12 @@
+<template>
+  <nut-space wrap>
+    <nut-button block>Button</nut-button>
+    <nut-button block>Button</nut-button>
+    <nut-button block>Button</nut-button>
+    <nut-button block>Button</nut-button>
+    <nut-button block>Button</nut-button>
+    <nut-button block>Button</nut-button>
+    <nut-button block>Button</nut-button>
+    <nut-button block>Button</nut-button>
+  </nut-space>
+</template>
diff --git a/src/packages/__VUE/button/demo/index.vue b/src/packages/__VUE/button/demo/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="demo demo-button">
+  <Demo class="demo-button">
     <h2>{{ t('type') }}</h2>
     <Type />
 
@@ -26,7 +26,7 @@
 
     <h2>{{ t('color') }}</h2>
     <Color />
-  </div>
+  </Demo>
 </template>
 
 <script setup lang="ts">

diff --git a/src/packages/__VUE/divider/demo/index.vue b/src/packages/__VUE/divider/demo/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="demo full bg-w">
+  <Demo class="full bg-w">
     <h2>{{ t('basic') }}</h2>
     <Basic />
 
@@ -17,7 +17,7 @@
 
     <h2>{{ t('vertical') }}</h2>
     <Vertical />
-  </div>
+  </Demo>
 </template>
 
 <script setup lang="ts">

diff --git a/src/packages/__VUE/layout/demo/index.vue b/src/packages/__VUE/layout/demo/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="demo full">
+  <Demo class="full">
     <h2>{{ t('basic') }}</h2>
     <Basic />
 
@@ -8,7 +8,7 @@
 
     <h2>{{ t('flex') }}</h2>
     <Flex />
-  </div>
+  </Demo>
 </template>
 
 <script setup lang="ts">

diff --git a/src/packages/__VUE/space/demo.vue b/src/packages/__VUE/space/demo.vue
diff --git a/src/packages/__VUE/space/demo/basic.vue b/src/packages/__VUE/space/demo/basic.vue
@@ -0,0 +1,8 @@
+<template>
+  <nut-space>
+    <nut-button>Button</nut-button>
+    <nut-button>Button</nut-button>
+    <nut-button>Button</nut-button>
+    <nut-button>Button</nut-button>
+  </nut-space>
+</template>
diff --git a/src/packages/__VUE/space/demo/direction.vue b/src/packages/__VUE/space/demo/direction.vue
@@ -0,0 +1,8 @@
+<template>
+  <nut-space direction="vertical" fill>
+    <nut-button block>Button</nut-button>
+    <nut-button block>Button</nut-button>
+    <nut-button block>Button</nut-button>
+    <nut-button block>Button</nut-button>
+  </nut-space>
+</template>
diff --git a/src/packages/__VUE/space/demo/gutter.vue b/src/packages/__VUE/space/demo/gutter.vue
@@ -0,0 +1,14 @@
+<template>
+  <!-- gutter -->
+  <nut-space :gutter="20" style="margin-bottom: 10px">
+    <nut-button>Button</nut-button>
+    <nut-button>Button</nut-button>
+    <nut-button>Button</nut-button>
+  </nut-space>
+  <!-- css variable -->
+  <nut-space :style="{ '--nut-space-gap': '30px' }">
+    <nut-button>Button</nut-button>
+    <nut-button>Button</nut-button>
+    <nut-button>Button</nut-button>
+  </nut-space>
+</template>
diff --git a/src/packages/__VUE/space/demo/index.vue b/src/packages/__VUE/space/demo/index.vue
@@ -0,0 +1,38 @@
+<template>
+  <Demo class="full">
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('direction') }}</h2>
+    <Direction />
+
+    <h2>{{ t('gutter') }}</h2>
+    <Gutter />
+
+    <h2>{{ t('wrap') }}</h2>
+    <Wrap />
+  </Demo>
+</template>
+
+<script lang="ts" setup>
+import { useTranslate } from '@/sites/utils';
+import Basic from './basic.vue';
+import Direction from './direction.vue';
+import Gutter from './gutter.vue';
+import Wrap from './wrap.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    direction: '垂直排列',
+    gutter: '自定义间距',
+    wrap: '自动换行'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    direction: 'Custom Direction',
+    gutter: 'Custom gutter',
+    wrap: 'Word wrap'
+  }
+});
+</script>
diff --git a/src/packages/__VUE/space/demo/wrap.vue b/src/packages/__VUE/space/demo/wrap.vue
@@ -0,0 +1,12 @@
+<template>
+  <nut-space wrap>
+    <nut-button block>Button</nut-button>
+    <nut-button block>Button</nut-button>
+    <nut-button block>Button</nut-button>
+    <nut-button block>Button</nut-button>
+    <nut-button block>Button</nut-button>
+    <nut-button block>Button</nut-button>
+    <nut-button block>Button</nut-button>
+    <nut-button block>Button</nut-button>
+  </nut-space>
+</template>