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: fix menubar overlay bug

Browse source
This commit is contained in:
Wagner Maciel 2025-11-19 11:29:56 -05:00 committed by Jessica Janiuk
parent 040af1aaa1
commit 3e31a9967e
18 changed files with 114 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
adev/src/content/examples/aria/menubar/src/basic/app/app.html
View file

@ -1,4 +1,4 @@
<div ngMenuBar>
<div ngMenuBar (focusin)="onFocusIn()">
<div
ngMenuItem
#fileEl
@ -11,7 +11,7 @@
</div>
<ng-template
[cdkConnectedOverlayOpen]="true"
[cdkConnectedOverlayOpen]="rendered()"
[cdkConnectedOverlay]="{origin: fileEl, usePopover: 'inline'}"
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
cdkAttachPopoverAsChild
@ -101,7 +101,7 @@
</div>
<ng-template
[cdkConnectedOverlayOpen]="true"
[cdkConnectedOverlayOpen]="rendered()"
[cdkConnectedOverlay]="{origin: editEl, usePopover: 'inline'}"
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
cdkAttachPopoverAsChild
@ -163,7 +163,7 @@
</div>
<ng-template
[cdkConnectedOverlayOpen]="true"
[cdkConnectedOverlayOpen]="rendered()"
[cdkConnectedOverlay]="{origin: viewEl, usePopover: 'inline'}"
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
cdkAttachPopoverAsChild
@ -213,7 +213,7 @@
</div>
<ng-template
[cdkConnectedOverlayOpen]="true"
[cdkConnectedOverlayOpen]="rendered()"
[cdkConnectedOverlay]="{origin: insertEl, usePopover: 'inline'}"
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
cdkAttachPopoverAsChild
@ -314,7 +314,7 @@
</div>
<ng-template
[cdkConnectedOverlayOpen]="true"
[cdkConnectedOverlayOpen]="rendered()"
[cdkConnectedOverlay]="{origin: formatEl, usePopover: 'inline'}"
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
cdkAttachPopoverAsChild

10
adev/src/content/examples/aria/menubar/src/basic/app/app.ts
View file

@ -1,4 +1,4 @@
import {AfterViewInit, Component, signal, viewChild} from '@angular/core';
import {Component, signal, viewChild} from '@angular/core';
import {MenuBar, Menu, MenuContent, MenuItem} from '@angular/aria/menu';
import {OverlayModule} from '@angular/cdk/overlay';
@ -9,7 +9,7 @@ import {OverlayModule} from '@angular/cdk/overlay';
imports: [MenuBar, Menu, MenuContent, MenuItem, OverlayModule],
standalone: true,
})
export class App implements AfterViewInit {
export class App {
fileMenu = viewChild<Menu<string>>('fileMenu');
shareMenu = viewChild<Menu<string>>('shareMenu');
editMenu = viewChild<Menu<string>>('editMenu');
@ -25,9 +25,7 @@ export class App implements AfterViewInit {
rendered = signal(false);
ngAfterViewInit() {
setTimeout(() => {
debugger;
}, 500);
onFocusIn() {
this.rendered.set(true);
}
}

12
adev/src/content/examples/aria/menubar/src/basic/material/app/app.html
View file

@ -1,4 +1,4 @@
<div ngMenuBar class="material-menubar">
<div ngMenuBar class="material-menubar" (focusin)="onFocusIn()">
<div
ngMenuItem
#fileEl
@ -11,7 +11,7 @@
</div>
<ng-template
[cdkConnectedOverlayOpen]="true"
[cdkConnectedOverlayOpen]="rendered()"
[cdkConnectedOverlay]="{origin: fileEl, usePopover: 'inline'}"
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
cdkAttachPopoverAsChild
@ -101,7 +101,7 @@
</div>
<ng-template
[cdkConnectedOverlayOpen]="true"
[cdkConnectedOverlayOpen]="rendered()"
[cdkConnectedOverlay]="{origin: editEl, usePopover: 'inline'}"
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
cdkAttachPopoverAsChild
@ -163,7 +163,7 @@
</div>
<ng-template
[cdkConnectedOverlayOpen]="true"
[cdkConnectedOverlayOpen]="rendered()"
[cdkConnectedOverlay]="{origin: viewEl, usePopover: 'inline'}"
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
cdkAttachPopoverAsChild
@ -213,7 +213,7 @@
</div>
<ng-template
[cdkConnectedOverlayOpen]="true"
[cdkConnectedOverlayOpen]="rendered()"
[cdkConnectedOverlay]="{origin: insertEl, usePopover: 'inline'}"
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
cdkAttachPopoverAsChild
@ -314,7 +314,7 @@
</div>
<ng-template
[cdkConnectedOverlayOpen]="true"
[cdkConnectedOverlayOpen]="rendered()"
[cdkConnectedOverlay]="{origin: formatEl, usePopover: 'inline'}"
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
cdkAttachPopoverAsChild

8
adev/src/content/examples/aria/menubar/src/basic/material/app/app.ts
View file

@ -1,4 +1,4 @@
import {Component, viewChild} from '@angular/core';
import {Component, signal, viewChild} from '@angular/core';
import {MenuBar, Menu, MenuContent, MenuItem} from '@angular/aria/menu';
import {OverlayModule} from '@angular/cdk/overlay';
@ -22,4 +22,10 @@ export class App {
sizeMenu = viewChild<Menu<string>>('sizeMenu');
paragraphMenu = viewChild<Menu<string>>('paragraphMenu');
alignMenu = viewChild<Menu<string>>('alignMenu');
rendered = signal(false);
onFocusIn() {
this.rendered.set(true);
}
}

12
adev/src/content/examples/aria/menubar/src/basic/retro/app/app.html
View file

@ -1,4 +1,4 @@
<div ngMenuBar class="retro-menubar">
<div ngMenuBar class="retro-menubar" (focusin)="onFocusIn()">
<div
ngMenuItem
#fileEl
@ -11,7 +11,7 @@
</div>
<ng-template
[cdkConnectedOverlayOpen]="true"
[cdkConnectedOverlayOpen]="rendered()"
[cdkConnectedOverlay]="{origin: fileEl, usePopover: 'inline'}"
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
cdkAttachPopoverAsChild
@ -101,7 +101,7 @@
</div>
<ng-template
[cdkConnectedOverlayOpen]="true"
[cdkConnectedOverlayOpen]="rendered()"
[cdkConnectedOverlay]="{origin: editEl, usePopover: 'inline'}"
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
cdkAttachPopoverAsChild
@ -163,7 +163,7 @@
</div>
<ng-template
[cdkConnectedOverlayOpen]="true"
[cdkConnectedOverlayOpen]="rendered()"
[cdkConnectedOverlay]="{origin: viewEl, usePopover: 'inline'}"
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
cdkAttachPopoverAsChild
@ -213,7 +213,7 @@
</div>
<ng-template
[cdkConnectedOverlayOpen]="true"
[cdkConnectedOverlayOpen]="rendered()"
[cdkConnectedOverlay]="{origin: insertEl, usePopover: 'inline'}"
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
cdkAttachPopoverAsChild
@ -314,7 +314,7 @@
</div>
<ng-template
[cdkConnectedOverlayOpen]="true"
[cdkConnectedOverlayOpen]="rendered()"
[cdkConnectedOverlay]="{origin: formatEl, usePopover: 'inline'}"
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
cdkAttachPopoverAsChild

8
adev/src/content/examples/aria/menubar/src/basic/retro/app/app.ts
View file

@ -1,4 +1,4 @@
import {Component, viewChild} from '@angular/core';
import {Component, signal, viewChild} from '@angular/core';
import {MenuBar, Menu, MenuContent, MenuItem} from '@angular/aria/menu';
import {OverlayModule} from '@angular/cdk/overlay';
@ -22,4 +22,10 @@ export class App {
sizeMenu = viewChild<Menu<string>>('sizeMenu');
paragraphMenu = viewChild<Menu<string>>('paragraphMenu');
alignMenu = viewChild<Menu<string>>('alignMenu');
rendered = signal(false);
onFocusIn() {
this.rendered.set(true);
}
}

12
adev/src/content/examples/aria/menubar/src/disabled/app/app.html
View file

@ -1,4 +1,4 @@
<div ngMenuBar>
<div ngMenuBar (focusin)="onFocusIn()">
<div
ngMenuItem
#fileEl
@ -11,7 +11,7 @@
</div>
<ng-template
[cdkConnectedOverlayOpen]="true"
[cdkConnectedOverlayOpen]="rendered()"
[cdkConnectedOverlay]="{origin: fileEl, usePopover: 'inline'}"
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
cdkAttachPopoverAsChild
@ -101,7 +101,7 @@
</div>
<ng-template
[cdkConnectedOverlayOpen]="true"
[cdkConnectedOverlayOpen]="rendered()"
[cdkConnectedOverlay]="{origin: editEl, usePopover: 'inline'}"
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
cdkAttachPopoverAsChild
@ -163,7 +163,7 @@
</div>
<ng-template
[cdkConnectedOverlayOpen]="true"
[cdkConnectedOverlayOpen]="rendered()"
[cdkConnectedOverlay]="{origin: viewEl, usePopover: 'inline'}"
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
cdkAttachPopoverAsChild
@ -213,7 +213,7 @@
</div>
<ng-template
[cdkConnectedOverlayOpen]="true"
[cdkConnectedOverlayOpen]="rendered()"
[cdkConnectedOverlay]="{origin: insertEl, usePopover: 'inline'}"
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
cdkAttachPopoverAsChild
@ -314,7 +314,7 @@
</div>
<ng-template
[cdkConnectedOverlayOpen]="true"
[cdkConnectedOverlayOpen]="rendered()"
[cdkConnectedOverlay]="{origin: formatEl, usePopover: 'inline'}"
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
cdkAttachPopoverAsChild

10
adev/src/content/examples/aria/menubar/src/disabled/app/app.ts
View file

@ -1,4 +1,4 @@
import {AfterViewInit, Component, signal, viewChild} from '@angular/core';
import {Component, signal, viewChild} from '@angular/core';
import {MenuBar, Menu, MenuContent, MenuItem} from '@angular/aria/menu';
import {OverlayModule} from '@angular/cdk/overlay';
@ -9,7 +9,7 @@ import {OverlayModule} from '@angular/cdk/overlay';
imports: [MenuBar, Menu, MenuContent, MenuItem, OverlayModule],
standalone: true,
})
export class App implements AfterViewInit {
export class App {
fileMenu = viewChild<Menu<string>>('fileMenu');
shareMenu = viewChild<Menu<string>>('shareMenu');
editMenu = viewChild<Menu<string>>('editMenu');
@ -25,9 +25,7 @@ export class App implements AfterViewInit {
rendered = signal(false);
ngAfterViewInit() {
setTimeout(() => {
debugger;
}, 500);
onFocusIn() {
this.rendered.set(true);
}
}

12
adev/src/content/examples/aria/menubar/src/disabled/material/app/app.html
View file

@ -1,4 +1,4 @@
<div ngMenuBar class="material-menubar">
<div ngMenuBar class="material-menubar" (focusin)="onFocusIn()">
<div
ngMenuItem
#fileEl
@ -11,7 +11,7 @@
</div>
<ng-template
[cdkConnectedOverlayOpen]="true"
[cdkConnectedOverlayOpen]="rendered()"
[cdkConnectedOverlay]="{origin: fileEl, usePopover: 'inline'}"
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
cdkAttachPopoverAsChild
@ -101,7 +101,7 @@
</div>
<ng-template
[cdkConnectedOverlayOpen]="true"
[cdkConnectedOverlayOpen]="rendered()"
[cdkConnectedOverlay]="{origin: editEl, usePopover: 'inline'}"
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
cdkAttachPopoverAsChild
@ -163,7 +163,7 @@
</div>
<ng-template
[cdkConnectedOverlayOpen]="true"
[cdkConnectedOverlayOpen]="rendered()"
[cdkConnectedOverlay]="{origin: viewEl, usePopover: 'inline'}"
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
cdkAttachPopoverAsChild
@ -213,7 +213,7 @@
</div>
<ng-template
[cdkConnectedOverlayOpen]="true"
[cdkConnectedOverlayOpen]="rendered()"
[cdkConnectedOverlay]="{origin: insertEl, usePopover: 'inline'}"
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
cdkAttachPopoverAsChild
@ -314,7 +314,7 @@
</div>
<ng-template
[cdkConnectedOverlayOpen]="true"
[cdkConnectedOverlayOpen]="rendered()"
[cdkConnectedOverlay]="{origin: formatEl, usePopover: 'inline'}"
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
cdkAttachPopoverAsChild

8
adev/src/content/examples/aria/menubar/src/disabled/material/app/app.ts
View file

@ -1,4 +1,4 @@
import {Component, viewChild} from '@angular/core';
import {Component, signal, viewChild} from '@angular/core';
import {MenuBar, Menu, MenuContent, MenuItem} from '@angular/aria/menu';
import {OverlayModule} from '@angular/cdk/overlay';
@ -22,4 +22,10 @@ export class App {
sizeMenu = viewChild<Menu<string>>('sizeMenu');
paragraphMenu = viewChild<Menu<string>>('paragraphMenu');
alignMenu = viewChild<Menu<string>>('alignMenu');
rendered = signal(false);
onFocusIn() {
this.rendered.set(true);
}
}

12
adev/src/content/examples/aria/menubar/src/disabled/retro/app/app.html
View file

@ -1,4 +1,4 @@
<div ngMenuBar class="retro-menubar">
<div ngMenuBar class="retro-menubar" (focusin)="onFocusIn()">
<div
ngMenuItem
#fileEl
@ -11,7 +11,7 @@
</div>
<ng-template
[cdkConnectedOverlayOpen]="true"
[cdkConnectedOverlayOpen]="rendered()"
[cdkConnectedOverlay]="{origin: fileEl, usePopover: 'inline'}"
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
cdkAttachPopoverAsChild
@ -101,7 +101,7 @@
</div>
<ng-template
[cdkConnectedOverlayOpen]="true"
[cdkConnectedOverlayOpen]="rendered()"
[cdkConnectedOverlay]="{origin: editEl, usePopover: 'inline'}"
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
cdkAttachPopoverAsChild
@ -163,7 +163,7 @@
</div>
<ng-template
[cdkConnectedOverlayOpen]="true"
[cdkConnectedOverlayOpen]="rendered()"
[cdkConnectedOverlay]="{origin: viewEl, usePopover: 'inline'}"
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
cdkAttachPopoverAsChild
@ -213,7 +213,7 @@
</div>
<ng-template
[cdkConnectedOverlayOpen]="true"
[cdkConnectedOverlayOpen]="rendered()"
[cdkConnectedOverlay]="{origin: insertEl, usePopover: 'inline'}"
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
cdkAttachPopoverAsChild
@ -314,7 +314,7 @@
</div>
<ng-template
[cdkConnectedOverlayOpen]="true"
[cdkConnectedOverlayOpen]="rendered()"
[cdkConnectedOverlay]="{origin: formatEl, usePopover: 'inline'}"
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
cdkAttachPopoverAsChild

8
adev/src/content/examples/aria/menubar/src/disabled/retro/app/app.ts
View file

@ -1,4 +1,4 @@
import {Component, viewChild} from '@angular/core';
import {Component, signal, viewChild} from '@angular/core';
import {MenuBar, Menu, MenuContent, MenuItem} from '@angular/aria/menu';
import {OverlayModule} from '@angular/cdk/overlay';
@ -22,4 +22,10 @@ export class App {
sizeMenu = viewChild<Menu<string>>('sizeMenu');
paragraphMenu = viewChild<Menu<string>>('paragraphMenu');
alignMenu = viewChild<Menu<string>>('alignMenu');
rendered = signal(false);
onFocusIn() {
this.rendered.set(true);
}
}

24
adev/src/content/examples/aria/menubar/src/rtl/app/app.html
View file

@ -1,4 +1,4 @@
<div ngMenuBar dir="rtl">
<div ngMenuBar dir="rtl" (focusin)="onFocusIn()">
<div
ngMenuItem
#fileEl
@ -11,7 +11,7 @@
</div>
<ng-template
[cdkConnectedOverlayOpen]="true"
[cdkConnectedOverlayOpen]="rendered()"
[cdkConnectedOverlay]="{origin: fileEl, usePopover: 'inline'}"
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
cdkAttachPopoverAsChild
@ -101,7 +101,7 @@
</div>
<ng-template
[cdkConnectedOverlayOpen]="true"
[cdkConnectedOverlayOpen]="rendered()"
[cdkConnectedOverlay]="{origin: editEl, usePopover: 'inline'}"
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
cdkAttachPopoverAsChild
@ -163,7 +163,7 @@
</div>
<ng-template
[cdkConnectedOverlayOpen]="true"
[cdkConnectedOverlayOpen]="rendered()"
[cdkConnectedOverlay]="{origin: viewEl, usePopover: 'inline'}"
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
cdkAttachPopoverAsChild
@ -213,7 +213,7 @@
</div>
<ng-template
[cdkConnectedOverlayOpen]="true"
[cdkConnectedOverlayOpen]="rendered()"
[cdkConnectedOverlay]="{origin: insertEl, usePopover: 'inline'}"
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
cdkAttachPopoverAsChild
@ -223,7 +223,7 @@
<div ngMenuItem #imageEl value="Image" [submenu]="imageMenu()">
<span class="icon material-symbols-outlined">image</span>
<span class="label">Image</span>
<span class="icon arrow material-symbols-outlined">arrow_right</span>
<span class="icon arrow material-symbols-outlined">arrow_left</span>
</div>
<ng-template
@ -260,7 +260,7 @@
<div ngMenuItem #chartEl value="Chart" [submenu]="chartMenu()">
<span class="icon material-symbols-outlined">insert_chart</span>
<span class="label">Chart</span>
<span class="icon arrow material-symbols-outlined">arrow_right</span>
<span class="icon arrow material-symbols-outlined">arrow_left</span>
</div>
<ng-template
@ -314,7 +314,7 @@
</div>
<ng-template
[cdkConnectedOverlayOpen]="true"
[cdkConnectedOverlayOpen]="rendered()"
[cdkConnectedOverlay]="{origin: formatEl, usePopover: 'inline'}"
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
cdkAttachPopoverAsChild
@ -324,7 +324,7 @@
<div ngMenuItem #textEl #textItem="ngMenuItem" value="Text" [submenu]="textMenu()">
<span class="icon material-symbols-outlined">format_bold</span>
<span class="label">Text</span>
<span class="icon arrow material-symbols-outlined">arrow_right</span>
<span class="icon arrow material-symbols-outlined">arrow_left</span>
</div>
<ng-template
@ -363,7 +363,7 @@
<div ngMenuItem #sizeEl value="Size" [submenu]="sizeMenu()">
<span class="label">Size</span>
<span class="icon arrow material-symbols-outlined">arrow_right</span>
<span class="icon arrow material-symbols-outlined">arrow_left</span>
</div>
<ng-template
@ -393,7 +393,7 @@
<div ngMenuItem #paragraphEl value="Paragraph styles" [submenu]="paragraphMenu()">
<span class="icon material-symbols-outlined">format_align_justify</span>
<span class="label">Paragraph styles</span>
<span class="icon arrow material-symbols-outlined">arrow_right</span>
<span class="icon arrow material-symbols-outlined">arrow_left</span>
</div>
<ng-template
@ -414,7 +414,7 @@
<div ngMenuItem #alignEl [submenu]="alignMenu()" value="Align & indent">
<span class="icon material-symbols-outlined">format_indent_increase</span>
<span class="label">Align & indent</span>
<span class="icon arrow material-symbols-outlined">arrow_right</span>
<span class="icon arrow material-symbols-outlined">arrow_left</span>
</div>
<ng-template

10
adev/src/content/examples/aria/menubar/src/rtl/app/app.ts
View file

@ -1,4 +1,4 @@
import {AfterViewInit, Component, signal, viewChild} from '@angular/core';
import {Component, signal, viewChild} from '@angular/core';
import {MenuBar, Menu, MenuContent, MenuItem} from '@angular/aria/menu';
import {OverlayModule} from '@angular/cdk/overlay';
import {Dir} from '@angular/cdk/bidi';
@ -10,7 +10,7 @@ import {Dir} from '@angular/cdk/bidi';
imports: [Dir, MenuBar, Menu, MenuContent, MenuItem, OverlayModule],
standalone: true,
})
export class App implements AfterViewInit {
export class App {
fileMenu = viewChild<Menu<string>>('fileMenu');
shareMenu = viewChild<Menu<string>>('shareMenu');
editMenu = viewChild<Menu<string>>('editMenu');
@ -26,9 +26,7 @@ export class App implements AfterViewInit {
rendered = signal(false);
ngAfterViewInit() {
setTimeout(() => {
debugger;
}, 500);
onFocusIn() {
this.rendered.set(true);
}
}

12
adev/src/content/examples/aria/menubar/src/rtl/material/app/app.html
View file

@ -1,4 +1,4 @@
<div ngMenuBar class="material-menubar" dir="rtl">
<div ngMenuBar class="material-menubar" dir="rtl" (focusin)="onFocusIn()">
<div
ngMenuItem
#fileEl
@ -11,7 +11,7 @@
</div>
<ng-template
[cdkConnectedOverlayOpen]="true"
[cdkConnectedOverlayOpen]="rendered()"
[cdkConnectedOverlay]="{origin: fileEl, usePopover: 'inline'}"
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
cdkAttachPopoverAsChild
@ -101,7 +101,7 @@
</div>
<ng-template
[cdkConnectedOverlayOpen]="true"
[cdkConnectedOverlayOpen]="rendered()"
[cdkConnectedOverlay]="{origin: editEl, usePopover: 'inline'}"
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
cdkAttachPopoverAsChild
@ -163,7 +163,7 @@
</div>
<ng-template
[cdkConnectedOverlayOpen]="true"
[cdkConnectedOverlayOpen]="rendered()"
[cdkConnectedOverlay]="{origin: viewEl, usePopover: 'inline'}"
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
cdkAttachPopoverAsChild
@ -213,7 +213,7 @@
</div>
<ng-template
[cdkConnectedOverlayOpen]="true"
[cdkConnectedOverlayOpen]="rendered()"
[cdkConnectedOverlay]="{origin: insertEl, usePopover: 'inline'}"
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
cdkAttachPopoverAsChild
@ -314,7 +314,7 @@
</div>
<ng-template
[cdkConnectedOverlayOpen]="true"
[cdkConnectedOverlayOpen]="rendered()"
[cdkConnectedOverlay]="{origin: formatEl, usePopover: 'inline'}"
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
cdkAttachPopoverAsChild

8
adev/src/content/examples/aria/menubar/src/rtl/material/app/app.ts
View file

@ -1,4 +1,4 @@
import {Component, viewChild} from '@angular/core';
import {Component, signal, viewChild} from '@angular/core';
import {MenuBar, Menu, MenuContent, MenuItem} from '@angular/aria/menu';
import {OverlayModule} from '@angular/cdk/overlay';
import {Dir} from '@angular/cdk/bidi';
@ -23,4 +23,10 @@ export class App {
sizeMenu = viewChild<Menu<string>>('sizeMenu');
paragraphMenu = viewChild<Menu<string>>('paragraphMenu');
alignMenu = viewChild<Menu<string>>('alignMenu');
rendered = signal(false);
onFocusIn() {
this.rendered.set(true);
}
}

12
adev/src/content/examples/aria/menubar/src/rtl/retro/app/app.html
View file

@ -1,4 +1,4 @@
<div ngMenuBar class="retro-menubar" dir="rtl">
<div ngMenuBar class="retro-menubar" dir="rtl" (focusin)="onFocusIn()">
<div
ngMenuItem
#fileEl
@ -11,7 +11,7 @@
</div>
<ng-template
[cdkConnectedOverlayOpen]="true"
[cdkConnectedOverlayOpen]="rendered()"
[cdkConnectedOverlay]="{origin: fileEl, usePopover: 'inline'}"
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
cdkAttachPopoverAsChild
@ -101,7 +101,7 @@
</div>
<ng-template
[cdkConnectedOverlayOpen]="true"
[cdkConnectedOverlayOpen]="rendered()"
[cdkConnectedOverlay]="{origin: editEl, usePopover: 'inline'}"
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
cdkAttachPopoverAsChild
@ -163,7 +163,7 @@
</div>
<ng-template
[cdkConnectedOverlayOpen]="true"
[cdkConnectedOverlayOpen]="rendered()"
[cdkConnectedOverlay]="{origin: viewEl, usePopover: 'inline'}"
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
cdkAttachPopoverAsChild
@ -213,7 +213,7 @@
</div>
<ng-template
[cdkConnectedOverlayOpen]="true"
[cdkConnectedOverlayOpen]="rendered()"
[cdkConnectedOverlay]="{origin: insertEl, usePopover: 'inline'}"
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
cdkAttachPopoverAsChild
@ -314,7 +314,7 @@
</div>
<ng-template
[cdkConnectedOverlayOpen]="true"
[cdkConnectedOverlayOpen]="rendered()"
[cdkConnectedOverlay]="{origin: formatEl, usePopover: 'inline'}"
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
cdkAttachPopoverAsChild

8
adev/src/content/examples/aria/menubar/src/rtl/retro/app/app.ts
View file

@ -1,4 +1,4 @@
import {Component, viewChild} from '@angular/core';
import {Component, signal, viewChild} from '@angular/core';
import {MenuBar, Menu, MenuContent, MenuItem} from '@angular/aria/menu';
import {OverlayModule} from '@angular/cdk/overlay';
import {Dir} from '@angular/cdk/bidi';
@ -23,4 +23,10 @@ export class App {
sizeMenu = viewChild<Menu<string>>('sizeMenu');
paragraphMenu = viewChild<Menu<string>>('paragraphMenu');
alignMenu = viewChild<Menu<string>>('alignMenu');
rendered = signal(false);
onFocusIn() {
this.rendered.set(true);
}
}