tab-button.js 2.5KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. import { Component, ElementRef, EventEmitter, HostListener, Input, Output, Renderer } from '@angular/core';
  2. import { Config } from '../../config/config';
  3. import { Ion } from '../ion';
  4. /**
  5. * @hidden
  6. */
  7. export class TabButton extends Ion {
  8. constructor(config, elementRef, renderer) {
  9. super(config, elementRef, renderer);
  10. this.ionSelect = new EventEmitter();
  11. this.disHover = (config.get('hoverCSS') === false);
  12. this.layout = config.get('tabsLayout');
  13. }
  14. ngOnInit() {
  15. this.tab.btn = this;
  16. this.layout = this.tab.parent.tabsLayout || this.layout;
  17. this.hasTitle = !!this.tab.tabTitle;
  18. this.hasIcon = !!this.tab.tabIcon && this.layout !== 'icon-hide';
  19. this.hasTitleOnly = (this.hasTitle && !this.hasIcon);
  20. this.hasIconOnly = (this.hasIcon && !this.hasTitle);
  21. this.hasBadge = !!this.tab.tabBadge;
  22. }
  23. onClick() {
  24. this.ionSelect.emit(this.tab);
  25. return false;
  26. }
  27. updateHref(href) {
  28. this.setElementAttribute('href', href);
  29. }
  30. }
  31. TabButton.decorators = [
  32. { type: Component, args: [{
  33. selector: '.tab-button',
  34. template: '<ion-icon *ngIf="tab.tabIcon" [name]="tab.tabIcon" [isActive]="tab.isSelected" class="tab-button-icon"></ion-icon>' +
  35. '<span *ngIf="tab.tabTitle" class="tab-button-text">{{tab.tabTitle}}</span>' +
  36. '<ion-badge *ngIf="tab.tabBadge" class="tab-badge" [color]="tab.tabBadgeStyle">{{tab.tabBadge}}</ion-badge>' +
  37. '<div class="button-effect"></div>',
  38. host: {
  39. '[attr.id]': 'tab._btnId',
  40. '[attr.aria-controls]': 'tab._tabId',
  41. '[attr.aria-selected]': 'tab.isSelected',
  42. '[class.has-title]': 'hasTitle',
  43. '[class.has-icon]': 'hasIcon',
  44. '[class.has-title-only]': 'hasTitleOnly',
  45. '[class.icon-only]': 'hasIconOnly',
  46. '[class.has-badge]': 'hasBadge',
  47. '[class.disable-hover]': 'disHover',
  48. '[class.tab-disabled]': '!tab.enabled',
  49. '[class.tab-hidden]': '!tab.show',
  50. }
  51. },] },
  52. ];
  53. /** @nocollapse */
  54. TabButton.ctorParameters = () => [
  55. { type: Config, },
  56. { type: ElementRef, },
  57. { type: Renderer, },
  58. ];
  59. TabButton.propDecorators = {
  60. 'tab': [{ type: Input },],
  61. 'ionSelect': [{ type: Output },],
  62. 'onClick': [{ type: HostListener, args: ['click',] },],
  63. };
  64. //# sourceMappingURL=tab-button.js.map