Descripción general de la directiva de franja de acción Angular
El componente Ignite UI for Angular Action Strip proporciona un área de superposición que contiene una o más acciones, lo que permite que la interfaz de usuario y la funcionalidad adicionales se muestren en la parte superior de un contenedor de destino específico tras la interacción del usuario, por ejemplo, al pasar el puntero. El contenedor debe colocarse relativamente como la tira de acción intenta superponerlo y se coloca en una posición absoluta. A pesar de estar superpuestas por una tira de acciones, las interacciones principales y el acceso del usuario 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 kit de herramientas de Ignite UI for Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Primeros pasos con Ignite UI for Angular Action Strip
Para empezar a utilizar 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 al 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.
Ahora que ha importado el módulo o las directivas Ignite UI for Angular Action Strip, puede comenzar con una configuración básica del igx-action-strip componente.
Uso del componente Angular tira de acciones
Para inicializar y colocar la Action Strip correctamente, debe estar dentro de un contenedor relativamente posicionado:
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.
<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 show método de API usa Angular Renderer2 para anexar la tira de acciones a eso 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:
<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