Skip to content

Commit aba2877

Browse files
crisbetocrisbeto
committed
main - bd17fb3 docs(material/menu): add docs for context menu
1 parent 16e2814 commit aba2877

17 files changed

Lines changed: 1264 additions & 12 deletions

File tree

‎docs-content/api-docs/material-menu-testing.html‎

Lines changed: 916 additions & 0 deletions
Large diffs are not rendered by default.

‎docs-content/api-docs/material-menu.html‎

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -889,6 +889,196 @@ <h5 class="docs-api-h5 docs-api-method-header">Methods</h5>
889889

890890

891891

892+
<h4 id="MatContextMenuTrigger" class="docs-header-link docs-api-h4 docs-api-class-name">
893+
<span header-link="MatContextMenuTrigger"></span>
894+
<code>MatContextMenuTrigger</code>
895+
896+
</h4><p class="docs-api-class-description"><p>Trigger that opens a menu whenever the user right-clicks within its host element.</p>
897+
</p><p class="docs-api-directive-selectors">
898+
<span class="docs-api-class-selector-label">Selector:</span>
899+
900+
<span class="docs-api-class-selector-name">[matContextMenuTriggerFor]</span>
901+
902+
</p><span class="docs-api-class-export-label">Exported as:</span>
903+
<span class="docs-api-class-export-name">matContextMenuTrigger</span><h5 class="docs-api-h5 docs-api-method-header">Properties</h5>
904+
<table class="docs-api-properties-table">
905+
<tr class="docs-api-properties-header-row">
906+
<th class="docs-api-properties-th">Name</th>
907+
<th class="docs-api-properties-th">Description</th>
908+
</tr>
909+
910+
911+
912+
<tr class="docs-api-properties-row">
913+
<td class="docs-api-properties-name-cell"><div class="docs-api-input-marker">@Input(<span class="docs-api-input-alias">{ alias: &#39;matContextMenuTriggerDisabled&#39;, transform: booleanAttribute }</span>)
914+
</div><p class="docs-api-property-name">
915+
<code>disabled: boolean</code>
916+
</p>
917+
</td>
918+
<td class="docs-api-property-description"><p>Whether the context menu is disabled.</p>
919+
</td>
920+
</tr>
921+
922+
923+
924+
925+
926+
<tr class="docs-api-properties-row">
927+
<td class="docs-api-properties-name-cell"><div class="docs-api-input-marker">@Input(<span class="docs-api-input-alias">{ alias: &#39;matContextMenuTriggerFor&#39;, required: true }</span>)
928+
</div><p class="docs-api-property-name">
929+
<code>menu: MatMenuPanel | null</code>
930+
</p>
931+
</td>
932+
<td class="docs-api-property-description"><p>References the menu instance that the trigger is associated with.</p>
933+
</td>
934+
</tr>
935+
936+
937+
938+
939+
940+
<tr class="docs-api-properties-row">
941+
<td class="docs-api-properties-name-cell"><div class="docs-api-input-marker">@Input(<span class="docs-api-input-alias">&#39;matContextMenuTriggerData&#39;</span>)
942+
</div><p class="docs-api-property-name">
943+
<code>menuData: any</code>
944+
</p>
945+
</td>
946+
<td class="docs-api-property-description"><p>Data to be passed along to any lazily-rendered content.</p>
947+
</td>
948+
</tr>
949+
950+
951+
952+
953+
954+
<tr class="docs-api-properties-row">
955+
<td class="docs-api-properties-name-cell"><div class="docs-api-input-marker">@Input(<span class="docs-api-input-alias">&#39;matContextMenuTriggerRestoreFocus&#39;</span>)
956+
</div><p class="docs-api-property-name">
957+
<code>restoreFocus: boolean</code>
958+
</p>
959+
</td>
960+
<td class="docs-api-property-description"><p>Whether focus should be restored when the menu is closed.
961+
Note that disabling this option can have accessibility implications
962+
and it&#39;s up to you to manage focus, if you decide to turn it off.</p>
963+
</td>
964+
</tr>
965+
966+
967+
968+
969+
970+
<tr class="docs-api-properties-row">
971+
<td class="docs-api-properties-name-cell"><div class="docs-api-output-marker">
972+
@Output()</div><p class="docs-api-property-name">
973+
<code>menuClosed: EventEmitter&lt;void&gt;</code>
974+
</p>
975+
</td>
976+
<td class="docs-api-property-description"><p>Event emitted when the associated menu is closed.</p>
977+
</td>
978+
</tr>
979+
980+
981+
982+
983+
984+
<tr class="docs-api-properties-row">
985+
<td class="docs-api-properties-name-cell"><div class="docs-api-output-marker">
986+
@Output()</div><p class="docs-api-property-name">
987+
<code>menuOpened: EventEmitter&lt;void&gt;</code>
988+
</p>
989+
</td>
990+
<td class="docs-api-property-description"><p>Event emitted when the associated menu is opened.</p>
991+
</td>
992+
</tr>
993+
994+
995+
996+
997+
998+
<tr class="docs-api-properties-row">
999+
<td class="docs-api-properties-name-cell"><p class="docs-api-property-name">
1000+
<code>dir: Direction</code>
1001+
</p>
1002+
</td>
1003+
<td class="docs-api-property-description"><p>The text direction of the containing app.</p>
1004+
</td>
1005+
</tr>
1006+
1007+
1008+
1009+
1010+
1011+
<tr class="docs-api-properties-row">
1012+
<td class="docs-api-properties-name-cell"><p class="docs-api-property-name">
1013+
<code>menuOpen: boolean</code>
1014+
</p>
1015+
</td>
1016+
<td class="docs-api-property-description"><p>Whether the menu is open.</p>
1017+
</td>
1018+
</tr>
1019+
1020+
1021+
1022+
</table>
1023+
1024+
1025+
<h5 class="docs-api-h5 docs-api-method-header">Methods</h5>
1026+
1027+
1028+
1029+
<table class="docs-api-method-table">
1030+
<thead>
1031+
<tr class="docs-api-method-name-row">
1032+
<th colspan="2" class="docs-api-method-name-cell">focus
1033+
</th>
1034+
</tr>
1035+
</thead><tr class="docs-api-method-description-row">
1036+
<td colspan="2" class="docs-api-method-description-cell">
1037+
<p>Focuses the menu trigger.</p>
1038+
1039+
</td>
1040+
</tr><thead>
1041+
<tr class="docs-api-method-parameters-header-row">
1042+
<th colspan="2" class="docs-api-method-parameters-header-cell">Parameters</th>
1043+
</tr>
1044+
</thead>
1045+
1046+
<tr class="docs-api-method-parameter-row">
1047+
<td class="docs-api-method-parameter-cell">
1048+
<p class="docs-api-method-parameter-name">
1049+
origin<span class="docs-api-method-parameter-optional-marker">?</span></p>
1050+
<code class="docs-api-method-parameter-type">FocusOrigin</code>
1051+
</td>
1052+
<td class="docs-api-method-parameter-description-cell">
1053+
<p class="docs-api-method-parameter-description">
1054+
<p>Source of the menu trigger&#39;s focus.</p>
1055+
1056+
</p>
1057+
</td>
1058+
</tr>
1059+
1060+
<tr class="docs-api-method-parameter-row">
1061+
<td class="docs-api-method-parameter-cell">
1062+
<p class="docs-api-method-parameter-name">
1063+
options<span class="docs-api-method-parameter-optional-marker">?</span></p>
1064+
<code class="docs-api-method-parameter-type">FocusOptions</code>
1065+
</td>
1066+
<td class="docs-api-method-parameter-description-cell">
1067+
<p class="docs-api-method-parameter-description">
1068+
1069+
</p>
1070+
</td>
1071+
</tr>
1072+
</table>
1073+
1074+
1075+
1076+
1077+
1078+
1079+
1080+
1081+
8921082
<h4 id="MatMenuContent" class="docs-header-link docs-api-h4 docs-api-class-name">
8931083
<span header-link="MatMenuContent"></span>
8941084
<code>MatMenuContent</code>

‎docs-content/examples-highlighted/material/menu/context-menu/context-menu-example-css.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<span class="hljs-selector-class">.example-context-menu-area</span> {
2+
<span class="hljs-attribute">display</span>: flex;
3+
<span class="hljs-attribute">align-items</span>: center;
4+
<span class="hljs-attribute">justify-content</span>: center;
5+
<span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;
6+
<span class="hljs-attribute">height</span>: <span class="hljs-number">300px</span>;
7+
<span class="hljs-attribute">max-width</span>: <span class="hljs-number">300px</span>;
8+
<span class="hljs-attribute">border</span>: dashed <span class="hljs-number">1px</span>;
9+
<span class="hljs-attribute">text-align</span>: center;
10+
<span class="hljs-attribute">padding</span>: <span class="hljs-number">30px</span>;
11+
<span class="hljs-attribute">box-sizing</span>: border-box;
12+
}

‎docs-content/examples-highlighted/material/menu/context-menu/context-menu-example-html.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-context-menu-area&quot;</span> [<span class="hljs-attr">matContextMenuTriggerFor</span>]=<span class="hljs-string">&quot;contextMenu&quot;</span>&gt;</span>
2+
Right click here to trigger a context menu
3+
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
4+
5+
<span class="hljs-tag">&lt;<span class="hljs-name">mat-menu</span> #<span class="hljs-attr">contextMenu</span>&gt;</span>
6+
<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">mat-menu-item</span>&gt;</span>
7+
<span class="hljs-tag">&lt;<span class="hljs-name">mat-icon</span>&gt;</span>content_cut<span class="hljs-tag">&lt;/<span class="hljs-name">mat-icon</span>&gt;</span>
8+
Cut
9+
<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
10+
<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">mat-menu-item</span>&gt;</span>
11+
<span class="hljs-tag">&lt;<span class="hljs-name">mat-icon</span>&gt;</span>content_copy<span class="hljs-tag">&lt;/<span class="hljs-name">mat-icon</span>&gt;</span>
12+
Copy
13+
<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
14+
<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">mat-menu-item</span>&gt;</span>
15+
<span class="hljs-tag">&lt;<span class="hljs-name">mat-icon</span>&gt;</span>content_paste<span class="hljs-tag">&lt;/<span class="hljs-name">mat-icon</span>&gt;</span>
16+
Paste
17+
<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
18+
<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">mat-menu-item</span>&gt;</span>
19+
<span class="hljs-tag">&lt;<span class="hljs-name">mat-icon</span>&gt;</span>print<span class="hljs-tag">&lt;/<span class="hljs-name">mat-icon</span>&gt;</span>
20+
Print
21+
<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
22+
<span class="hljs-tag">&lt;/<span class="hljs-name">mat-menu</span>&gt;</span>

‎docs-content/examples-highlighted/material/menu/context-menu/context-menu-example-ts.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<span class="hljs-keyword">import</span> {<span class="hljs-title class_">Component</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/core&#x27;</span>;
2+
<span class="hljs-keyword">import</span> {<span class="hljs-title class_">MatMenuModule</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/menu&#x27;</span>;
3+
<span class="hljs-keyword">import</span> {<span class="hljs-title class_">MatIconModule</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/icon&#x27;</span>;
4+
5+
<span class="hljs-comment">/**
6+
* <span class="hljs-doctag">@title</span> Context menu
7+
*/</span>
8+
<span class="hljs-meta">@Component</span>({
9+
<span class="hljs-attr">selector</span>: <span class="hljs-string">&#x27;context-menu-example&#x27;</span>,
10+
<span class="hljs-attr">templateUrl</span>: <span class="hljs-string">&#x27;context-menu-example.html&#x27;</span>,
11+
<span class="hljs-attr">styleUrl</span>: <span class="hljs-string">&#x27;./context-menu-example.css&#x27;</span>,
12+
<span class="hljs-attr">imports</span>: [<span class="hljs-title class_">MatMenuModule</span>, <span class="hljs-title class_">MatIconModule</span>],
13+
})
14+
<span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">ContextMenuExample</span> {}

‎docs-content/examples-highlighted/material/menu/index-ts.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,4 @@
33
<span class="hljs-keyword">export</span> {<span class="hljs-title class_">MenuPositionExample</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./menu-position/menu-position-example&#x27;</span>;
44
<span class="hljs-keyword">export</span> {<span class="hljs-title class_">MenuNestedExample</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./menu-nested/menu-nested-example&#x27;</span>;
55
<span class="hljs-keyword">export</span> {<span class="hljs-title class_">MenuHarnessExample</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./menu-harness/menu-harness-example&#x27;</span>;
6+
<span class="hljs-keyword">export</span> {<span class="hljs-title class_">ContextMenuExample</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./context-menu/context-menu-example&#x27;</span>;

‎docs-content/examples-source/material/menu/context-menu/context-menu-example.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.example-context-menu-area {
2+
display: flex;
3+
align-items: center;
4+
justify-content: center;
5+
width: 100%;
6+
height: 300px;
7+
max-width: 300px;
8+
border: dashed 1px;
9+
text-align: center;
10+
padding: 30px;
11+
box-sizing: border-box;
12+
}

‎docs-content/examples-source/material/menu/context-menu/context-menu-example.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<div class="example-context-menu-area" [matContextMenuTriggerFor]="contextMenu">
2+
Right click here to trigger a context menu
3+
</div>
4+
5+
<mat-menu #contextMenu>
6+
<button mat-menu-item>
7+
<mat-icon>content_cut</mat-icon>
8+
Cut
9+
</button>
10+
<button mat-menu-item>
11+
<mat-icon>content_copy</mat-icon>
12+
Copy
13+
</button>
14+
<button mat-menu-item>
15+
<mat-icon>content_paste</mat-icon>
16+
Paste
17+
</button>
18+
<button mat-menu-item>
19+
<mat-icon>print</mat-icon>
20+
Print
21+
</button>
22+
</mat-menu>

‎docs-content/examples-source/material/menu/context-menu/context-menu-example.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import {Component} from '@angular/core';
2+
import {MatMenuModule} from '@angular/material/menu';
3+
import {MatIconModule} from '@angular/material/icon';
4+
5+
/**
6+
* @title Context menu
7+
*/
8+
@Component({
9+
selector: 'context-menu-example',
10+
templateUrl: 'context-menu-example.html',
11+
styleUrl: './context-menu-example.css',
12+
imports: [MatMenuModule, MatIconModule],
13+
})
14+
export class ContextMenuExample {}

‎docs-content/examples-source/material/menu/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,4 @@ export {MenuOverviewExample} from './menu-overview/menu-overview-example';
33
export {MenuPositionExample} from './menu-position/menu-position-example';
44
export {MenuNestedExample} from './menu-nested/menu-nested-example';
55
export {MenuHarnessExample} from './menu-harness/menu-harness-example';
6+
export {ContextMenuExample} from './context-menu/context-menu-example';

0 commit comments

Comments
 (0)