Skip to content

Commit

Permalink
chore(navbar): split demo (#2738)
Browse files Browse the repository at this point in the history
  • Loading branch information
@eiinu
eiinu authored Dec 14, 2023
1 parent 25e59ba commit 1a5fd40
Show file tree
Hide file tree
Showing 14 changed files with 326 additions and 744 deletions.
8 changes: 8 additions & 0 deletions packages/nutui-taro-demo/src/nav/pages/navbar/basic.vue
View file
Original file line number Diff line number Diff line change
@@ -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>
118 changes: 29 additions & 89 deletions packages/nutui-taro-demo/src/nav/pages/navbar/index.vue
View file
Original file line number Diff line number Diff line change
@@ -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>
13 changes: 13 additions & 0 deletions packages/nutui-taro-demo/src/nav/pages/navbar/left.vue
View file
Original file line number Diff line number Diff line change
@@ -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>
14 changes: 14 additions & 0 deletions packages/nutui-taro-demo/src/nav/pages/navbar/right.vue
View file
Original file line number Diff line number Diff line change
@@ -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-taro';
const onClick = () => {
console.log('[Navbar]: on click right');
};
</script>
13 changes: 13 additions & 0 deletions packages/nutui-taro-demo/src/nav/pages/navbar/title.vue
View file
Original file line number Diff line number Diff line change
@@ -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-taro';
</script>
130 changes: 0 additions & 130 deletions src/packages/__VUE/navbar/demo.vue
View file

This file was deleted.

8 changes: 8 additions & 0 deletions src/packages/__VUE/navbar/demo/basic.vue
View file
Original file line number Diff line number Diff line change
@@ -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>
42 changes: 42 additions & 0 deletions src/packages/__VUE/navbar/demo/index.vue
View file
Original file line number Diff line number Diff line change
@@ -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>
13 changes: 13 additions & 0 deletions src/packages/__VUE/navbar/demo/left.vue
View file
Original file line number Diff line number Diff line change
@@ -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>
14 changes: 14 additions & 0 deletions src/packages/__VUE/navbar/demo/right.vue
View file
Original file line number Diff line number Diff line change
@@ -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>
Loading

0 comments on commit 1a5fd40

Please sign in to comment.