javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-08 07:41:51 +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/angular/test/base/src/app/lazy/app-lazy/app.module.ts
View File

@ -27,6 +27,7 @@ import { NavigationPage3Component } from '../navigation-page3/navigation-page3.c
import { AlertComponent } from '../alert/alert.component';
import { AccordionComponent } from '../accordion/accordion.component';
import { AccordionModalComponent } from '../accordion/accordion-modal/accordion-modal.component';
import { TabsBasicComponent } from '../tabs-basic/tabs-basic.component';
@NgModule({
declarations: [
@ -51,7 +52,8 @@ import { AccordionModalComponent } from '../accordion/accordion-modal/accordion-
NavigationPage3Component,
AlertComponent,
AccordionComponent,
AccordionModalComponent
AccordionModalComponent,
TabsBasicComponent
],
imports: [
CommonModule,

2
packages/angular/test/base/src/app/lazy/app-lazy/app.routes.ts
View File

@ -18,6 +18,7 @@ import { NavigationPage2Component } from '../navigation-page2/navigation-page2.c
import { NavigationPage3Component } from '../navigation-page3/navigation-page3.component';
import { AlertComponent } from '../alert/alert.component';
import { AccordionComponent } from '../accordion/accordion.component';
import { TabsBasicComponent } from '../tabs-basic/tabs-basic.component';
export const routes: Routes = [
{
@ -65,6 +66,7 @@ export const routes: Routes = [
path: 'tabs-slots',
loadComponent: () => import('../tabs-slots.component').then(c => c.TabsSlotsComponent)
},
{ path: 'tabs-basic', component: TabsBasicComponent },
{
path: 'nested-outlet',
component: NestedOutletComponent,

5
packages/angular/test/base/src/app/lazy/home-page/home-page.component.html
View File

@ -37,6 +37,11 @@
Tabs test
</ion-label>
</ion-item>
<ion-item routerLink="/lazy/tabs-basic">
<ion-label>
Basic Tabs test
</ion-label>
</ion-item>
<ion-item routerLink="/lazy/nested-outlet/page">
<ion-label>
Nested ion-router-outlet

5
packages/angular/test/base/src/app/lazy/tabs-basic/tabs-basic.component.css Normal file
View File

@ -0,0 +1,5 @@
#test {
position: absolute;
bottom: 100px;
left: 0;
}

53
packages/angular/test/base/src/app/lazy/tabs-basic/tabs-basic.component.html Normal file
View File

@ -0,0 +1,53 @@
<ion-tabs (ionTabsWillChange)="onTabWillChange($event)" (ionTabsDidChange)="onTabDidChange($event)">
<ion-tab-bar slot="bottom">
<ion-tab-button tab="tab1">
<ion-label>Tab One</ion-label>
<ion-icon name="add"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="tab2">
<ion-label>Tab Two</ion-label>
<ion-icon name="logo-ionic"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="tab3">
<ion-label>Tab Three</ion-label>
<ion-icon name="save"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
<ion-tab tab="tab1">
<ion-label>Tab 1 Content</ion-label>
</ion-tab>
<ion-tab tab="tab2">
<ion-label>Tab 2 Content</ion-label>
</ion-tab>
<ion-tab tab="tab3">
<ion-label>Tab 3 Content</ion-label>
</ion-tab>
</ion-tabs>
<div id="test">
<ul>
<li>
ionTabsWillChange counter: <span id="ionTabsWillChangeCounter">{{ tabsWillChangeCounter }}</span>
</li>
<li>
ionTabsWillChange event: <span id="ionTabsWillChangeEvent">{{ tabsWillChangeEvent }}</span>
</li>
<li>
ionTabsWillChange selectedTab: <span id="ionTabsWillChangeSelectedTab">{{ tabsWillChangeSelectedTab }}</span>
</li>
</ul>
<ul>
<li>
ionTabsDidChange counter: <span id="ionTabsDidChangeCounter">{{ tabsDidChangeCounter }}</span>
</li>
<li>
ionTabsDidChange event: <span id="ionTabsDidChangeEvent">{{ tabsDidChangeEvent }}</span>
</li>
<li>
ionTabsDidChange selectedTab: <span id="ionTabsDidChangeSelectedTab">{{ tabsDidChangeSelectedTab }}</span>
</li>
</ul>
</div>

35
packages/angular/test/base/src/app/lazy/tabs-basic/tabs-basic.component.ts Normal file
View File

@ -0,0 +1,35 @@
import { Component, ViewChild } from '@angular/core';
import { IonTabBar } from '@ionic/angular';
@Component({
selector: 'app-tabs-basic',
templateUrl: './tabs-basic.component.html',
styleUrls: ['./tabs-basic.component.css']
})
export class TabsBasicComponent {
constructor() { }
tabsWillChangeCounter = 0;
tabsWillChangeEvent = '';
tabsWillChangeSelectedTab? = '';
tabsDidChangeCounter = 0;
tabsDidChangeEvent = '';
tabsDidChangeSelectedTab? = '';
@ViewChild(IonTabBar) tabBar!: IonTabBar;
onTabWillChange(ev: { tab: string }) {
console.log('ionTabsWillChange', this.tabBar.selectedTab);
this.tabsWillChangeCounter++;
this.tabsWillChangeEvent = ev.tab;
this.tabsWillChangeSelectedTab = this.tabBar.selectedTab;
}
onTabDidChange(ev: { tab: string }) {
console.log('ionTabsDidChange', this.tabBar.selectedTab);
this.tabsDidChangeCounter++;
this.tabsDidChangeEvent = ev.tab;
this.tabsDidChangeSelectedTab = this.tabBar.selectedTab;
}
}

1
packages/angular/test/base/src/app/standalone/app-standalone/app.routes.ts
View File

@ -28,6 +28,7 @@ export const routes: Routes = [
{ path: 'tab-three', loadComponent: () => import('../tabs/tab3.component').then(c => c.TabThreeComponent) }
]
},
{ path: 'tabs-basic', loadComponent: () => import('../tabs-basic/tabs-basic.component').then(c => c.TabsBasicComponent) },
{
path: 'value-accessors',
children: [

5
packages/angular/test/base/src/app/standalone/tabs-basic/tabs-basic.component.css Normal file
View File

@ -0,0 +1,5 @@
#test {
position: absolute;
bottom: 100px;
left: 0;
}

53
packages/angular/test/base/src/app/standalone/tabs-basic/tabs-basic.component.html Normal file
View File

@ -0,0 +1,53 @@
<ion-tabs (ionTabsWillChange)="onTabWillChange($event)" (ionTabsDidChange)="onTabDidChange($event)">
<ion-tab-bar slot="bottom">
<ion-tab-button tab="tab1">
<ion-label>Tab One</ion-label>
<ion-icon name="add"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="tab2">
<ion-label>Tab Two</ion-label>
<ion-icon name="logo-ionic"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="tab3">
<ion-label>Tab Three</ion-label>
<ion-icon name="save"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
<ion-tab tab="tab1">
<ion-label>Tab 1 Content</ion-label>
</ion-tab>
<ion-tab tab="tab2">
<ion-label>Tab 2 Content</ion-label>
</ion-tab>
<ion-tab tab="tab3">
<ion-label>Tab 3 Content</ion-label>
</ion-tab>
</ion-tabs>
<div id="test">
<ul>
<li>
ionTabsWillChange counter: <span id="ionTabsWillChangeCounter">{{ tabsWillChangeCounter }}</span>
</li>
<li>
ionTabsWillChange event: <span id="ionTabsWillChangeEvent">{{ tabsWillChangeEvent }}</span>
</li>
<li>
ionTabsWillChange selectedTab: <span id="ionTabsWillChangeSelectedTab">{{ tabsWillChangeSelectedTab }}</span>
</li>
</ul>
<ul>
<li>
ionTabsDidChange counter: <span id="ionTabsDidChangeCounter">{{ tabsDidChangeCounter }}</span>
</li>
<li>
ionTabsDidChange event: <span id="ionTabsDidChangeEvent">{{ tabsDidChangeEvent }}</span>
</li>
<li>
ionTabsDidChange selectedTab: <span id="ionTabsDidChangeSelectedTab">{{ tabsDidChangeSelectedTab }}</span>
</li>
</ul>
</div>

39
packages/angular/test/base/src/app/standalone/tabs-basic/tabs-basic.component.ts Normal file
View File

@ -0,0 +1,39 @@
import { Component, ViewChild } from '@angular/core';
import { IonTabBar, IonTabButton, IonIcon, IonLabel, IonTabs, IonTab } from '@ionic/angular/standalone';
import { addIcons } from 'ionicons';
import { add, logoIonic, save } from 'ionicons/icons';
addIcons({ add, logoIonic, save });
@Component({
selector: 'app-tabs-basic',
templateUrl: './tabs-basic.component.html',
styleUrls: ['./tabs-basic.component.css'],
standalone: true,
imports: [IonTabBar, IonTabButton, IonIcon, IonLabel, IonTabs, IonTab]
})
export class TabsBasicComponent {
tabsDidChangeCounter = 0;
tabsDidChangeEvent = '';
tabsDidChangeSelectedTab? = '';
tabsWillChangeCounter = 0;
tabsWillChangeEvent = '';
tabsWillChangeSelectedTab? = '';
@ViewChild(IonTabBar) tabBar!: IonTabBar;
onTabWillChange(ev: { tab: string }) {
console.log('ionTabsWillChange', this.tabBar.selectedTab);
this.tabsWillChangeCounter++;
this.tabsWillChangeEvent = ev.tab;
this.tabsWillChangeSelectedTab = this.tabBar.selectedTab;
}
onTabDidChange(ev: { tab: string }) {
console.log('ionTabsDidChange', this.tabBar.selectedTab);
this.tabsDidChangeCounter++;
this.tabsDidChangeEvent = ev.tab;
this.tabsDidChangeSelectedTab = this.tabBar.selectedTab;
}
}