Action Strip
The Ignite UI for Angular Action Strip component provides an overlay area containing one or more actions allowing additional UI and functionality to be shown on top of a specific target container upon user interaction e.g. hover. The container should be positioned relatively as the Action Strip attempts to overlay it and is itself positioned absolutely. Despite overlapped by an Action Strip, the main interactions and user access to the target container remain available.
Angular Action Strip Example
Usage
To initialize and position the Action Strip correctly, it needs to be inside a relatively positioned container:
<div style="position:relative; width:100px; height:100px;">
<igx-action-strip>
<button igxButton (click)="makeTextBold()">
<igx-icon>format_bold</igx-icon>
</button>
</igx-action-strip>
<div>
By default, the Action Strip will be visible, but this can be configured via the hidden
@Input property.
Menu look and feel
For scenarios where more than three action items will be shown, it is best to use IgxActionStripMenuItem
directive. Any item within the Action Strip marked with the *igxActionStripMenuItem
structural directive will be shown in a dropdown, revealed upon toggling the more button i.e. the three dots representing the last action.
<div style="position:relative; width:100px; height:100px;">
<igx-action-strip>
<button *igxActionStripMenuItem igxButton (click)="alignTextLeft()">
<igx-icon>format_align_left</igx-icon>
</button>
<button *igxActionStripMenuItem igxButton (click)="alignTextCenter()">
<igx-icon>format_align_center</igx-icon>
</button>
<button *igxActionStripMenuItem igxButton (click)="alignTextRight()">
<igx-icon>format_align_right</igx-icon>
</button>
</igx-action-strip>
</div>
Reusing the Action Strip
The same Action Strip instance can be used in multiple places in the document as long as the actions need not be visible simultaneously for them.
The Action Strip can change its parent container, which is possible by changing the context
.
The best way to do so is via the show
API method and passing the context
as an argument. The context
should be an instance of a component and should have an accessible element
property of the ElementRef
type.
Note: The
show
API method uses Angular Renderer2 to append the Action Strip to thatelement
.
Usage in Grids
The Action Strip provides additional functionality and UI for the IgxGrid. This can be utilized via grid action components and we are providing two default ones:
IgxGridEditingActionsComponent
- includes functionality and UI related to grid editing. It allows you to quickly toggle edit mode for cells or rows, depending on the value of therowEditable
option of the grid and whether deleting rows is allowed.IgxGridPinningActionsComponent
- includes functionality and UI related to grid row pinning. It allows you to quickly pin rows and navigate between pinned rows and their disabled counterparts.
<igx-grid [data]="data" [rowEditable]="true" [primaryKey]="'ID'">
<igx-column *ngFor="let c of columns" [field]="c.field">
</igx-column>
<igx-action-strip #actionStrip>
<igx-grid-pinning-actions></igx-grid-pinning-actions>
<igx-grid-editing-actions></igx-grid-editing-actions>
</igx-action-strip>
</igx-grid>
Note: These components inherit
IgxGridActionsBaseDirective
and when creating a custom grid action component, it should also inheritIgxGridActionsBaseDirective
.
Note: When
IgxActionStripComponent
is a child component of the grid, hovering a row will automatically show the UI.
Note: More information about how to use ActionStrip in the grid component could be found here.
Styling
To customize the Action Strip, you first need to import the index
file, where all styling functions and mixins are located.
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
Next, we have to create a new theme that extends the action-strip-theme
and pass the parameters which we'd like to change:
$custom-strip: action-strip-theme(
$background: rgba(150, 133, 143, 0.4),
$actions-background: rgba(109, 121, 147, 0.6),
$icon-color: null,
$delete-action: null,
$actions-border-radius: 0
);
The last step is to include the newly created component theme in our application.
When $legacy-support
is set to false
(default), include the component css variables like this:
@include css-vars($custom-strip);
When $legacy-support
is set to true
, include the component theme like this:
@include action-strip($custom-strip);
Known Issues and Limitations
Using the Action Strip component on IE11 requires the explicit import of the array polyfill in polyfill.ts of the angular application.
import 'core-js/es7/array';
API and Style References
For more detailed information regarding the Action Strip API, refer to the following links:
The following built-in CSS styles helped us achieve this Action Strip layout:
Additional components and/or directives that can be used within the Action Strip:
IgxGridActionsBaseDirective
IgxGridPinningActionsComponent
IgxGridEditingActionsComponent
IgxDividerDirective