Skip to content

Commit ec8b00f

Browse files
immohammadjavedimmohammadjaved
committed
docs(menu): updated menu docs
1 parent 222086d commit ec8b00f

File tree

4 files changed

+115
-25
lines changed

4 files changed

+115
-25
lines changed

‎projects/core/src/lib/menu.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { computed, Directive, effect, input, TemplateRef } from '@angular/core';
22
import { NgpMenu, NgpMenuItem, NgpMenuTrigger, NgpSubmenuTrigger } from "ng-primitives/menu";
3+
import { NgpSeparator } from 'ng-primitives/separator';
34
import { tv } from 'tailwind-variants';
45

56
const menuVariants = tv({
@@ -55,7 +56,8 @@ export class UiMenuShortcut {
5556
exportAs: 'uiMenuSeparator',
5657
host: {
5758
'[class]': 'computedClass()'
58-
}
59+
},
60+
hostDirectives: [NgpSeparator]
5961
})
6062
export class UiMenuSeparator {
6163
inputClass = input<string>('', { alias: 'class' });

‎projects/docs/src/app/pages/docs/components/dropdown-menu/dropdown-menu.component.html

Lines changed: 33 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ <h1 class="text-2xl font-semibold">Dropdown Menu</h1>
1010

1111

1212
<div class="mt-5">
13-
<docs-example [code]="AVATAR_CODES.DEFAULT">
13+
<docs-example [code]="MENU_CODES.DEFAULT">
1414
<button uiButton variant="outline" [uiMenuTrigger]="menu">Open</button>
1515
<ng-template #menu>
1616
<div uiMenu class="w-56">
@@ -33,7 +33,7 @@ <h1 class="text-2xl font-semibold">Dropdown Menu</h1>
3333

3434

3535
<h2 class="text-xl font-semibold my-5 border-b border-border pb-3 mt-10" id="installation">Installation</h2>
36-
<docs-installation-guide [cliCode]="cliCode" [npmCode]="AVATAR_CODES.DEFAULT"></docs-installation-guide>
36+
<docs-installation-guide [cliCode]="cliCode" [npmCode]="MENU_CODES.DEFAULT"></docs-installation-guide>
3737

3838
<h2 class="text-xl font-semibold my-5 border-b border-border pb-3 mt-10" id="usage">Usage</h2>
3939

@@ -44,7 +44,30 @@ <h2 class="text-xl font-semibold my-5 border-b border-border pb-3 mt-10" id="exa
4444

4545
<div class="mt-5">
4646
<h3 class="text-lg font-semibold mb-3" id="default">Default</h3>
47-
<docs-example [code]="AVATAR_CODES.DEFAULT">
47+
<docs-example [code]="MENU_CODES.DEFAULT">
48+
<button uiButton variant="outline" [uiMenuTrigger]="menu">Open</button>
49+
<ng-template #menu>
50+
<div uiMenu class="w-56">
51+
<div uiMenuLabel>My Account</div>
52+
<div uiMenuSeparator></div>
53+
<button uiMenuItem>Profile <div uiMenuShortcut>⇧⌘P</div></button>
54+
<button uiMenuItem>Billing <div uiMenuShortcut>⌘B</div></button>
55+
<button uiMenuItem>Settings <div uiMenuShortcut>⌘S</div></button>
56+
<button uiMenuItem>Keyboard shortcuts <div uiMenuShortcut>⌘K</div></button>
57+
<div uiMenuSeparator></div>
58+
<button uiMenuItem>Github</button>
59+
<button uiMenuItem>Support</button>
60+
<button uiMenuItem disabled>API</button>
61+
<div uiMenuSeparator></div>
62+
<button uiMenuItem>Logout <div uiMenuShortcut>⇧⌘Q</div></button>
63+
</div>
64+
</ng-template>
65+
</docs-example>
66+
</div>
67+
68+
<div class="mt-5">
69+
<h3 class="text-lg font-semibold mb-3" id="submenu">Sub Menu</h3>
70+
<docs-example [code]="MENU_CODES.SUBMENU">
4871
<button uiButton variant="outline" [uiMenuTrigger]="menu1">Open</button>
4972
<ng-template #menu1>
5073
<div uiMenu class="w-56">
@@ -57,17 +80,19 @@ <h3 class="text-lg font-semibold mb-3" id="default">Default</h3>
5780
<div uiMenuSeparator></div>
5881
<button uiMenuItem>Github</button>
5982
<button uiMenuItem>Support</button>
60-
<button uiMenuItem [uiSubmenuTrigger]="submenu">API <div uiMenuShortcut><ng-icon
61-
name="bootstrapChevronRight" /></div></button>
83+
<button uiMenuItem [uiSubmenuTrigger]="submenu">Invite User
84+
<div uiMenuShortcut><ng-icon name="bootstrapChevronRight" /></div>
85+
</button>
6286
<div uiMenuSeparator></div>
6387
<button uiMenuItem>Logout <div uiMenuShortcut>⇧⌘Q</div></button>
6488
</div>
6589
</ng-template>
6690
<ng-template #submenu>
6791
<div uiMenu>
68-
<button uiMenuItem>Item 1</button>
69-
<button uiMenuItem>Item 2</button>
70-
<button uiMenuItem>Item 3</button>
92+
<button uiMenuItem>Email</button>
93+
<button uiMenuItem>Message</button>
94+
<div uiMenuSeparator></div>
95+
<button uiMenuItem>More..</button>
7196
</div>
7297
</ng-template>
7398
</docs-example>

‎projects/docs/src/app/pages/docs/components/dropdown-menu/dropdown-menu.component.ts

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Component } from '@angular/core';
2-
import { AvatarCodeConstants } from './dropdown-menu.constants';
2+
import { MenuCodeConstants } from './dropdown-menu.constants';
33
import { UiMenu, UiMenuTrigger, UiMenuItem, UiMenuLabel, UiMenuSeparator, UiMenuShortcut, UiButton, UiSubmenuTrigger } from '@angularui/core';
44
import { InstallationGuideComponent } from '../../../../components/installation-guide/installation-guide.component';
55
import { CodeViewComponent } from '../../../../components/code-view/code-view.component';
@@ -14,16 +14,29 @@ import { bootstrapChevronRight } from '@ng-icons/bootstrap-icons';
1414
viewProviders: [provideIcons({ bootstrapChevronRight })],
1515
})
1616
export class DropdownMenuComponent {
17-
importCode = `import { AvatarDirective, AvatarFallbackDirective, AvatarImageDirective } from '@angularui/core';`
17+
importCode = `import { UiMenu, UiMenuTrigger, UiMenuItem, UiMenuLabel, UiMenuSeparator, UiMenuShortcut } from '@angularui/core';`
1818
usageCode = `
19-
<span uiAvatar>
20-
<img uiAvatarImage src="assets/avatar.png" alt="Profile Image" />
21-
<span uiAvatarFallback>UI</span>
22-
</span>
19+
<button uiButton variant="outline" [uiMenuTrigger]="menu">Open</button>
20+
<ng-template #menu>
21+
<div uiMenu class="w-56">
22+
<div uiMenuLabel>My Account</div>
23+
<div uiMenuSeparator></div>
24+
<button uiMenuItem>Profile <div uiMenuShortcut>⇧⌘P</div></button>
25+
<button uiMenuItem>Billing <div uiMenuShortcut>⌘B</div></button>
26+
<button uiMenuItem>Settings <div uiMenuShortcut>⌘S</div></button>
27+
<button uiMenuItem>Keyboard shortcuts <div uiMenuShortcut>⌘K</div></button>
28+
<div uiMenuSeparator></div>
29+
<button uiMenuItem>Github</button>
30+
<button uiMenuItem>Support</button>
31+
<button uiMenuItem disabled>API</button>
32+
<div uiMenuSeparator></div>
33+
<button uiMenuItem>Logout <div uiMenuShortcut>⇧⌘Q</div></button>
34+
</div>
35+
</ng-template>
2336
`;
2437

2538
cliCode = `ng g @angularui/core:component menu`;
2639

27-
AVATAR_CODES = AvatarCodeConstants;
40+
MENU_CODES = MenuCodeConstants;
2841

2942
}

‎projects/docs/src/app/pages/docs/components/dropdown-menu/dropdown-menu.constants.ts

Lines changed: 59 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,66 @@
1-
export class AvatarCodeConstants {
1+
export class MenuCodeConstants {
22
static readonly DEFAULT = `
33
import { Component } from '@angular/core';
4-
import { AvatarDirective, AvatarFallbackDirective, AvatarImageDirective } from '@angularui/core';
4+
import { UiMenu, UiMenuTrigger, UiMenuItem, UiMenuLabel, UiMenuSeparator, UiMenuShortcut, UiButton } from '@angularui/core';
55
66
@Component({
7-
selector: 'avatar-demo',
8-
imports: [AvatarDirective, AvatarImageDirective, AvatarFallbackDirective],
9-
template: \`<span uiAvatar>
10-
<img uiAvatarImage src="assets/avatar.png" alt="Profile Image" />
11-
<span uiAvatarFallback>UI</span>
12-
</span> \`,
7+
selector: 'menu-demo',
8+
imports: [UiMenu, UiMenuTrigger, UiMenuItem, UiMenuLabel, UiMenuSeparator, UiMenuShortcut, UiButton],
9+
template: \`<button uiButton variant="outline" [uiMenuTrigger]="menu">Open</button>
10+
<ng-template #menu>
11+
<div uiMenu class="w-56">
12+
<div uiMenuLabel>My Account</div>
13+
<div uiMenuSeparator></div>
14+
<button uiMenuItem>Profile <div uiMenuShortcut>⇧⌘P</div></button>
15+
<button uiMenuItem>Billing <div uiMenuShortcut>⌘B</div></button>
16+
<button uiMenuItem>Settings <div uiMenuShortcut>⌘S</div></button>
17+
<button uiMenuItem>Keyboard shortcuts <div uiMenuShortcut>⌘K</div></button>
18+
<div uiMenuSeparator></div>
19+
<button uiMenuItem>Github</button>
20+
<button uiMenuItem>Support</button>
21+
<button uiMenuItem disabled>API</button>
22+
<div uiMenuSeparator></div>
23+
<button uiMenuItem>Logout <div uiMenuShortcut>⇧⌘Q</div></button>
24+
</div>
25+
</ng-template> \`,
1326
})
14-
export class AvatarComponent {}
27+
export class MenuComponent {}
28+
`;
29+
30+
static readonly SUBMENU = `
31+
import { Component } from '@angular/core';
32+
import { UiMenu, UiMenuTrigger, UiMenuItem, UiMenuLabel, UiMenuSeparator, UiMenuShortcut, UiSubmenuTrigger, UiButton } from '@angularui/core';
33+
34+
@Component({
35+
selector: 'submenu-demo',
36+
imports: [UiMenu, UiMenuTrigger, UiMenuItem, UiMenuLabel, UiMenuSeparator, UiMenuShortcut, UiButton],
37+
template: \`<button uiButton variant="outline" [uiMenuTrigger]="menu1">Open</button>
38+
<ng-template #menu1>
39+
<div uiMenu class="w-56">
40+
<div uiMenuLabel>My Account</div>
41+
<div uiMenuSeparator></div>
42+
<button uiMenuItem>Profile <div uiMenuShortcut>⇧⌘P</div></button>
43+
<button uiMenuItem>Billing <div uiMenuShortcut>⌘B</div></button>
44+
<button uiMenuItem>Settings <div uiMenuShortcut>⌘S</div></button>
45+
<button uiMenuItem>Keyboard shortcuts <div uiMenuShortcut>⌘K</div></button>
46+
<div uiMenuSeparator></div>
47+
<button uiMenuItem>Github</button>
48+
<button uiMenuItem>Support</button>
49+
<button uiMenuItem [uiSubmenuTrigger]="submenu">Invite User <div uiMenuShortcut><ng-icon
50+
name="bootstrapChevronRight" /></div></button>
51+
<div uiMenuSeparator></div>
52+
<button uiMenuItem>Logout <div uiMenuShortcut>⇧⌘Q</div></button>
53+
</div>
54+
</ng-template>
55+
<ng-template #submenu>
56+
<div uiMenu>
57+
<button uiMenuItem>Email</button>
58+
<button uiMenuItem>Message</button>
59+
<div uiMenuSeparator></div>
60+
<button uiMenuItem>More..</button>
61+
</div>
62+
</ng-template> \`,
63+
})
64+
export class SubmenuComponent {}
1565
`;
1666
}

0 commit comments

Comments
 (0)