tab-group.d.ts 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. /**
  2. * @license
  3. * Copyright Google LLC All Rights Reserved.
  4. *
  5. * Use of this source code is governed by an MIT-style license that can be
  6. * found in the LICENSE file at https://angular.io/license
  7. */
  8. import { AfterContentChecked, AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, QueryList, InjectionToken } from '@angular/core';
  9. import { CanColor, CanColorCtor, CanDisableRipple, CanDisableRippleCtor, ThemePalette } from '@angular/material/core';
  10. import { MatTab } from './tab';
  11. import { MatTabHeader } from './tab-header';
  12. /** A simple change event emitted on focus or selection changes. */
  13. export declare class MatTabChangeEvent {
  14. /** Index of the currently-selected tab. */
  15. index: number;
  16. /** Reference to the currently-selected tab. */
  17. tab: MatTab;
  18. }
  19. /** Possible positions for the tab header. */
  20. export declare type MatTabHeaderPosition = 'above' | 'below';
  21. /** Object that can be used to configure the default options for the tabs module. */
  22. export interface MatTabsConfig {
  23. /** Duration for the tab animation. Must be a valid CSS value (e.g. 600ms). */
  24. animationDuration?: string;
  25. }
  26. /** Injection token that can be used to provide the default options the tabs module. */
  27. export declare const MAT_TABS_CONFIG: InjectionToken<MatTabsConfig>;
  28. /** @docs-private */
  29. declare class MatTabGroupBase {
  30. _elementRef: ElementRef;
  31. constructor(_elementRef: ElementRef);
  32. }
  33. declare const _MatTabGroupMixinBase: CanColorCtor & CanDisableRippleCtor & typeof MatTabGroupBase;
  34. /**
  35. * Material design tab-group component. Supports basic tab pairs (label + content) and includes
  36. * animated ink-bar, keyboard navigation, and screen reader.
  37. * See: https://material.io/design/components/tabs.html
  38. */
  39. export declare class MatTabGroup extends _MatTabGroupMixinBase implements AfterContentInit, AfterContentChecked, OnDestroy, CanColor, CanDisableRipple {
  40. private _changeDetectorRef;
  41. _animationMode?: string | undefined;
  42. _tabs: QueryList<MatTab>;
  43. _tabBodyWrapper: ElementRef;
  44. _tabHeader: MatTabHeader;
  45. /** The tab index that should be selected after the content has been checked. */
  46. private _indexToSelect;
  47. /** Snapshot of the height of the tab body wrapper before another tab is activated. */
  48. private _tabBodyWrapperHeight;
  49. /** Subscription to tabs being added/removed. */
  50. private _tabsSubscription;
  51. /** Subscription to changes in the tab labels. */
  52. private _tabLabelSubscription;
  53. /** Whether the tab group should grow to the size of the active tab. */
  54. dynamicHeight: boolean;
  55. private _dynamicHeight;
  56. /** The index of the active tab. */
  57. selectedIndex: number | null;
  58. private _selectedIndex;
  59. /** Position of the tab header. */
  60. headerPosition: MatTabHeaderPosition;
  61. /** Duration for the tab animation. Will be normalized to milliseconds if no units are set. */
  62. animationDuration: string;
  63. private _animationDuration;
  64. /** Background color of the tab group. */
  65. backgroundColor: ThemePalette;
  66. private _backgroundColor;
  67. /** Output to enable support for two-way binding on `[(selectedIndex)]` */
  68. readonly selectedIndexChange: EventEmitter<number>;
  69. /** Event emitted when focus has changed within a tab group. */
  70. readonly focusChange: EventEmitter<MatTabChangeEvent>;
  71. /** Event emitted when the body animation has completed */
  72. readonly animationDone: EventEmitter<void>;
  73. /** Event emitted when the tab selection has changed. */
  74. readonly selectedTabChange: EventEmitter<MatTabChangeEvent>;
  75. private _groupId;
  76. constructor(elementRef: ElementRef, _changeDetectorRef: ChangeDetectorRef, defaultConfig?: MatTabsConfig, _animationMode?: string | undefined);
  77. /**
  78. * After the content is checked, this component knows what tabs have been defined
  79. * and what the selected index should be. This is where we can know exactly what position
  80. * each tab should be in according to the new selected index, and additionally we know how
  81. * a new selected tab should transition in (from the left or right).
  82. */
  83. ngAfterContentChecked(): void;
  84. ngAfterContentInit(): void;
  85. ngOnDestroy(): void;
  86. /** Re-aligns the ink bar to the selected tab element. */
  87. realignInkBar(): void;
  88. _focusChanged(index: number): void;
  89. private _createChangeEvent;
  90. /**
  91. * Subscribes to changes in the tab labels. This is needed, because the @Input for the label is
  92. * on the MatTab component, whereas the data binding is inside the MatTabGroup. In order for the
  93. * binding to be updated, we need to subscribe to changes in it and trigger change detection
  94. * manually.
  95. */
  96. private _subscribeToTabLabels;
  97. /** Clamps the given index to the bounds of 0 and the tabs length. */
  98. private _clampTabIndex;
  99. /** Returns a unique id for each tab label element */
  100. _getTabLabelId(i: number): string;
  101. /** Returns a unique id for each tab content element */
  102. _getTabContentId(i: number): string;
  103. /**
  104. * Sets the height of the body wrapper to the height of the activating tab if dynamic
  105. * height property is true.
  106. */
  107. _setTabBodyWrapperHeight(tabHeight: number): void;
  108. /** Removes the height of the tab body wrapper. */
  109. _removeTabBodyWrapperHeight(): void;
  110. /** Handle click events, setting new selected index if appropriate. */
  111. _handleClick(tab: MatTab, tabHeader: MatTabHeader, index: number): void;
  112. /** Retrieves the tabindex for the tab. */
  113. _getTabIndex(tab: MatTab, idx: number): number | null;
  114. }
  115. export {};