mirror of
				https://github.com/ionic-team/ionic-framework.git
				synced 2025-11-04 13:17:56 +08:00 
			
		
		
		
	feat(tab): framework support
This commit is contained in:
		@ -1,4 +1,5 @@
 | 
				
			|||||||
import { Build, Component, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core';
 | 
					import { Build, Component, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core';
 | 
				
			||||||
 | 
					import { FrameworkDelegate, attachComponent } from '../../utils/framework-delegate';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@Component({
 | 
					@Component({
 | 
				
			||||||
  tag: 'ion-tab'
 | 
					  tag: 'ion-tab'
 | 
				
			||||||
@ -13,6 +14,7 @@ export class Tab {
 | 
				
			|||||||
  @Prop({ mutable: true }) active = false;
 | 
					  @Prop({ mutable: true }) active = false;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  @Prop() btnId: string;
 | 
					  @Prop() btnId: string;
 | 
				
			||||||
 | 
					  @Prop() delegate: FrameworkDelegate;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  /**
 | 
					  /**
 | 
				
			||||||
   * The title of the tab.
 | 
					   * The title of the tab.
 | 
				
			||||||
@ -104,16 +106,15 @@ export class Tab {
 | 
				
			|||||||
  }
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  @Method()
 | 
					  @Method()
 | 
				
			||||||
  setActive(): Promise<void> {
 | 
					  async setActive(): Promise<void> {
 | 
				
			||||||
    return this.prepareLazyLoaded().then(() => {
 | 
					    await this.prepareLazyLoaded();
 | 
				
			||||||
    this.active = true;
 | 
					    this.active = true;
 | 
				
			||||||
    });
 | 
					 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  private prepareLazyLoaded(): Promise<HTMLElement|void> {
 | 
					  private prepareLazyLoaded(): Promise<HTMLElement|void> {
 | 
				
			||||||
    if (!this.loaded && this.component) {
 | 
					    if (!this.loaded && this.component) {
 | 
				
			||||||
      this.loaded = true;
 | 
					      this.loaded = true;
 | 
				
			||||||
      return attachViewToDom(this.el, this.component);
 | 
					      return attachComponent(this.delegate, this.el, this.component, ['ion-page']);
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
    return Promise.resolve();
 | 
					    return Promise.resolve();
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
@ -128,15 +129,4 @@ export class Tab {
 | 
				
			|||||||
      }
 | 
					      }
 | 
				
			||||||
    };
 | 
					    };
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
function attachViewToDom(container: HTMLElement, cmp: string): Promise<HTMLElement> {
 | 
					 | 
				
			||||||
  const el = document.createElement(cmp) as HTMLStencilElement;
 | 
					 | 
				
			||||||
  el.classList.add('ion-page');
 | 
					 | 
				
			||||||
  container.appendChild(el);
 | 
					 | 
				
			||||||
  if (el.componentOnReady) {
 | 
					 | 
				
			||||||
    return el.componentOnReady();
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
  return Promise.resolve(el);
 | 
					 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user