Elgato_dark/angular
1
0
Fork 0
mirror of https://github.com/angular/angular synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

docs(docs-infra): make show code button more discoverable when collapsed

Browse source 
(cherry picked from commit 48cff8c128)
This commit is contained in:
Cheng-Hsuan Tsai 2025-11-14 23:33:12 +00:00 committed by Jessica Janiuk
parent 97a6f9fd4f
commit 7020ef6c60
2 changed files with 29 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
adev/shared-docs/components/viewers/example-viewer/example-viewer.component.html
View file

@ -4,12 +4,10 @@
<span>{{ exampleMetadata()?.title }}</span>
}
@if (view() === CodeExampleViewMode.MULTI_FILE) {
@if (view() === CodeExampleViewMode.MULTI_FILE && showCode()) {
<mat-tab-group #codeTabs animationDuration="0ms" mat-stretch-tabs="false">
@if (showCode()) {
@for (tab of tabs(); track tab) {
<mat-tab [label]="tab.name" />
}
@for (tab of tabs(); track tab) {
<mat-tab [label]="tab.name" />
}
</mat-tab-group>
}
@ -19,13 +17,18 @@
type="button"
role="switch"
class="docs-example-code-toggle"
[class.docs-example-code-toggle__show]="!showCode()"
[attr.aria-checked]="showCode()"
[attr.aria-label]="showCode() ? 'Hide code' : 'Show code'"
(click)="showCode.set(!showCode())"
[matTooltip]="showCode() ? 'Hide code' : 'Show code'"
matTooltipPosition="above"
>
<docs-icon>{{showCode() ? 'code_off' : 'code'}}</docs-icon>
@if (!showCode()) {
<span class="docs-example-show-code"><docs-icon>code</docs-icon> Show Code</span>
} @else {
<docs-icon>code_off</docs-icon>
}
</button>
<button
type="button"

20
adev/shared-docs/components/viewers/example-viewer/example-viewer.component.scss
View file

@ -57,6 +57,9 @@
.docs-example-viewer-icons {
display: flex;
gap: 0.75rem;
width: 100%;
justify-content: flex-end;
padding-inline-start: 1rem;
a,
button {
@ -79,6 +82,23 @@
color: var(--tertiary-contrast);
}
}
.docs-example-code-toggle {
display: flex;
align-items: center;
width: auto;
&__show {
margin-right: auto;
}
.docs-example-show-code {
display: flex;
gap: 0.5rem;
align-items: center;
}
}
}
}