Descripción general de la directiva Angular Action Strip
El componente Ignite UI for Angular Action Strip proporciona un área de superposición que contiene una o más acciones que permiten mostrar una interfaz de usuario y funcionalidad adicionales en la parte superior de un contenedor de destino específico al interactuar el usuario, por ejemplo, al pasar el mouse. El contenedor debe colocarse relativamente, ya que la Action Strip intenta superponerse a él y, a su vez, está posicionado de manera absoluta. A pesar de estar superpuestas por una Action Strip, las principales interacciones y el acceso de los usuarios al contenedor de destino siguen estando disponibles.
<divclass="parent" (mouseenter)="actionStrip.show()" (mouseleave)="actionStrip.hide()"><p #myParagraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non nibh eu libero commodo posuere at id augue.
Morbi nec justo enim. Sed placerat fringilla quam in pharetra. Pellentesque imperdiet lorem quis sem bibendum
molestie. Aliquam fringilla tellus nec convallis sodales. Suspendisse a eros accumsan, mattis mauris id,
malesuada nibh. Maecenas eget augue faucibus, euismod arcu sit amet, tempus nisi. Sed tellus nisl, luctus vitae
vestibulum ac, vehicula non ex. Donec condimentum rhoncus enim, et efficitur tortor faucibus sed. Integer at
mauris facilisis mauris condimentum bibendum. Maecenas eget lacus dolor. Etiam pulvinar, sapien vitae fermentum
interdum, nunc justo facilisis est, eu ullamcorper dolor lectus sit amet nisl. Quisque aliquam urna ut leo
mollis luctus. Morbi lacinia orci augue, sed blandit est ornare placerat. Cras a ante nec mauris euismod aliquam
vel pulvinar urna. Morbi tincidunt fringilla tortor, at ultricies neque rhoncus ac.
</p><igx-action-strip #actionStripclass="my-action-strip" [hidden]="true"><igx-buttongroup [selectionMode]="'multi'"class="buttons"><buttonigxButton (click)="makeTextBold()"><igx-icon>format_bold</igx-icon></button><buttonigxButton (click)="makeTextItalic()"><igx-icon>format_italic</igx-icon></button><buttonigxButton (click)="makeTextUnderlined()"><igx-icon>format_underlined</igx-icon></button></igx-buttongroup></igx-action-strip></div>html
¿Te gusta esta muestra? Obtenga acceso a nuestro completo kit de herramientas Ignite UI for Angular y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Para comenzar con el componente Ignite UI for Angular Action Strip, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:
ng add igniteui-angular
cmd
Para obtener una introducción completa a la Ignite UI for Angular, lea el tema de introducción.
El siguiente paso es importar IgxActionStripModule en su archivo app.module.ts.
Alternativamente, a partir de 16.0.0, puede importar IgxActionStripComponent como una dependencia independiente o usar el token IGX_ACTION_STRIP_DIRECTIVES para importar el componente y todos sus componentes y directivas de soporte.
De forma predeterminada, la Action Strip será visible, pero esto se puede configurar mediante la propiedad hidden @Input.
Aspecto y sensación del menú
Para escenarios donde se mostrarán más de tres elementos de acción, es mejor usar la directiva IgxActionStripMenuItem. Cualquier elemento dentro de Action Strip marcado con la directiva estructural *igxActionStripMenuItem se mostrará en un menú desplegable, que se revelará al alternar el botón más, es decir, los tres puntos que representan la última acción.
import { Component, ViewChild } from'@angular/core';
import { IgxActionStripComponent } from'igniteui-angular';
@Component({
selector: 'app-action-strip-paragraph-menu',
styleUrls: ['./action-strip-paragraph-menu.component.scss'],
templateUrl: './action-strip-paragraph-menu.component.html'
})
exportclassActionStripParagraphMenuComponent{
@ViewChild('actionStrip') public actionStrip: IgxActionStripComponent;
@ViewChild('myParagraph') public paragraph;
public result: string;
public isVisible = false;
public textLeft = false;
public textCenter = false;
public textRight = false;
publiconMouseLeave(event?) {
if (!event) {
return;
}
if (event.relatedTarget &&
event.relatedTarget.nodeName.toLowerCase() !== 'igx-drop-down-item' &&
event.relatedTarget.className.indexOf('menu-button') === -1) {
this.actionStrip.hide();
}
}
publicalignTextLeft() {
this.paragraph.nativeElement.classList.add('text-align-left');
this.paragraph.nativeElement.classList.remove('text-align-center');
this.paragraph.nativeElement.classList.remove('text-align-right');
}
publicalignTextCenter() {
this.paragraph.nativeElement.classList.remove('text-align-left');
this.paragraph.nativeElement.classList.add('text-align-center');
this.paragraph.nativeElement.classList.remove('text-align-right');
}
publicalignTextRight() {
this.paragraph.nativeElement.classList.remove('text-align-left');
this.paragraph.nativeElement.classList.remove('text-align-center');
this.paragraph.nativeElement.classList.add('text-align-right');
}
}
ts
<divclass="parent" (mouseenter)="actionStrip.show()" (mouseleave)="onMouseLeave($event)"><p #myParagraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non nibh eu libero commodo posuere at id augue.
Morbi nec justo enim. Sed placerat fringilla quam in pharetra. Pellentesque imperdiet lorem quis sem bibendum
molestie. Aliquam fringilla tellus nec convallis sodales. Suspendisse a eros accumsan, mattis mauris id,
malesuada nibh. Maecenas eget augue faucibus, euismod arcu sit amet, tempus nisi. Sed tellus nisl, luctus vitae
vestibulum ac, vehicula non ex. Donec condimentum rhoncus enim, et efficitur tortor faucibus sed. Integer at
mauris facilisis mauris condimentum bibendum. Maecenas eget lacus dolor. Etiam pulvinar, sapien vitae fermentum
interdum, nunc justo facilisis est, eu ullamcorper dolor lectus sit amet nisl. Quisque aliquam urna ut leo
mollis luctus. Morbi lacinia orci augue, sed blandit est ornare placerat. Cras a ante nec mauris euismod aliquam
vel pulvinar urna. Morbi tincidunt fringilla tortor, at ultricies neque rhoncus ac.
</p><igx-action-stripclass="my-action-strip" #actionStrip [hidden]="true"><div *igxActionStripMenuItemclass="menu-button" (click)="alignTextLeft()"igxRipple><igx-icon>format_align_left</igx-icon><span>Left</span></div><div *igxActionStripMenuItemclass="menu-button" (click)="alignTextCenter()"igxRipple><igx-icon>format_align_center</igx-icon><span>Center</span></div><div *igxActionStripMenuItemclass="menu-button" (click)="alignTextRight()"igxRipple><igx-icon>format_align_right</igx-icon><span>Right</span></div></igx-action-strip></div>html
La misma instancia de Action Strip se puede utilizar en varios lugares del documento siempre que las acciones no tengan que ser visibles simultáneamente para ellos. Action Strip puede cambiar su contenedor principal, lo cual es posible cambiando el context. La mejor manera de hacerlo es mediante el método show API y pasando el context como argumento. El context debe ser una instancia de un componente y debe tener una propiedad element accesible del tipo ElementRef.
El método show API utiliza Angular Renderer2 para agregar Action Strip a ese element.
Uso en cuadrículas
Action Strip proporciona funcionalidad y interfaz de usuario adicionales para IgxGrid. Esto se puede utilizar a través de componentes de acción de cuadrícula y proporcionamos dos predeterminados:
IgxGridEditingActionsComponent: incluye funcionalidad y interfaz de usuario relacionadas con la edición de cuadrículas. Le permite alternar rápidamente el modo de edición para celdas o filas, según el valor de la opción rowEditable de la cuadrícula y si se permite eliminar filas.
IgxGridPinningActionsComponent: incluye funcionalidad y interfaz de usuario relacionadas con la fijación de filas de la cuadrícula. Le permite fijar filas rápidamente y navegar entre filas fijadas y sus contrapartes deshabilitadas.
<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>html
Estos componentes heredan IgxGridActionsBaseDirective y, al crear un componente de acción de cuadrícula personalizado, también debe heredar IgxGridActionsBaseDirective.
Cuando IgxActionStripComponent es un componente secundario de la cuadrícula, al pasar el cursor sobre una fila se mostrará automáticamente la interfaz de usuario.
Puede encontrar más información sobre cómo utilizar ActionStrip en el componente de cuadrícula aquí.
Estilo
Para personalizar Action Strip, primero debe importar el archivo index, donde se encuentran todas las funciones de estilo y mixins.
@use"igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:// @import '~igniteui-angular/lib/core/styles/themes/index';scss
A continuación, tenemos que crear un nuevo tema que extienda el action-strip-theme y pasar los parámetros que nos gustaría cambiar:
import { Component, ViewChild } from'@angular/core';
import { IgxActionStripComponent } from'igniteui-angular';
@Component({
selector: 'app-action-strip-paragraph-styling',
styleUrls: ['./action-strip-paragraph-styling.component.scss'],
templateUrl: './action-strip-paragraph-styling.component.html'
})
exportclassActionStripStylingComponent{
@ViewChild('actionstrip') public actionStrip: IgxActionStripComponent;
@ViewChild('myParagraph') public paragraph;
public result: string;
public isVisible = false;
public textLeft = false;
public textCenter = false;
public textRight = false;
publictextDelete() {
this.paragraph.nativeElement.classList.add('text-strike-through');
}
publictextRestore() {
this.paragraph.nativeElement.classList.remove('text-strike-through');
}
publicshowActions() {
this.isVisible = true;
}
publichideActions() {
this.isVisible = false;
}
}
ts
<divclass="parent" (mouseenter)="actionStrip.show()" (mouseleave)="actionStrip.hide()"><p #myParagraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non nibh eu libero commodo posuere at id augue.
Morbi nec justo enim. Sed placerat fringilla quam in pharetra. Pellentesque imperdiet lorem quis sem bibendum
molestie. Aliquam fringilla tellus nec convallis sodales. Suspendisse a eros accumsan, mattis mauris id,
malesuada nibh. Maecenas eget augue faucibus, euismod arcu sit amet, tempus nisi. Sed tellus nisl, luctus vitae
vestibulum ac, vehicula non ex. Donec condimentum rhoncus enim, et efficitur tortor faucibus sed. Integer at
mauris facilisis mauris condimentum bibendum. Maecenas eget lacus dolor. Etiam pulvinar, sapien vitae fermentum
interdum, nunc justo facilisis est, eu ullamcorper dolor lectus sit amet nisl. Quisque aliquam urna ut leo
mollis luctus. Morbi lacinia orci augue, sed blandit est ornare placerat. Cras a ante nec mauris euismod aliquam
vel pulvinar urna. Morbi tincidunt fringilla tortor, at ultricies neque rhoncus ac.
</p><igx-action-stripclass="my-action-strip" #actionStrip [hidden]="true"><buttonigxButton (click)="textRestore()"><igx-icon>restore</igx-icon></button><buttonigxButton (click)="textDelete()"><igx-icon>delete</igx-icon></button></igx-action-strip></div>html