Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore(navbar): split demo #2738

Merged
merged 2 commits into from
Dec 14, 2023
Merged

chore(navbar): split demo #2738

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
283f291
chore(navbar): split demo
eiinu Dec 14, 2023
e1d6aba
chore(navbar): update taro demo
eiinu Dec 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions packages/nutui-taro-demo/src/nav/pages/navbar/basic.vue
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop

This file was deleted.

8 changes: 8 additions & 0 deletions src/packages/__VUE/navbar/demo/basic.vue
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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