chore(cell): split demo (#2853)

jdf2e · Jan 20, 2024 · b6cfca9 · b6cfca9
1 parent 345f3fe
commit b6cfca9
Show file tree

Hide file tree

Showing 29 changed files with 344 additions and 693 deletions.
diff --git a/packages/nutui-taro-demo/src/basic/pages/cell/align.vue b/packages/nutui-taro-demo/src/basic/pages/cell/align.vue
@@ -0,0 +1,3 @@
+<template>
+  <nut-cell desc-text-align="left" desc="Description"></nut-cell>
+</template>
diff --git a/packages/nutui-taro-demo/src/basic/pages/cell/basic.vue b/packages/nutui-taro-demo/src/basic/pages/cell/basic.vue
@@ -0,0 +1,11 @@
+<template>
+  <nut-cell title="Title" desc="Description"></nut-cell>
+  <nut-cell title="Title" sub-title="Subtitle" desc="Description"></nut-cell>
+  <nut-cell title="Click Test" @click="onClick"></nut-cell>
+  <nut-cell title="Round Radius = 0" :round-radius="0"></nut-cell>
+</template>
+<script setup lang="ts">
+const onClick = () => {
+  console.log('click');
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/basic/pages/cell/center.vue b/packages/nutui-taro-demo/src/basic/pages/cell/center.vue
@@ -0,0 +1,3 @@
+<template>
+  <nut-cell center title="Title" sub-title="Subtitle" desc="Description"></nut-cell>
+</template>
diff --git a/packages/nutui-taro-demo/src/basic/pages/cell/desc.vue b/packages/nutui-taro-demo/src/basic/pages/cell/desc.vue
@@ -0,0 +1,7 @@
+<template>
+  <nut-cell title="Title">
+    <template #desc>
+      <span style="color: red">Description Slot</span>
+    </template>
+  </nut-cell>
+</template>
diff --git a/packages/nutui-taro-demo/src/basic/pages/cell/group.vue b/packages/nutui-taro-demo/src/basic/pages/cell/group.vue
@@ -0,0 +1,6 @@
+<template>
+  <nut-cell-group title="CellGroup Title" desc="CellGroup Description">
+    <nut-cell title="Cell"></nut-cell>
+    <nut-cell title="Link Style" is-link></nut-cell>
+  </nut-cell-group>
+</template>
diff --git a/packages/nutui-taro-demo/src/basic/pages/cell/icon.vue b/packages/nutui-taro-demo/src/basic/pages/cell/icon.vue
@@ -0,0 +1,10 @@
+<template>
+  <nut-cell title="Icon Slot" desc="Description">
+    <template #icon>
+      <My />
+    </template>
+  </nut-cell>
+</template>
+<script setup lang="ts">
+import { My } from '@nutui/icons-vue-taro';
+</script>
diff --git a/packages/nutui-taro-demo/src/basic/pages/cell/index.vue b/packages/nutui-taro-demo/src/basic/pages/cell/index.vue
@@ -1,82 +1,74 @@
 <template>
   <Demo>
-    <h2>基础用法</h2>
-    <nut-cell title="我是标题" desc="描述文字"></nut-cell>
-    <nut-cell title="我是标题" sub-title="副标题描述" desc="描述文字"></nut-cell>
-    <nut-cell title="点击测试" @click="click"></nut-cell>
-    <nut-cell title="圆角设置 0" round-radius="0"></nut-cell>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
 
-    <h2>尺寸设置 large</h2>
-    <nut-cell size="large" title="我是标题" desc="描述文字"></nut-cell>
-    <nut-cell size="large" title="我是标题" sub-title="副标题描述" desc="描述文字"></nut-cell>
+    <h2>{{ t('size') }}</h2>
+    <Size />
 
-    <h2>直接使用插槽(slot)</h2>
+    <h2>{{ t('slot') }}</h2>
+    <SlotDemo />
 
-    <nut-cell>
-      <div>自定义内容</div>
-    </nut-cell>
+    <h2>{{ t('desc') }}</h2>
+    <Desc />
 
-    <h2>直接使用插槽(slot title)</h2>
-    <nut-cell desc="描述文字">
-      <template #title>
-        <span>Title <b style="color: red">1</b></span>
-      </template>
-    </nut-cell>
+    <h2>{{ t('title') }}</h2>
+    <Title />
 
-    <h2>直接使用插槽(slot desc)</h2>
-    <nut-cell title="我是标题">
-      <template #desc>
-        <span>描述文字 <b style="color: red">2</b></span>
-      </template>
-    </nut-cell>
+    <h2>{{ t('group') }}</h2>
+    <Group />
 
-    <!-- <nut-cell-group title="链接 | 分组用法">
-      <nut-cell title="链接" is-link></nut-cell>
-      <nut-cell
-        title="URL 跳转"
-        desc="https://jd.com"
-        is-link
-        url="https://jd.com"
-      ></nut-cell>
-      <nut-cell title="路由跳转 ’/‘ " to="/"></nut-cell>
-    </nut-cell-group> -->
-    <nut-cell-group title="自定义右侧箭头区域" desc="使用 nut-cell-group 支持 title desc slots">
-      <nut-cell title="Switch">
-        <template #link>
-          <nut-switch v-model="checked" />
-        </template>
-      </nut-cell>
-    </nut-cell-group>
+    <h2>{{ t('link') }}</h2>
+    <Link />
 
-    <nut-cell-group title="自定义左侧 Icon 区域">
-      <nut-cell title="图片">
-        <template #icon>
-          <img
-            class="nut-icon"
-            src="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
-          />
-        </template>
-      </nut-cell>
-    </nut-cell-group>
+    <h2>{{ t('icon') }}</h2>
+    <IconDemo />
 
-    <h2>展示图标</h2>
-    <nut-cell title="姓名" icon="my" desc="张三" is-link>
-      <template #icon>
-        <My />
-      </template>
-    </nut-cell>
-    <h2>只展示 desc ，可通过 desc-text-align 调整内容位置</h2>
-    <nut-cell desc-text-align="left" desc="张三"></nut-cell>
-    <h2>垂直居中</h2>
-    <nut-cell center title="我是标题" sub-title="副标题描述" desc="描述文字"></nut-cell>
+    <h2>{{ t('align') }}</h2>
+    <Align />
+
+    <h2>{{ t('center') }}</h2>
+    <Center />
   </Demo>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import { My } from '@nutui/icons-vue-taro';
-const click = () => {
-  console.log('点击事件');
-};
-const checked = ref(true);
+import { useTranslate } from '../../../utils';
+import Basic from './basic.vue';
+import Size from './size.vue';
+import SlotDemo from './slot.vue';
+import Desc from './desc.vue';
+import Title from './title.vue';
+import Group from './group.vue';
+import Link from './link.vue';
+import IconDemo from './icon.vue';
+import Align from './align.vue';
+import Center from './center.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    size: '尺寸设置 large',
+    slot: '默认插槽',
+    title: '左侧 title 插槽',
+    desc: '右侧 desc 插槽',
+    group: 'CellGroup 分组用法',
+    link: '右侧 link 插槽',
+    icon: '左侧 icon 插槽',
+    align: '设置 align',
+    center: '垂直居中'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    size: 'Size Large',
+    slot: 'Default Slot',
+    title: 'Title Slot',
+    desc: 'Desc Slot',
+    group: 'CellGroup',
+    link: 'Link Slot',
+    icon: 'Icon Slot',
+    align: 'Align Left',
+    center: 'Vertical Center'
+  }
+});
 </script>
diff --git a/packages/nutui-taro-demo/src/basic/pages/cell/link.vue b/packages/nutui-taro-demo/src/basic/pages/cell/link.vue
@@ -0,0 +1,11 @@
+<template>
+  <nut-cell title="Switch">
+    <template #link>
+      <nut-switch v-model="checked" />
+    </template>
+  </nut-cell>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const checked = ref(true);
+</script>
diff --git a/packages/nutui-taro-demo/src/basic/pages/cell/size.vue b/packages/nutui-taro-demo/src/basic/pages/cell/size.vue
@@ -0,0 +1,4 @@
+<template>
+  <nut-cell size="large" title="Title" desc="Description"></nut-cell>
+  <nut-cell size="large" title="Title" sub-title="Subtitle" desc="Description"></nut-cell>
+</template>
diff --git a/packages/nutui-taro-demo/src/basic/pages/cell/slot.vue b/packages/nutui-taro-demo/src/basic/pages/cell/slot.vue
@@ -0,0 +1,5 @@
+<template>
+  <nut-cell>
+    <div>Content</div>
+  </nut-cell>
+</template>
diff --git a/packages/nutui-taro-demo/src/basic/pages/cell/title.vue b/packages/nutui-taro-demo/src/basic/pages/cell/title.vue
@@ -0,0 +1,7 @@
+<template>
+  <nut-cell desc="Description">
+    <template #title>
+      <span style="color: red">Title</span>
+    </template>
+  </nut-cell>
+</template>
diff --git a/src/packages/__VUE/cell/demo.vue b/src/packages/__VUE/cell/demo.vue
diff --git a/src/packages/__VUE/cell/demo/align.vue b/src/packages/__VUE/cell/demo/align.vue
@@ -0,0 +1,3 @@
+<template>
+  <nut-cell desc-text-align="left" desc="Description"></nut-cell>
+</template>
diff --git a/src/packages/__VUE/cell/demo/basic.vue b/src/packages/__VUE/cell/demo/basic.vue
@@ -0,0 +1,11 @@
+<template>
+  <nut-cell title="Title" desc="Description"></nut-cell>
+  <nut-cell title="Title" sub-title="Subtitle" desc="Description"></nut-cell>
+  <nut-cell title="Click Test" @click="onClick"></nut-cell>
+  <nut-cell title="Round Radius = 0" :round-radius="0"></nut-cell>
+</template>
+<script setup lang="ts">
+const onClick = () => {
+  console.log('click');
+};
+</script>
diff --git a/src/packages/__VUE/cell/demo/center.vue b/src/packages/__VUE/cell/demo/center.vue
@@ -0,0 +1,3 @@
+<template>
+  <nut-cell center title="Title" sub-title="Subtitle" desc="Description"></nut-cell>
+</template>
diff --git a/src/packages/__VUE/cell/demo/desc.vue b/src/packages/__VUE/cell/demo/desc.vue
@@ -0,0 +1,7 @@
+<template>
+  <nut-cell title="Title">
+    <template #desc>
+      <span style="color: red">Description Slot</span>
+    </template>
+  </nut-cell>
+</template>
diff --git a/src/packages/__VUE/cell/demo/group.vue b/src/packages/__VUE/cell/demo/group.vue
@@ -0,0 +1,6 @@
+<template>
+  <nut-cell-group title="CellGroup Title" desc="CellGroup Description">
+    <nut-cell title="Cell"></nut-cell>
+    <nut-cell title="Link Style" is-link></nut-cell>
+  </nut-cell-group>
+</template>