DropdownContext allows to show custom right click context dropdown.
tuiDropdown to false using template reference variable (see first example) Make right click on this icon ->
<p>
Make right click on this icon ->
<tui-icon
#dropdown="tuiDropdown"
icon="@tui.settings"
tuiDropdownContext
class="icon"
[tuiDropdown]="content"
>
<ng-template #content>
<span class="text">Nothing special</span>
<button
appearance="icon"
iconStart="@tui.x"
size="xs"
tuiIconButton
type="button"
(click)="dropdown.toggle(false)"
>
Close
</button>
</ng-template>
</tui-icon>
</p>
.text {
display: inline-block;
margin: 0.4rem 1rem;
}
.icon {
cursor: context-menu;
}
Right-click any table row.
| character | actor |
|---|---|
| Ross Geller | David Schwimmer |
| Chandler Bing | Matthew Perry |
| Joey Tribbiani | Matt LeBlanc |
| Phoebe Buffay | Lisa Kudrow |
| Monica Geller | Courteney Cox |
| Rachel Green | Jennifer Aniston |
<p>Right-click any table row.</p>
<table tuiTable>
<thead>
<tr>
@for (column of tableColumns; track column) {
<th tuiTh>
{{ column }}
</th>
}
</tr>
</thead>
<tbody tuiTbody>
@for (rowInfo of tableData; track rowInfo) {
<tr
#dropdown="tuiDropdown"
tuiDropdownContext
[tuiDropdown]="contextMenu"
>
@for (value of getObjectValues(rowInfo); track value) {
<td tuiTd>
{{ value }}
</td>
}
<ng-template #contextMenu>
<tui-data-list
role="menu"
tuiDataListDropdownManager
class="context-menu"
>
@for (item of menuItems; track item) {
<button
tuiOption
type="button"
[iconEnd]="item.iconName"
(click)="printToConsole(item.title, rowInfo); dropdown.toggle(false)"
>
{{ item.title }}
</button>
}
<button
iconEnd="@tui.chevron-right"
tuiDropdownAlign="end"
tuiDropdownSided
tuiOption
type="button"
[tuiDropdown]="nestedMenu"
>
More
</button>
</tui-data-list>
<ng-template #nestedMenu>
<tui-data-list>
@for (option of moreOptions; track option) {
<button
tuiOption
type="button"
>
{{ option }}
</button>
}
</tui-data-list>
</ng-template>
</ng-template>
</tr>
}
</tbody>
</table>
@import '@taiga-ui/styles/utils.less';
.context-menu {
inline-size: 8rem;
}
[tuiTable] {
inline-size: 100%;
}
[tuiTh],
[tuiTd] {
border-inline-start: none;
border-inline-end: none;
}
[tuiTh] {
border-block-start: none;
}
[tuiTd] {
font: var(--tui-typography-body-m) !important;
}
Some text with a mistake. Right-click it.
Another text
<p
tuiDropdownContext
[tuiDropdown]="reportForm"
>
Some text with a mistake. Right-click it.
</p>
<p
tuiDropdownContext
[tuiDropdown]="reportForm"
>
Another text
</p>
<ng-template
#reportForm
let-close
>
<form
class="container"
[formGroup]="form"
>
<tui-textfield>
<label tuiLabel>Have you found a mistake?</label>
<textarea
formControlName="reportText"
tuiTextarea
[max]="3"
[min]="3"
></textarea>
</tui-textfield>
<button
tuiButton
type="button"
class="button"
(click)="report(); close()"
>
SEND IT
</button>
</form>
</ng-template>
.container {
display: flex;
inline-size: 20rem;
margin: 1rem;
flex-direction: column;
}
.button {
margin: 1rem auto 0;
}