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

chore: use separate stylesheet

Browse Source
This commit is contained in:
Sean Perkins
2023-05-25 13:00:29 -04:00
parent 31c21f6aad
commit 77062b4905
5 changed files with 37 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
angular/src/directives/navigation/ion-tabs/ion-tabs.html Normal file
View File

@ -0,0 +1,5 @@
<ng-content select="[slot=top]"></ng-content>
<div class="tabs-inner">
<ion-router-outlet #outlet tabs="true" (stackEvents)="onPageSelected($event)"></ion-router-outlet>
</div>
<ng-content></ng-content>

24
angular/src/directives/navigation/ion-tabs/ion-tabs.scss Normal file
View File

@ -0,0 +1,24 @@
:host {
display: flex;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
flex-direction: column;
width: 100%;
height: 100%;
contain: layout size style;
z-index: $z-index-page-container;
}
.tabs-inner {
position: relative;
flex: 1;
contain: layout size style;
}

43
angular/src/directives/navigation/ion-tabs.ts → angular/src/directives/navigation/ion-tabs/ion-tabs.ts
View File

@ -1,45 +1,14 @@
import { Component, ContentChild, EventEmitter, HostListener, Output, ViewChild } from '@angular/core';
import { NavController } from '../../providers/nav-controller';
import { IonTabBar } from '../proxies';
import { IonRouterOutlet } from './ion-router-outlet';
import { StackEvent } from './stack-utils';
import { NavController } from '../../../providers/nav-controller';
import { IonTabBar } from '../../proxies';
import { IonRouterOutlet } from '../ion-router-outlet';
import { StackEvent } from '../stack-utils';
@Component({
selector: 'ion-tabs',
template: ` <ng-content select="[slot=top]"></ng-content>
<div class="tabs-inner">
<ion-router-outlet #outlet tabs="true" (stackEvents)="onPageSelected($event)"></ion-router-outlet>
</div>
<ng-content></ng-content>`,
styles: [
`
:host {
display: flex;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
flex-direction: column;
width: 100%;
height: 100%;
contain: layout size style;
z-index: $z-index-page-container;
}
.tabs-inner {
position: relative;
flex: 1;
contain: layout size style;
}
`,
],
templateUrl: './ion-tabs.html',
styleUrls: ['./ion-tabs.scss'],
})
// eslint-disable-next-line @angular-eslint/component-class-suffix
export class IonTabs {

2
angular/src/index.ts
View File

@ -4,7 +4,7 @@ export { NumericValueAccessorDirective as NumericValueAccessor } from './directi
export { RadioValueAccessorDirective as RadioValueAccessor } from './directives/control-value-accessors/radio-value-accessor';
export { SelectValueAccessorDirective as SelectValueAccessor } from './directives/control-value-accessors/select-value-accessor';
export { TextValueAccessorDirective as TextValueAccessor } from './directives/control-value-accessors/text-value-accessor';
export { IonTabs } from './directives/navigation/ion-tabs';
export { IonTabs } from './directives/navigation/ion-tabs/ion-tabs';
export { IonBackButtonDelegateDirective as IonBackButtonDelegate } from './directives/navigation/ion-back-button';
export { NavDelegate } from './directives/navigation/nav-delegate';
export { IonRouterOutlet } from './directives/navigation/ion-router-outlet';

2
angular/src/ionic-module.ts
View File

@ -12,7 +12,7 @@ import {
} from './directives/control-value-accessors';
import { IonBackButtonDelegateDirective } from './directives/navigation/ion-back-button';
import { IonRouterOutlet } from './directives/navigation/ion-router-outlet';
import { IonTabs } from './directives/navigation/ion-tabs';
import { IonTabs } from './directives/navigation/ion-tabs/ion-tabs';
import { NavDelegate } from './directives/navigation/nav-delegate';
import {
RouterLinkDelegateDirective,