File tree Expand file tree Collapse file tree 1 file changed +61
-0
lines changed
packages/main/src/webComponents/UserMenu Expand file tree Collapse file tree 1 file changed +61
-0
lines changed Original file line number Diff line number Diff line change @@ -19,6 +19,67 @@ import * as ComponentStories from './UserMenu.stories';
19
19
20
20
<ControlsWithNote of = { ComponentStories .Default } />
21
21
22
+ ## Open UserMenu
23
+
24
+ The ` UserMenu ` requires an ` opener ` so it knows where to anchor itself when opened.
25
+ To provide this, you can either:
26
+
27
+ - Assign an ` id ` to the element rendered in the ` profile ` slot.
28
+ - Use the ` targetRef ` provided in the ` detail ` of the ` onProfileClick ` event properties.
29
+
30
+ ### Via ` targetRef `
31
+
32
+ ``` tsx
33
+ function RefOpener() {
34
+ const [open, setOpen] = useState (false );
35
+ const userMenuRef = useRef <UserMenuDomRef >(null );
36
+ return (
37
+ <>
38
+ <ShellBar
39
+ onProfileClick = { (e ) => {
40
+ const { targetRef } = e .detail ;
41
+ userMenuRef .current .opener = targetRef ;
42
+ setOpen (true );
43
+ }}
44
+ profile = { <Avatar initials = " JD" />}
45
+ />
46
+ <UserMenu
47
+ ref = { userMenuRef }
48
+ open = { open }
49
+ onClose = { () => {
50
+ setOpen (false );
51
+ }}
52
+ />
53
+ </>
54
+ );
55
+ }
56
+ ```
57
+
58
+ ### Via ` id `
59
+
60
+ ``` tsx
61
+ function IdOpener() {
62
+ const [open, setOpen] = useState (false );
63
+ return (
64
+ <>
65
+ <ShellBar
66
+ onProfileClick = { (e ) => {
67
+ setOpen (true );
68
+ }}
69
+ profile = { <Avatar initials = " JD" id = " userMenuOpener" />}
70
+ />
71
+ <UserMenu
72
+ open = { open }
73
+ opener = " userMenuOpener"
74
+ onClose = { () => {
75
+ setOpen (false );
76
+ }}
77
+ />
78
+ </>
79
+ );
80
+ }
81
+ ```
82
+
22
83
<Markdown >{ SubcomponentsSection } </Markdown >
23
84
24
85
## UserMenuAccount
You can’t perform that action at this time.
0 commit comments