File tree Expand file tree Collapse file tree 2 files changed +28
-11
lines changed
docs/src/app/pages/component-viewer Expand file tree Collapse file tree 2 files changed +28
-11
lines changed Original file line number Diff line number Diff line change 1
1
< div class ="docs-component-viewer ">
2
- < nav mat-tab-nav-bar mat-stretch-tabs ="false " class ="docs-component-viewer-tabbed-content "
3
- aria-label ="Documentation Sections "
4
- id ="component-viewer "
5
- focusOnNavigation
6
- [tabPanel] ="panel ">
2
+ < nav
3
+ mat-tab-nav-bar
4
+ mat-stretch-tabs ="false "
5
+ class ="docs-component-viewer-tabbed-content docs-sticky-top "
6
+ aria-label ="Documentation Sections "
7
+ id ="component-viewer "
8
+ focusOnNavigation
9
+ [tabPanel] ="panel "
10
+ >
7
11
@for (section of sections; track section) {
8
- < a mat-tab-link class ="docs-component-viewer-section-tab "
9
- [routerLink] ="section.toLowerCase() "
10
- routerLinkActive #rla ="routerLinkActive "
11
- [active] ="rla.isActive "> {{section}}</ a >
12
+ < a
13
+ mat-tab-link
14
+ class ="docs-component-viewer-section-tab "
15
+ [routerLink] ="section.toLowerCase() "
16
+ routerLinkActive
17
+ #rla ="routerLinkActive "
18
+ [active] ="rla.isActive "
19
+ > {{section}}</ a
20
+ >
12
21
}
13
22
</ nav >
14
23
Original file line number Diff line number Diff line change @@ -30,6 +30,13 @@ app-component-viewer {
30
30
31
31
.docs-component-viewer-tabbed-content {
32
32
margin-bottom : 25px ;
33
+
34
+ & .docs-sticky-top {
35
+ position : sticky ;
36
+ top : 0 ;
37
+ z-index : 1 ;
38
+ background : var (--mat-sys-surface );
39
+ }
33
40
}
34
41
35
42
.docs-component-viewer-content {
@@ -38,7 +45,8 @@ app-component-viewer {
38
45
39
46
// Display outlet components with toc as flex and switch to
40
47
// vertical direction on small screens
41
- component-overview , component-api {
48
+ component-overview ,
49
+ component-api {
42
50
display : flex ;
43
51
align-items : flex-start ;
44
52
overflow : visible ;
@@ -49,7 +57,7 @@ app-component-viewer {
49
57
}
50
58
51
59
table-of-contents {
52
- top : 35 px ;
60
+ top : 50 px ;
53
61
position : sticky ;
54
62
55
63
// Reposition on top of content on small screens and remove
You can’t perform that action at this time.
0 commit comments