javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-14 16:52:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(react, vue, angular): use tabs without router (#29794)

Browse Source 
Issue number: resolves #25184 

---------

Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
This commit is contained in:
Maria Hutt
2024-08-26 08:13:20 -07:00
committed by GitHub
parent 4580edc21f
commit 867066b4eb
38 changed files with 1946 additions and 1281 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/vue/test/base/src/router/index.ts
View File

@ -161,6 +161,10 @@ const routes: Array<RouteRecordRaw> = [
}
]
},
{
path: '/tabs-basic',
component: () => import('@/views/TabsBasic.vue')
},
]
const router = createRouter({

3
packages/vue/test/base/src/views/Home.vue
View File

@ -44,6 +44,9 @@
<ion-item router-link="/tabs-secondary" id="tab-secondary">
<ion-label>Tabs Secondary</ion-label>
</ion-item>
<ion-item router-link="/tabs-basic" id="tab-basic">
<ion-label>Tabs with Basic Navigation</ion-label>
</ion-item>
<ion-item router-link="/lifecycle" id="lifecycle">
<ion-label>Lifecycle</ion-label>
</ion-item>

12
packages/vue/test/base/src/views/Tabs.vue
View File

@ -1,7 +1,7 @@
<template>
<ion-page data-pageid="tabs">
<ion-content>
<ion-tabs id="tabs">
<ion-tabs id="tabs" @ionTabsWillChange="onTabWillChange" @ionTabsDidChange="onTabDidChange">
<ion-router-outlet></ion-router-outlet>
<ion-tab-bar slot="bottom">
<ion-tab-button
@ -47,7 +47,15 @@ export default defineComponent({
]
}
return { tabs, addTab }
const onTabWillChange = (e: { tab: string }) => {
console.log('ionTabsWillChange', e.tab);
}
const onTabDidChange = (e: { tab: string }) => {
console.log('ionTabsDidChange', e.tab);
}
return { tabs, addTab, onTabWillChange, onTabDidChange }
}
});
</script>

55
packages/vue/test/base/src/views/TabsBasic.vue Normal file
View File

@ -0,0 +1,55 @@
<template>
<ion-page data-pageid="tabs">
<ion-content>
<ion-tabs id="tabs" @ionTabsWillChange="onTabWillChange" @ionTabsDidChange="onTabDidChange">
<ion-tab-bar slot="bottom">
<ion-tab-button
v-for="tab in tabs"
:tab="'tab' + tab.id"
:key="tab.id"
>
<ion-icon :icon="tab.icon" />
<ion-label>Tab {{ tab.id }}</ion-label>
</ion-tab-button>
</ion-tab-bar>
<ion-tab tab="tab1" data-pageid="tab1">
<ion-label>Tab 1 Content</ion-label>
</ion-tab>
<ion-tab tab="tab2" data-pageid="tab2">
<ion-label>Tab 2 Content</ion-label>
</ion-tab>
<ion-tab tab="tab3" data-pageid="tab3">
<ion-label>Tab 3 Content</ion-label>
</ion-tab>
</ion-tabs>
</ion-content>
</ion-page>
</template>
<script lang="ts">
import { IonTabBar, IonTabButton, IonTabs, IonContent, IonLabel, IonIcon, IonPage, IonTab } from '@ionic/vue';
import { ellipse, square, triangle } from 'ionicons/icons';
import { ref, defineComponent } from 'vue';
export default defineComponent({
components: { IonContent, IonLabel, IonTabs, IonTabBar, IonTabButton, IonIcon, IonPage, IonTab },
setup() {
const tabs = ref([
{ id: 1, icon: triangle },
{ id: 2, icon: ellipse },
{ id: 3, icon: square }
])
const onTabWillChange = (e: { tab: string }) => {
console.log('ionTabsWillChange', e.tab);
}
const onTabDidChange = (e: { tab: string }) => {
console.log('ionTabsDidChange', e.tab);
}
return { tabs, onTabWillChange, onTabDidChange }
}
});
</script>

1348
packages/vue/test/base/tests/e2e/specs/tabs.cy.js
View File

File diff suppressed because it is too large Load Diff

107
packages/vue/test/base/tests/unit/tab-bar.spec.ts
View File

@ -4,113 +4,6 @@ import { createRouter, createWebHistory } from '@ionic/vue-router';
import { IonicVue, IonRouterOutlet, IonPage, IonTabs, IonTabBar } from '@ionic/vue';
describe('ion-tab-bar', () => {
it('should render in the top slot', async () => {
const Tabs = {
components: { IonPage, IonTabs, IonTabBar, IonRouterOutlet },
template: `
<ion-page>
<ion-tabs>
<ion-router-outlet></ion-router-outlet>
<ion-tab-bar slot="top"></ion-tab-bar>
</ion-tabs>
</ion-page>
`,
}
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes: [
{ path: '/', component: Tabs }
]
});
router.push('/');
await router.isReady();
const wrapper = mount(Tabs, {
global: {
plugins: [router, IonicVue]
}
});
const tabs = wrapper.findComponent(IonTabs);
const children = tabs.vm.$el.children;
expect(children[0].tagName).toEqual('ION-TAB-BAR');
expect(children[1].tagName).toEqual('DIV');
expect(children[1].className).toEqual('tabs-inner');
});
it('should render in the bottom slot', async () => {
const Tabs = {
components: { IonPage, IonTabs, IonTabBar, IonRouterOutlet },
template: `
<ion-page>
<ion-tabs>
<ion-router-outlet></ion-router-outlet>
<ion-tab-bar slot="bottom"></ion-tab-bar>
</ion-tabs>
</ion-page>
`,
}
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes: [
{ path: '/', component: Tabs }
]
});
router.push('/');
await router.isReady();
const wrapper = mount(Tabs, {
global: {
plugins: [router, IonicVue]
}
});
const tabs = wrapper.findComponent(IonTabs);
const children = tabs.vm.$el.children;
expect(children[0].tagName).toEqual('DIV');
expect(children[0].className).toEqual('tabs-inner');
expect(children[1].tagName).toEqual('ION-TAB-BAR');
});
it('should render in the default slot', async () => {
const Tabs = {
components: { IonPage, IonTabs, IonTabBar, IonRouterOutlet },
template: `
<ion-page>
<ion-tabs>
<ion-router-outlet></ion-router-outlet>
<ion-tab-bar></ion-tab-bar>
</ion-tabs>
</ion-page>
`,
}
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes: [
{ path: '/', component: Tabs }
]
});
router.push('/');
await router.isReady();
const wrapper = mount(Tabs, {
global: {
plugins: [router, IonicVue]
}
});
const tabs = wrapper.findComponent(IonTabs);
const children = tabs.vm.$el.children;
const tabsInner = children[0];
expect(tabsInner.tagName).toEqual('DIV');
expect(tabsInner.className).toEqual('tabs-inner');
expect(tabsInner.children[0].tagName).toEqual('ION-ROUTER-OUTLET');
});
// Verifies the fix for https://github.com/ionic-team/ionic-framework/issues/22642
it('should not fail on non tab button elements', async () => {
const Tabs = {