chore(tag): split demo (#2804)

jd-opensource · Dec 25, 2023 · 0fbda85 · 0fbda85
1 parent f2113de
commit 0fbda85
Show file tree

Hide file tree

Showing 12 changed files with 128 additions and 323 deletions.
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/tag/basic.vue b/packages/nutui-taro-demo/src/exhibition/pages/tag/basic.vue
@@ -0,0 +1,9 @@
+<template>
+  <nut-space>
+    <nut-tag> default </nut-tag>
+    <nut-tag type="primary"> primary </nut-tag>
+    <nut-tag type="success"> success </nut-tag>
+    <nut-tag type="danger"> danger </nut-tag>
+    <nut-tag type="warning"> warning </nut-tag>
+  </nut-space>
+</template>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/tag/color.vue b/packages/nutui-taro-demo/src/exhibition/pages/tag/color.vue
@@ -0,0 +1,7 @@
+<template>
+  <nut-space>
+    <nut-tag color="#FA685D"> background </nut-tag>
+    <nut-tag color="#E9E9E9" text-color="#999999"> text </nut-tag>
+    <nut-tag color="#FA2400" plain> plain </nut-tag>
+  </nut-space>
+</template>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/tag/custom.vue b/packages/nutui-taro-demo/src/exhibition/pages/tag/custom.vue
@@ -0,0 +1,16 @@
+<template>
+  <nut-space>
+    <nut-tag plain type="primary"> plain </nut-tag>
+    <nut-tag round type="primary"> round </nut-tag>
+    <nut-tag mark type="primary"> mark </nut-tag>
+    <nut-tag v-if="show" closeable type="primary" @close="close"> close </nut-tag>
+  </nut-space>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+const show = ref(true);
+const close = () => {
+  show.value = false;
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/tag/index.vue b/packages/nutui-taro-demo/src/exhibition/pages/tag/index.vue
@@ -1,80 +1,32 @@
 <template>
   <Demo>
-    <nut-cell-group title="基础用法">
-      <nut-cell title="default 类型">
-        <template #link>
-          <nut-tag>标签</nut-tag>
-        </template>
-      </nut-cell>
-      <nut-cell title="primary 类型">
-        <template #link>
-          <nut-tag type="primary">标签</nut-tag>
-        </template>
-      </nut-cell>
-      <nut-cell title="success 类型">
-        <template #link>
-          <nut-tag type="success">标签</nut-tag>
-        </template></nut-cell
-      >
-      <nut-cell title="danger 类型">
-        <template #link>
-          <nut-tag type="danger">标签</nut-tag>
-        </template></nut-cell
-      >
-      <nut-cell title="warning 类型">
-        <template #link>
-          <nut-tag type="warning">标签</nut-tag>
-        </template>
-      </nut-cell>
-    </nut-cell-group>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
 
-    <nut-cell-group title="样式风格">
-      <nut-cell title="空心样式">
-        <template #link>
-          <nut-tag plain>标签</nut-tag>
-        </template></nut-cell
-      >
-      <nut-cell title="圆角样式">
-        <template #link>
-          <nut-tag round type="primary">标签</nut-tag>
-        </template></nut-cell
-      >
-      <nut-cell title="标记样式">
-        <template #link>
-          <nut-tag mark type="primary">标签</nut-tag>
-        </template></nut-cell
-      >
-      <nut-cell title="可关闭标签">
-        <template #link>
-          <nut-tag v-if="show" closeable type="primary" @close="close">标签</nut-tag>
-        </template></nut-cell
-      >
-    </nut-cell-group>
+    <h2>{{ t('custom') }}</h2>
+    <Custom />
 
-    <nut-cell-group title="颜色自定义">
-      <nut-cell title="背景颜色">
-        <template #link>
-          <nut-tag color="#FA685D">标签</nut-tag>
-        </template></nut-cell
-      >
-      <nut-cell title="文字颜色">
-        <template #link>
-          <nut-tag color="#E9E9E9" text-color="#999999">标签</nut-tag>
-        </template>
-      </nut-cell>
-      <nut-cell title="空心颜色">
-        <template #link>
-          <nut-tag color="#FA2400" plain>标签</nut-tag>
-        </template>
-      </nut-cell>
-    </nut-cell-group>
+    <h2>{{ t('color') }}</h2>
+    <Color />
   </Demo>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-const show = ref(true);
-const close = () => {
-  show.value = false;
-};
+import { useTranslate } from '../../../utils';
+import Basic from './basic.vue';
+import Custom from './custom.vue';
+import Color from './color.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    custom: '样式风格',
+    color: '颜色自定义'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    custom: 'Style',
+    color: 'Custom Color'
+  }
+});
 </script>
diff --git a/src/packages/__VUE/tag/demo.vue b/src/packages/__VUE/tag/demo.vue
diff --git a/src/packages/__VUE/tag/demo/basic.vue b/src/packages/__VUE/tag/demo/basic.vue
@@ -0,0 +1,9 @@
+<template>
+  <nut-space>
+    <nut-tag> default </nut-tag>
+    <nut-tag type="primary"> primary </nut-tag>
+    <nut-tag type="success"> success </nut-tag>
+    <nut-tag type="danger"> danger </nut-tag>
+    <nut-tag type="warning"> warning </nut-tag>
+  </nut-space>
+</template>
diff --git a/src/packages/__VUE/tag/demo/color.vue b/src/packages/__VUE/tag/demo/color.vue
@@ -0,0 +1,7 @@
+<template>
+  <nut-space>
+    <nut-tag color="#FA685D"> background </nut-tag>
+    <nut-tag color="#E9E9E9" text-color="#999999"> text </nut-tag>
+    <nut-tag color="#FA2400" plain> plain </nut-tag>
+  </nut-space>
+</template>
diff --git a/src/packages/__VUE/tag/demo/custom.vue b/src/packages/__VUE/tag/demo/custom.vue
@@ -0,0 +1,16 @@
+<template>
+  <nut-space>
+    <nut-tag plain type="primary"> plain </nut-tag>
+    <nut-tag round type="primary"> round </nut-tag>
+    <nut-tag mark type="primary"> mark </nut-tag>
+    <nut-tag v-if="show" closeable type="primary" @close="close"> close </nut-tag>
+  </nut-space>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+const show = ref(true);
+const close = () => {
+  show.value = false;
+};
+</script>
diff --git a/src/packages/__VUE/tag/demo/index.vue b/src/packages/__VUE/tag/demo/index.vue
@@ -0,0 +1,32 @@
+<template>
+  <Demo>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('custom') }}</h2>
+    <Custom />
+
+    <h2>{{ t('color') }}</h2>
+    <Color />
+  </Demo>
+</template>
+
+<script setup lang="ts">
+import { useTranslate } from '@/sites/utils';
+import Basic from './basic.vue';
+import Custom from './custom.vue';
+import Color from './color.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    custom: '样式风格',
+    color: '颜色自定义'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    custom: 'Style',
+    color: 'Custom Color'
+  }
+});
+</script>
diff --git a/src/packages/__VUE/tag/doc.en-US.md b/src/packages/__VUE/tag/doc.en-US.md
@@ -16,56 +16,15 @@ app.use(Tag);
 
 ### Basic Usage
 
-:::demo
-
-```vue
-<template>
-  <nut-tag>tag</nut-tag>
-  <nut-tag type="primary">tag</nut-tag>
-  <nut-tag type="success">tag</nut-tag>
-  <nut-tag type="danger">tag</nut-tag>
-  <nut-tag type="warning">tag</nut-tag>
-</template>
-```
-
-:::
+> demo: tag basic
 
 ### Style
 
-:::demo
-
-```vue
-<template>
-  <nut-tag plain>plain</nut-tag>
-  <nut-tag round type="primary">round</nut-tag>
-  <nut-tag mark type="primary">mark</nut-tag>
-  <nut-tag v-if="show" closeable @close="close" type="primary">close</nut-tag>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-const show = ref(true);
-const close = () => {
-  show.value = false;
-};
-</script>
-```
-
-:::
+> demo: tag custom
 
 ### Custom Color
 
-:::demo
-
-```vue
-<template>
-  <nut-tag color="#FA685D">background</nut-tag>
-  <nut-tag color="#E9E9E9" textColor="#999999">text</nut-tag>
-  <nut-tag color="#FA2400" plain>plain</nut-tag>
-</template>
-```
-
-:::
+> demo: tag color
 
 ## API