chore(navbar): split demo

packages/nutui-taro-demo/src/nav/pages/navbar/basic.vue

@@ -0,0 +1,8 @@
+<template>
+  <nut-navbar title="Title" @click-title="onClick"></nut-navbar>
+</template>
+<script setup lang="ts">
+const onClick = () => {
+  console.log('[Navbar]: on click title');
+};
+</script>

packages/nutui-taro-demo/src/nav/pages/navbar/index.vue

@@ -1,102 +1,42 @@
 <template>
   <Demo class="full">
-    <h2>基础用法</h2>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
 
-    <nut-navbar title="订单详情" @click-back="back" @click-title="title">
-      <template #left>
-        <div>返回</div>
-      </template>
-      <template #right>
-        <ShareN width="16px"></ShareN>
-      </template>
-    </nut-navbar>
+    <h2>{{ t('left') }}</h2>
+    <Left />
 
-    <nut-navbar
-      title="浏览记录"
-      desc="清空"
-      @click-back="back"
-      @click-title="title"
-      @click-right="rightClick"
-    ></nut-navbar>
+    <h2>{{ t('right') }}</h2>
+    <Right />
 
-    <nut-navbar
-      :left-show="false"
-      title="购物车"
-      :title-icon="true"
-      desc="编辑"
-      @click-back="back"
-      @click-title="title"
-      @click-icon="icon"
-      @click-right="rightClick"
-    >
-      <template #title-icon>
-        <Cart2 width="16px"></Cart2>
-      </template>
-      <template #right>
-        <MoreX class="right" width="16px"></MoreX>
-      </template>
-    </nut-navbar>
-
-    <h2>自定义导航栏中间内容</h2>
-    <nut-navbar desc="编辑" @click-back="back" @click-title="title" @click-right="rightClick">
-      <template #content>
-        <nut-tabs v-model="tab1value" @click="changeTab">
-          <nut-tab-pane title="商品"> </nut-tab-pane>
-          <nut-tab-pane title="店铺"> </nut-tab-pane>
-        </nut-tabs>
-      </template>
-
-      <template #right>
-        <MoreX class="right" width="16px"></MoreX>
-      </template>
-    </nut-navbar>
-
-    <h2>多tab切换导航</h2>
-    <nut-navbar @click-back="back">
-      <template #content>
-        <nut-tabs v-model="tab2value" @click="changeTabList">
-          <nut-tab-pane title="商品"> </nut-tab-pane>
-          <nut-tab-pane title="评价"> </nut-tab-pane>
-          <nut-tab-pane title="详情"> </nut-tab-pane>
-          <nut-tab-pane title="推荐"> </nut-tab-pane>
-        </nut-tabs>
-      </template>
-
-      <template #right>
-        <HorizontalN class="right" width="16px"></HorizontalN>
-      </template>
-    </nut-navbar>
+    <h2>{{ t('title') }}</h2>
+    <Title />
   </Demo>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import { ShareN, Cart2, MoreX, HorizontalN } from '@nutui/icons-vue-taro';
-const tab1value = ref(0);
-const tab2value = ref(0);
-const back = () => {
-  console.log('header头部， 点击返回');
-};
-const title = () => {
-  console.log('header头部， 点击title');
-};
-const icon = () => {
-  console.log('icon');
-};
-
-const rightClick = () => {
-  console.log('右侧点击事件');
-};
-const changeTab = (tab: any) => {
-  tab1value.value = tab.paneKey as number;
-};
-const changeTabList = (tab: any) => {
-  tab2value.value = tab.paneKey as number;
-};
+import { useTranslate } from '../../../utils';
+import Basic from './basic.vue';
+import Left from './left.vue';
+import Right from './right.vue';
+import Title from './title.vue';
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    left: '自定义左侧插槽',
+    right: '自定义右侧插槽',
+    title: '自定义标题内容'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    left: 'Custom Left Slot',
+    right: 'Custom Right Slot',
+    title: 'Custom Title Content'
+  }
+});
 </script>
-
-<style lang="scss">
+<style>
 .nut-navbar {
-  padding: 0 !important;
+  margin-bottom: 20px;
 }
 </style>

packages/nutui-taro-demo/src/nav/pages/navbar/left.vue

@@ -0,0 +1,13 @@
+<template>
+  <nut-navbar title="Title" left-show @click-back="onClick"></nut-navbar>
+  <nut-navbar title="Title" left-show @click-back="onClick">
+    <template #left>
+      <div>Back</div>
+    </template>
+  </nut-navbar>
+</template>
+<script setup lang="ts">
+const onClick = () => {
+  console.log('[Navbar]: on click back');
+};
+</script>

packages/nutui-taro-demo/src/nav/pages/navbar/right.vue

@@ -0,0 +1,14 @@
+<template>
+  <nut-navbar title="Title" desc="Share" @click-right="onClick"></nut-navbar>
+  <nut-navbar title="Title" @click-right="onClick">
+    <template #right>
+      <ShareN width="16px"></ShareN>
+    </template>
+  </nut-navbar>
+</template>
+<script setup lang="ts">
+import { ShareN } from '@nutui/icons-vue';
+const onClick = () => {
+  console.log('[Navbar]: on click right');
+};
+</script>

packages/nutui-taro-demo/src/nav/pages/navbar/title.vue

@@ -0,0 +1,13 @@
+<template>
+  <nut-navbar left-show>
+    <template #content> Content </template>
+  </nut-navbar>
+  <nut-navbar left-show title="Title" title-icon>
+    <template #title-icon>
+      <Cart2 />
+    </template>
+  </nut-navbar>
+</template>
+<script setup lang="ts">
+import { Cart2 } from '@nutui/icons-vue';
+</script>

src/packages/__VUE/navbar/demo/basic.vue

@@ -0,0 +1,8 @@
+<template>
+  <nut-navbar title="Title" @click-title="onClick"></nut-navbar>
+</template>
+<script setup lang="ts">
+const onClick = () => {
+  console.log('[Navbar]: on click title');
+};
+</script>

src/packages/__VUE/navbar/demo/index.vue

@@ -0,0 +1,42 @@
+<template>
+  <Demo class="full">
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('left') }}</h2>
+    <Left />
+
+    <h2>{{ t('right') }}</h2>
+    <Right />
+
+    <h2>{{ t('title') }}</h2>
+    <Title />
+  </Demo>
+</template>
+
+<script setup lang="ts">
+import { useTranslate } from '@/sites/utils';
+import Basic from './basic.vue';
+import Left from './left.vue';
+import Right from './right.vue';
+import Title from './title.vue';
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    left: '自定义左侧插槽',
+    right: '自定义右侧插槽',
+    title: '自定义标题内容'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    left: 'Custom Left Slot',
+    right: 'Custom Right Slot',
+    title: 'Custom Title Content'
+  }
+});
+</script>
+<style>
+.nut-navbar {
+  margin-bottom: 20px;
+}
+</style>

src/packages/__VUE/navbar/demo/left.vue

@@ -0,0 +1,13 @@
+<template>
+  <nut-navbar title="Title" left-show @click-back="onClick"></nut-navbar>
+  <nut-navbar title="Title" left-show @click-back="onClick">
+    <template #left>
+      <div>Back</div>
+    </template>
+  </nut-navbar>
+</template>
+<script setup lang="ts">
+const onClick = () => {
+  console.log('[Navbar]: on click back');
+};
+</script>

src/packages/__VUE/navbar/demo/right.vue

@@ -0,0 +1,14 @@
+<template>
+  <nut-navbar title="Title" desc="Share" @click-right="onClick"></nut-navbar>
+  <nut-navbar title="Title" @click-right="onClick">
+    <template #right>
+      <ShareN width="16px"></ShareN>
+    </template>
+  </nut-navbar>
+</template>
+<script setup lang="ts">
+import { ShareN } from '@nutui/icons-vue';
+const onClick = () => {
+  console.log('[Navbar]: on click right');
+};
+</script>