javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-17 02:31:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(vue): tab bar now works with slot="top" (#22461)

Browse Source 
resolves #22456
This commit is contained in:
Liam DeBeasi
2020-11-10 10:07:31 -05:00
committed by GitHub
parent f5b0299729
commit e17c822bfb
4 changed files with 151 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/vue/src/components/IonTabBar.ts
View File

@ -27,7 +27,8 @@ export const IonTabBar = defineComponent({
* to a tab from another tab, we can correctly
* show any child pages if necessary.
*/
(currentInstance.subTree.children as VNode[]).forEach((child: VNode) => {
const children = (currentInstance.subTree.children || []) as VNode[];
children.forEach((child: VNode) => {
if (child.type && (child.type as any).name === 'IonTabButton') {
tabState.tabs[child.props.tab] = {
originalHref: child.props.href,
@ -45,7 +46,7 @@ export const IonTabBar = defineComponent({
});
const checkActiveTab = (currentRoute: any) => {
const childNodes = currentInstance.subTree.children as VNode[];
const childNodes = (currentInstance.subTree.children || []) as VNode[];
const { tabs, activeTab: prevActiveTab } = tabState;
const tabKeys = Object.keys(tabs);
const activeTab = tabKeys

60
packages/vue/src/components/IonTabs.ts
View File

@ -1,10 +1,50 @@
import { h, defineComponent } from 'vue';
import { h, defineComponent, VNode } from 'vue';
import { IonRouterOutlet } from './IonRouterOutlet';
export const IonTabs = defineComponent({
name: 'IonTabs',
render() {
const { $slots: slots } = this;
const slottedContent = slots.default && slots.default();
let childrenToRender = [
h('div', {
class: 'tabs-inner',
style: {
'position': 'relative',
'flex': '1',
'contain': 'layout size style'
}
}, [
h(IonRouterOutlet, { tabs: true })
])
];
/**
* If ion-tab-bar has slot="top" it needs to be
* rendered before `.tabs-inner` otherwise it will
* not show above the tab content.
*/
if (slottedContent && slottedContent.length > 0) {
const topSlottedTabBar = slottedContent.find((child: VNode) => {
const isTabBar = child.type && (child.type as any).name === 'IonTabBar';
const hasTopSlot = child.props?.slot === 'top';
return isTabBar && hasTopSlot;
});
if (topSlottedTabBar) {
childrenToRender = [
...slottedContent,
...childrenToRender
];
} else {
childrenToRender = [
...childrenToRender,
...slottedContent
]
}
}
return h(
'ion-tabs',
{
@ -22,23 +62,7 @@ export const IonTabs = defineComponent({
'z-index': '0'
}
},
[
h(
'div',
{
class: 'tabs-inner',
style: {
'position': 'relative',
'flex': '1',
'contain': 'layout size style'
}
},
[
h(IonRouterOutlet, { tabs: true })
]
),
...slots.default && slots.default()
]
childrenToRender
)
}
});

2
packages/vue/test-app/src/views/TabsSecondary.vue
View File

@ -2,7 +2,7 @@
<ion-page data-pageid="tabs-secondary">
<ion-content>
<ion-tabs id="tabs">
<ion-tab-bar slot="bottom">
<ion-tab-bar slot="top">
<ion-tab-button tab="tab1-secondary" href="/tabs-secondary/tab1">
<ion-icon :icon="triangle" />
<ion-label>Tab 1</ion-label>

105
packages/vue/test-app/tests/unit/tab-bar.spec.ts Normal file
View File

@ -0,0 +1,105 @@
import { mount } from '@vue/test-utils';
import { createRouter, createWebHistory } from '@ionic/vue-router';
import { IonicVue, IonApp, IonRouterOutlet, IonPage, IonTabs, IonTabBar } from '@ionic/vue';
const App = {
components: { IonApp, IonRouterOutlet },
template: '<ion-app><ion-router-outlet /></ion-app>',
}
describe('ion-tab-bar', () => {
it('should render in the top slot', async () => {
const Tabs = {
components: { IonPage, IonTabs, IonTabBar },
template: `
<ion-page>
<ion-tabs>
<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(App, {
global: {
plugins: [router, IonicVue]
}
});
const innerHTML = wrapper.find('ion-tabs').html();
expect(innerHTML).toContain(`<ion-tab-bar slot="top"></ion-tab-bar><div class="tabs-inner" style="position: relative; flex: 1; contain: layout size style;">`);
});
it('should render in the bottom slot', async () => {
const Tabs = {
components: { IonPage, IonTabs, IonTabBar },
template: `
<ion-page>
<ion-tabs>
<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(App, {
global: {
plugins: [router, IonicVue]
}
});
const innerHTML = wrapper.find('ion-tabs').html();
expect(innerHTML).toContain(`<div class="tabs-inner" style="position: relative; flex: 1; contain: layout size style;"><ion-router-outlet tabs="true"></ion-router-outlet></div><ion-tab-bar slot="bottom"></ion-tab-bar>`);
});
it('should render in the default slot', async () => {
const Tabs = {
components: { IonPage, IonTabs, IonTabBar },
template: `
<ion-page>
<ion-tabs>
<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(App, {
global: {
plugins: [router, IonicVue]
}
});
const innerHTML = wrapper.find('ion-tabs').html();
expect(innerHTML).toContain(`<div class="tabs-inner" style="position: relative; flex: 1; contain: layout size style;"><ion-router-outlet tabs="true"></ion-router-outlet></div><ion-tab-bar></ion-tab-bar></ion-tabs>`)
});
});