javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-16 18:17:31 +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

26
packages/angular/standalone/src/directives/proxies.ts
View File

@ -69,6 +69,7 @@ import { defineCustomElement as defineIonSelectOption } from '@ionic/core/compon
import { defineCustomElement as defineIonSkeletonText } from '@ionic/core/components/ion-skeleton-text.js';
import { defineCustomElement as defineIonSpinner } from '@ionic/core/components/ion-spinner.js';
import { defineCustomElement as defineIonSplitPane } from '@ionic/core/components/ion-split-pane.js';
import { defineCustomElement as defineIonTab } from '@ionic/core/components/ion-tab.js';
import { defineCustomElement as defineIonTabBar } from '@ionic/core/components/ion-tab-bar.js';
import { defineCustomElement as defineIonTabButton } from '@ionic/core/components/ion-tab-button.js';
import { defineCustomElement as defineIonText } from '@ionic/core/components/ion-text.js';
@ -1939,6 +1940,31 @@ export declare interface IonSplitPane extends Components.IonSplitPane {
}
@ProxyCmp({
defineCustomElementFn: defineIonTab,
inputs: ['component', 'tab'],
methods: ['setActive']
})
@Component({
selector: 'ion-tab',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '<ng-content></ng-content>',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: ['component', 'tab'],
standalone: true
})
export class IonTab {
protected el: HTMLElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
}
}
export declare interface IonTab extends Components.IonTab {}
@ProxyCmp({
defineCustomElementFn: defineIonTabBar,
inputs: ['color', 'mode', 'selectedTab', 'translucent']

8
packages/angular/standalone/src/navigation/tabs.ts
View File

@ -1,7 +1,8 @@
import { NgIf } from '@angular/common';
import { Component, ContentChild, ContentChildren, ViewChild, QueryList } from '@angular/core';
import { IonTabs as IonTabsBase } from '@ionic/angular/common';
import { IonTabBar } from '../directives/proxies';
import { IonTabBar, IonTab } from '../directives/proxies';
import { IonRouterOutlet } from './router-outlet';
@ -11,11 +12,13 @@ import { IonRouterOutlet } from './router-outlet';
<ng-content select="[slot=top]"></ng-content>
<div class="tabs-inner" #tabsInner>
<ion-router-outlet
*ngIf="tabs.length === 0"
#outlet
tabs="true"
(stackWillChange)="onStackWillChange($event)"
(stackDidChange)="onStackDidChange($event)"
></ion-router-outlet>
<ng-content *ngIf="tabs.length > 0" select="ion-tab"></ng-content>
</div>
<ng-content></ng-content>
`,
@ -46,7 +49,7 @@ import { IonRouterOutlet } from './router-outlet';
}
`,
],
imports: [IonRouterOutlet],
imports: [IonRouterOutlet, NgIf],
})
// eslint-disable-next-line @angular-eslint/component-class-suffix
export class IonTabs extends IonTabsBase {
@ -54,4 +57,5 @@ export class IonTabs extends IonTabsBase {
@ContentChild(IonTabBar, { static: false }) tabBar: IonTabBar | undefined;
@ContentChildren(IonTabBar) tabBars: QueryList<IonTabBar>;
@ContentChildren(IonTab) tabs: QueryList<IonTab>;
}