chore(tabbar): split demo (#2869)

packages/nutui-taro-demo/src/nav/pages/tabbar/badge.vue

@@ -0,0 +1,32 @@
+<template>
+  <nut-tabbar>
+    <nut-tabbar-item tab-title="Home" :value="11">
+      <template #icon>
+        <Home></Home>
+      </template>
+    </nut-tabbar-item>
+    <nut-tabbar-item tab-title="Category" :dot="true">
+      <template #icon>
+        <Category></Category>
+      </template>
+    </nut-tabbar-item>
+    <nut-tabbar-item tab-title="Find" :value="110">
+      <template #icon>
+        <Find></Find>
+      </template>
+    </nut-tabbar-item>
+    <nut-tabbar-item tab-title="Cart">
+      <template #icon>
+        <Cart></Cart>
+      </template>
+    </nut-tabbar-item>
+    <nut-tabbar-item tab-title="My">
+      <template #icon>
+        <My></My>
+      </template>
+    </nut-tabbar-item>
+  </nut-tabbar>
+</template>
+<script setup>
+import { Home, Category, Find, Cart, My } from '@nutui/icons-vue-taro';
+</script>

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

@@ -0,0 +1,36 @@
+<template>
+  <nut-tabbar @tab-switch="tabSwitch">
+    <nut-tabbar-item tab-title="Home">
+      <template #icon>
+        <Home></Home>
+      </template>
+    </nut-tabbar-item>
+    <nut-tabbar-item tab-title="Category">
+      <template #icon>
+        <Category></Category>
+      </template>
+    </nut-tabbar-item>
+    <nut-tabbar-item tab-title="Find">
+      <template #icon>
+        <Find></Find>
+      </template>
+    </nut-tabbar-item>
+    <nut-tabbar-item tab-title="Cart">
+      <template #icon>
+        <Cart></Cart>
+      </template>
+    </nut-tabbar-item>
+    <nut-tabbar-item tab-title="My">
+      <template #icon>
+        <My></My>
+      </template>
+    </nut-tabbar-item>
+  </nut-tabbar>
+</template>
+
+<script lang="ts" setup>
+import { Home, Category, Find, Cart, My } from '@nutui/icons-vue-taro';
+const tabSwitch = (item: Record<string, unknown>, index: number) => {
+  console.log(item, index);
+};
+</script>

packages/nutui-taro-demo/src/nav/pages/tabbar/check.vue

@@ -0,0 +1,41 @@
+<template>
+  <nut-tabbar v-model="active" @tab-switch="tabSwitch">
+    <nut-tabbar-item v-for="(item, index) in List" :key="index" :tab-title="item.title" :icon="item.icon">
+    </nut-tabbar-item>
+  </nut-tabbar>
+</template>
+<script lang="ts" setup>
+import { h, ref } from 'vue';
+import { Home, Category, Find, Cart, My } from '@nutui/icons-vue-taro';
+const active = ref(2);
+const List = [
+  {
+    title: 'label',
+    icon: h(Home),
+    name: 'home'
+  },
+  {
+    title: 'label',
+    icon: h(Category),
+    name: 'category'
+  },
+  {
+    title: 'label',
+    icon: h(Find),
+    name: 'find'
+  },
+  {
+    title: 'label',
+    icon: h(Cart),
+    name: 'cart'
+  },
+  {
+    title: 'label',
+    icon: h(My),
+    name: 'my'
+  }
+];
+const tabSwitch = (item: Record<string, unknown>, index: number) => {
+  console.log(item, index);
+};
+</script>

packages/nutui-taro-demo/src/nav/pages/tabbar/color.vue

@@ -0,0 +1,37 @@
+<template>
+  <nut-tabbar unactive-color="#7d7e80" active-color="#1989fa">
+    <nut-tabbar-item v-for="(item, index) in List" :key="index" :tab-title="item.title" :icon="item.icon">
+    </nut-tabbar-item>
+  </nut-tabbar>
+</template>
+<script setup>
+import { h } from 'vue';
+import { Home, Category, Find, Cart, My } from '@nutui/icons-vue-taro';
+const List = [
+  {
+    title: 'label',
+    icon: h(Home),
+    name: 'home'
+  },
+  {
+    title: 'label',
+    icon: h(Category),
+    name: 'category'
+  },
+  {
+    title: 'label',
+    icon: h(Find),
+    name: 'find'
+  },
+  {
+    title: 'label',
+    icon: h(Cart),
+    name: 'cart'
+  },
+  {
+    title: 'label',
+    icon: h(My),
+    name: 'my'
+  }
+];
+</script>

packages/nutui-taro-demo/src/nav/pages/tabbar/fixed.vue

@@ -0,0 +1,32 @@
+<template>
+  <nut-tabbar bottom safe-area-inset-bottom placeholder>
+    <nut-tabbar-item v-for="(item, index) in List" :key="index" :tab-title="item.title" :icon="item.icon">
+    </nut-tabbar-item>
+  </nut-tabbar>
+</template>
+<script setup>
+import { h } from 'vue';
+import { Home, Category, Find, Cart, My } from '@nutui/icons-vue-taro';
+const List = [
+  {
+    title: 'Home',
+    icon: h(Home)
+  },
+  {
+    title: 'Category',
+    icon: h(Category)
+  },
+  {
+    title: 'Find',
+    icon: h(Find)
+  },
+  {
+    title: 'Cart',
+    icon: h(Cart)
+  },
+  {
+    title: 'My',
+    icon: h(My)
+  }
+];
+</script>

packages/nutui-taro-demo/src/nav/pages/tabbar/icon.vue

@@ -0,0 +1,28 @@
+<template>
+  <nut-tabbar @tab-switch="tabSwitch">
+    <nut-tabbar-item tab-title="Home">
+      <template #icon="props">
+        <img :src="props.active ? icon.active : icon.unactive" alt="" />
+      </template>
+    </nut-tabbar-item>
+    <nut-tabbar-item tab-title="Category">
+      <template #icon="props">
+        <img :src="props.active ? icon.active : icon.unactive" alt="" />
+      </template>
+    </nut-tabbar-item>
+    <nut-tabbar-item tab-title="Find">
+      <template #icon="props">
+        <img :src="props.active ? icon.active : icon.unactive" alt="" />
+      </template>
+    </nut-tabbar-item>
+  </nut-tabbar>
+</template>
+<script lang="ts" setup>
+const icon = {
+  active: 'https://img11.360buyimg.com/imagetools/jfs/t1/70423/4/20553/3652/62e74629E23ba550e/aeeed0e3b9f43ae6.png',
+  unactive: 'https://img13.360buyimg.com/imagetools/jfs/t1/23319/19/18329/3084/62e7c346E957c54ef/6c3e8a49e52b76f2.png'
+};
+const tabSwitch = (item: Record<string, unknown>, index: number) => {
+  console.log(item, index);
+};
+</script>