@quadrel-enterprise-ui/framework 18.21.4 → 18.21.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -55,6 +55,8 @@ import * as i0 from "@angular/core";
|
|
|
55
55
|
*
|
|
56
56
|
* #### **Usage**
|
|
57
57
|
*
|
|
58
|
+
* **Basic Example:**
|
|
59
|
+
*
|
|
58
60
|
* ```typescript
|
|
59
61
|
* @Component({ ... })
|
|
60
62
|
* export class MyPageTabsComponent {
|
|
@@ -96,6 +98,74 @@ import * as i0 from "@angular/core";
|
|
|
96
98
|
* </qd-page-tab>
|
|
97
99
|
* </qd-page-tabs>
|
|
98
100
|
* ```
|
|
101
|
+
*
|
|
102
|
+
* **Bookmarkable Tabs Example: **
|
|
103
|
+
*
|
|
104
|
+
* To enable bookmarkable tabs that sync with the browser URL, set `connectWithRouter: true`
|
|
105
|
+
* and provide a unique `name` for each tab:
|
|
106
|
+
*
|
|
107
|
+
* ```typescript
|
|
108
|
+
* import { Component } from '@angular/core';
|
|
109
|
+
* import { Router } from '@angular/router';
|
|
110
|
+
* import { QdPageTabsConfig, QdPageTabConfig } from '@qd-ui/qd-ui';
|
|
111
|
+
*
|
|
112
|
+
* @Component({
|
|
113
|
+
* selector: 'app-bookmarkable-tabs',
|
|
114
|
+
* template: `
|
|
115
|
+
* <qd-page-tabs [config]="pageTabsConfig">
|
|
116
|
+
* <qd-page-tab [config]="overviewTabConfig">
|
|
117
|
+
* <qd-section>
|
|
118
|
+
* This is the overview tab content.
|
|
119
|
+
* </qd-section>
|
|
120
|
+
* </qd-page-tab>
|
|
121
|
+
*
|
|
122
|
+
* <qd-page-tab [config]="detailTabConfig">
|
|
123
|
+
* <qd-section>
|
|
124
|
+
* This is the detail tab content.
|
|
125
|
+
* </qd-section>
|
|
126
|
+
* </qd-page-tab>
|
|
127
|
+
*
|
|
128
|
+
* <qd-page-tab [config]="controlResultsTabConfig">
|
|
129
|
+
* <qd-section>
|
|
130
|
+
* This is the control results tab content.
|
|
131
|
+
* </qd-section>
|
|
132
|
+
* </qd-page-tab>
|
|
133
|
+
* </qd-page-tabs>
|
|
134
|
+
* `
|
|
135
|
+
* })
|
|
136
|
+
* export class BookmarkableTabsComponent {
|
|
137
|
+
* // Enable router connection for bookmarkable tabs
|
|
138
|
+
* pageTabsConfig: QdPageTabsConfig = {
|
|
139
|
+
* selectedIndex: 0,
|
|
140
|
+
* connectWithRouter: true
|
|
141
|
+
* };
|
|
142
|
+
*
|
|
143
|
+
* // Each tab must have a unique 'name' when connectWithRouter is enabled
|
|
144
|
+
* overviewTabConfig: QdPageTabConfig = {
|
|
145
|
+
* label: { i18n: 'Overview' },
|
|
146
|
+
* name: 'overview' // Required for router connection
|
|
147
|
+
* };
|
|
148
|
+
*
|
|
149
|
+
* detailTabConfig: QdPageTabConfig = {
|
|
150
|
+
* label: { i18n: 'Details' },
|
|
151
|
+
* name: 'details' // Required for router connection
|
|
152
|
+
* };
|
|
153
|
+
*
|
|
154
|
+
* controlResultsTabConfig: QdPageTabConfig = {
|
|
155
|
+
* label: { i18n: 'Control Results' },
|
|
156
|
+
* name: 'controlResults' // Required for router connection
|
|
157
|
+
* };
|
|
158
|
+
*
|
|
159
|
+
* constructor (private router: Router) {}
|
|
160
|
+
* }
|
|
161
|
+
* ```
|
|
162
|
+
*
|
|
163
|
+
* **Bookmarkable Tabs Behavior: **
|
|
164
|
+
* - URLs will include query parameter: `?tab=overview`, `?tab=details`, `?tab=controlResults`
|
|
165
|
+
* - Users can bookmark specific tabs and return directly to them
|
|
166
|
+
* - Browser back/forward buttons work with tab navigation
|
|
167
|
+
* - If an invalid tab name is provided in URL, the first available tab is selected
|
|
168
|
+
* - If no tab parameter is present, the `selectedIndex` or first non-disabled tab is selected
|
|
99
169
|
*/
|
|
100
170
|
export declare class QdPageTabsComponent extends CdkStepper implements OnInit, OnChanges, AfterContentInit, AfterViewInit, OnDestroy {
|
|
101
171
|
readonly footerService: QdPageFooterService;
|
|
@@ -149,6 +219,6 @@ export declare class QdPageTabsComponent extends CdkStepper implements OnInit, O
|
|
|
149
219
|
_getTabLabelId(i: number): string;
|
|
150
220
|
private blockCdkInput;
|
|
151
221
|
private mapSelectionChangeToTabSelectionOutput;
|
|
152
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<QdPageTabsComponent, [{ optional: true; }, { optional: true; }, null, null,
|
|
222
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<QdPageTabsComponent, [{ optional: true; }, { optional: true; }, null, null, { optional: true; }, null, null]>;
|
|
153
223
|
static ɵcmp: i0.ɵɵComponentDeclaration<QdPageTabsComponent, "qd-page-tabs", never, { "config": { "alias": "config"; "required": false; }; "testId": { "alias": "data-test-id"; "required": false; }; }, { "tabSelection": "tabSelection"; }, never, never, true, never>;
|
|
154
224
|
}
|