File tree 1 file changed +27
-0
lines changed
src/cdk-experimental/tabs
1 file changed +27
-0
lines changed Original file line number Diff line number Diff line change @@ -23,6 +23,26 @@ import {TabpanelPattern} from '@angular/cdk-experimental/ui-patterns/tabs/tabpan
23
23
import { toSignal } from '@angular/core/rxjs-interop' ;
24
24
import { _IdGenerator } from '@angular/cdk/a11y' ;
25
25
26
+ /**
27
+ * A Tabs container.
28
+ *
29
+ * Represents a set of layered sections of content. The CdkTabs is a container meant to be used with
30
+ * CdkTablist, CdkTab, and CdkTabpanel as follows:
31
+ *
32
+ * ```html
33
+ * <div cdkTabs>
34
+ * <ul cdkTablist>
35
+ * <li cdkTab>Tab 1</li>
36
+ * <li cdkTab>Tab 2</li>
37
+ * <li cdkTab>Tab 3</li>
38
+ * </ul>
39
+ *
40
+ * <div cdkTabpanel>Tab content 1</div>
41
+ * <div cdkTabpanel>Tab content 2</div>
42
+ * <div cdkTabpanel>Tab content 3</div>
43
+ * </div>
44
+ * ```
45
+ */
26
46
@Directive ( {
27
47
selector : '[cdkTabs]' ,
28
48
exportAs : 'cdkTabs' ,
@@ -44,6 +64,11 @@ export class CdkTabs {
44
64
tabpanels = computed ( ( ) => this . _cdkTabpanels ( ) . map ( tabpanel => tabpanel . pattern ) ) ;
45
65
}
46
66
67
+ /**
68
+ * A Tablist container.
69
+ *
70
+ * Controls a list of CdkTab(s).
71
+ */
47
72
@Directive ( {
48
73
selector : '[cdkTablist]' ,
49
74
exportAs : 'cdkTablist' ,
@@ -105,6 +130,7 @@ export class CdkTablist {
105
130
} ) ;
106
131
}
107
132
133
+ /** A selectable tab in a tablist. */
108
134
@Directive ( {
109
135
selector : '[cdkTab]' ,
110
136
exportAs : 'cdkTab' ,
@@ -159,6 +185,7 @@ export class CdkTab {
159
185
} ) ;
160
186
}
161
187
188
+ /** A Tabpanel container for the resources of layered content associated with a tab. */
162
189
@Directive ( {
163
190
selector : '[cdkTabpanel]' ,
164
191
exportAs : 'cdkTabpanel' ,
You can’t perform that action at this time.
0 commit comments