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 | actions |
|---|---|---|
| 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
[class.actions]="column === 'actions'"
>
{{ column }}
</th>
}
</tr>
</thead>
<tbody tuiTbody>
@for (rowInfo of tableData; track rowInfo.character) {
<tr
#contextDropdown="tuiDropdown"
tuiDropdownContext
[tuiDropdown]="contextMenu"
(contextmenu)="closeActionMenu()"
>
<td tuiTd>
{{ rowInfo.character }}
</td>
<td tuiTd>
{{ rowInfo.actor }}
</td>
<td
tuiTd
class="actions"
>
<button
appearance="flat"
iconEnd="@tui.chevron-right"
size="s"
tuiButton
tuiDropdownAlign="end"
tuiDropdownSided
type="button"
[tuiAppearanceState]="isActionMenuOpen(rowInfo.character) ? 'active' : null"
[tuiDropdown]="actionMenu"
[tuiDropdownOpen]="isActionMenuOpen(rowInfo.character)"
(tuiDropdownOpenChange)="
onActionMenuOpenChange($event, rowInfo.character); $event && contextDropdown.toggle(false)
"
>
More
</button>
<ng-template
#actionMenu
let-close
>
<tui-data-list>
<tui-opt-group>
@for (item of actionItems; track item) {
<button
tuiOption
type="button"
(click)="printToConsole(item, rowInfo); close()"
>
{{ item }}
</button>
}
</tui-opt-group>
<hr />
<tui-opt-group>
<button
tuiOption
type="button"
(click)="close()"
>
Nevermind
</button>
</tui-opt-group>
</tui-data-list>
</ng-template>
</td>
<ng-template
#contextMenu
let-close
>
<tui-data-list
role="menu"
tuiDataListDropdownManager
class="context-menu"
>
@for (item of menuItems; track item.title) {
<button
tuiOption
type="button"
[iconEnd]="item.iconName"
(click)="printToConsole(item.title, rowInfo); close()"
>
{{ 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;
}
.actions {
inline-size: 1%;
text-align: end;
white-space: nowrap;
}
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;
}