Descripción general del componente desplegable Angular
La Ignite UI for Angular Drop Down es un componente que muestra una lista alternable de valores predefinidos y permite a los usuarios seleccionar fácilmente un elemento de opción única con un clic. Se puede configurar rápidamente para que actúe como un menú desplegable o simplemente puede usarlo para brindar información visual más útil agrupando datos. Con la agrupación puede utilizar datos tanto planos como jerárquicos. El componente desplegable permite el enlace declarativo, lo que le permite incorporar contenido y enlaces adicionales. Esto también deja espacio para una mayor personalización de la interfaz de usuario y el estilo de la apariencia de la lista desplegable Angular. Además de esto, está repleto de funciones clave como navegación desplegable con el teclado y virtualización.
Angular Drop Down Example
Este ejemplo desplegable Angular demuestra las funcionalidades básicas de una lista desplegable. Haga clic en él para expandir las opciones preestablecidas, seleccione un elemento y luego cierre el menú desplegable.
Getting Started with Ignite UI for Angular Drop Down
Para comenzar con el componente desplegable Ignite UI for Angular, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:
ng add igniteui-angular
Para obtener una introducción completa a la Ignite UI for Angular, lea el tema de introducción.
El siguiente paso es importar IgxDropDownModule en su archivo app.module.ts.
// app.module.ts
...
import { IgxDropDownModule } from 'igniteui-angular';
// import { IgxDropDownModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxDropDownModule],
...
})
export class AppModule {}
Alternativamente, a partir de 16.0.0, puede importar IgxDropDownComponent como una dependencia independiente o usar el token IGX_DROP_DOWN_DIRECTIVES para importar el componente y todos sus componentes y directivas de soporte.
// home.component.ts
import { NgFor } from '@angular/common';
import { IGX_DROP_DOWN_DIRECTIVES, IgxToggleActionDirective, IgxButtonDirective } from 'igniteui-angular';
// import { IGX_DROP_DOWN_DIRECTIVES, IgxToggleActionDirective, IgxButtonDirective } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: `
<button igxButton="contained"
[igxToggleAction]="dropdown"
[igxDropDownItemNavigation]="dropdown">
Options
</button>
<igx-drop-down #dropdown>
<igx-drop-down-item *ngFor="let item of items">
{{ item.field }}
</igx-drop-down-item>
</igx-drop-down>
`,
styleUrls: ['home.component.scss'],
standalone: true,
imports: [IGX_DROP_DOWN_DIRECTIVES, IgxToggleActionDirective, IgxButtonDirective, NgFor]
/* or imports: [IgxDropDownComponent, IgxDropDownItemComponent, IgxToggleActionDirective, IgxButtonDirective, NgFor] */
})
export class HomeComponent {}
Ahora que ha importado la Ignite UI for Angular o las directivas, puede comenzar a usar el componente igx-drop-down.
Using the Angular Drop Down
Add Drop Down
Creemos un menú desplegable simple que proporcione varias opciones para elegir. Para lograr esto, usaremos IgxDropDownComponent así como IgxToggleAction para abrir/cerrar el menú desplegable.
<!-- dropdown.component.html -->
<button igxButton="contained"
[igxToggleAction]="dropdown"
[igxDropDownItemNavigation]="dropdown">
Options
</button>
<igx-drop-down #dropdown>
<igx-drop-down-item *ngFor="let item of items">
{{ item.field }}
</igx-drop-down-item>
</igx-drop-down>
// dropdown.component.ts
@Component({...})
export class MyDropDownComponent {
public items: Array<{ field: string }> = [
{ field: 'Option 1' },
{ field: 'Option 2' },
{ field: 'Option 3' }
];
}
More Angular Drop Down Examples
La demostración predeterminada muestra el uso de una lista desplegable alternable en Angular que permite a los usuarios finales expandir todos los elementos predefinidos y optar por uno de ellos. Consulte el siguiente ejemplo y vea la lista desplegable Angular en acción.
Predefined selected item
Digamos que queremos tener un elemento seleccionado predefinido. Una forma de hacer esto es manejando el evento de apertura del componente desplegable.
<!-- dropdown.component.html -->
<button igxButton="contained"
[igxToggleAction]="dropdown"
[igxDropDownItemNavigation]="dropdown">
Options
</button>
<igx-drop-down #dropdown (opening)="dropdown.setSelectedItem(0)">
<igx-drop-down-item *ngFor="let item of items">
{{ item.field }}
</igx-drop-down-item>
</igx-drop-down>
// dropdown.component.ts
export class MyDropDownComponent {
public items: Array<{ field: string }> = [
{ field: 'Option 1' },
{ field: 'Option 2' },
{ field: 'Option 3' }
];
}
Grouping items
Para proporcionar información visual más útil, utilice la propiedad isHeader para agrupar elementos semánticamente o la propiedad deshabilitada para mostrar un elemento como no interactivo. También puede establecer la propiedad seleccionada en un elemento en particular para convertirlo en el elemento seleccionado. Los elementos igx-drop-down tienen soporte listo para usar para las directivas igxPrefix, igxSuffix e igx-divider que pueden contener o configurarse en elementos HTML u otros componentes web.
<!-- dropdown.component.html -->
<button igxButton="contained"
[igxToggleAction]="dropdown"
[igxDropDownItemNavigation]="dropdown">
Countries
</button>
<igx-drop-down #dropdown [width]="'240px'">
<div class="drop-down__scroll-container">
<igx-drop-down-item *ngFor="let item of items"
[disabled]="item.disabled"
[isHeader]="item.header"
[selected]="item.selected">
<igx-icon igxPrefix>place</igx-icon>
{{ item.field }}
<span igxSuffix>{{ item.code }}</span>
<igx-divider></igx-divider>
</igx-drop-down-item>
</div>
</igx-drop-down>
// dropdown.component.ts
export class MyDropDownComponent {
public items: any[] = [
{ field: 'European Union', code: 'EU', header: true },
{ field: 'Germany', code: 'DE' },
{ field: 'Bulgaria', code: 'BG', selected: true },
{ field: 'France', code: 'FR', disabled: true },
{ field: 'North America', code: 'NA', header: true },
{ field: 'Canada', code: 'CA' },
{ field: 'United States', code: 'US' },
{ field: 'Mexico', code: 'MX' }
];
}
Si la muestra está configurada correctamente, se debe mostrar una lista de países como un grupo bajo el encabezado de la Unión Europea, Francia como un elemento no interactivo y Bulgaria como un elemento seleccionado:
Grouping hierarchical data
Los elementos igx-drop-down también se pueden agrupar utilizando el contenedor igx-drop-down-item-group, lo que facilita a los usuarios diferenciar categorías separadas. El igx-drop-down-item-group acepta elementos igx-drop-down-item como contenido y los representa de forma agrupada.
// dropdown.component.ts
export class MyCustomDropDownComponent {
...
public foods: {
name: string,
entries: { name: string, refNo: string }[]
}[] = [
{
name: 'Vegetables',
entries: [{
name: 'Cucumber',
refNo: '00000'
}, {
name: 'Lettuce',
refNo: '00001'
},
...]
}, {
name: 'Fruits',
entries: [{
name: 'Banana',
refNo: '10000'
}, {
name: 'Tomato',
refNo: '10001'
},
...]
}, {
name: 'Meats',
entries: [{
name: 'Chicken',
refNo: '20000'
}, {
name: 'Beef',
refNo: '20001'
},
...]
}];
}
<igx-drop-down>
<igx-drop-down-item-group *ngFor="let foodGroup of foods" [label]="foodGroup.name">
<igx-drop-down-item *ngFor="let food of foodGroup.entries" [value]='food.refNo'>
{{ food.name }}
</igx-drop-down-item>
</igx-drop-down-item-group>
</igx-drop-down>
El grupo también tiene la funcionalidad adicional de desactivar elementos dentro de su cuerpo. Por ejemplo, digamos que no queremos que el grupo de alimentos Meats se pueda seleccionar en nuestro menú desplegable. En lugar de deshabilitar todas las entradas en Meats por separado, podemos deshabilitar el grupo, así como todos los elementos secundarios que contiene:
<igx-drop-down>
<igx-drop-down-item-group *ngFor="let foodGroup of foods" [label]="foodGroup.name" [disabled]="foodGroup.name === 'Meats'">
<igx-drop-down-item *ngFor="let food of foodGroup.entries" [value]='food.refNo'>
{{ food.name }}
</igx-drop-down-item>
</igx-drop-down-item-group>
</igx-drop-down>
Puede ver los resultados en el siguiente ejemplo:
Drop Down as menu
Puede configurar el menú desplegable para que se comporte como un menú. Para hacer esto, establezca el miembro de cancelación de la interfaz ISelectionEventArgs en verdadero en el controlador de eventos de selección. De esta forma, el elemento seleccionado no se conserva al abrir el menú y las selecciones anteriores quedan invalidadas. Aún así, puede obtener el elemento en el que se hizo clic a través del valor del miembro newSelection en el evento.
<!-- dropdown.component.html -->
<div>
<igx-navbar title="Contacts">
<button [igxToggleAction]="menu"
[igxToggleOutlet]="outlet"
[overlaySettings]="overlaySettings"
[igxDropDownItemNavigation]="menu"
igxIconButton="flat">
<igx-icon fontSet="material">more_vert</igx-icon>
</button>
<igx-drop-down #menu (selectionChanging)="selectionHandler($event)">
<igx-drop-down-item *ngFor="let item of items" [value]="item.text">
<div>{{ item.text }}</div>
</igx-drop-down-item>
</igx-drop-down>
</igx-navbar>
<div>
<ng-container *ngIf="text">
<label igxLabel>{{ text }}</label>
</ng-container>
</div>
<div igxOverlayOutlet #outlet="overlay-outlet"></div>
</div>
// dropdown.component.ts
export class MyMenuComponent {
public items: Array<{ text: string }> =
[{ text: 'Add New Contact' }, { text: 'Edit Contact' }, { text: 'Refresh' }, { text: 'Help' }];
public text: string;
public overlaySettings = {
positionStrategy: new ConnectedPositioningStrategy({
horizontalDirection: HorizontalAlignment.Left,
horizontalStartPoint: HorizontalAlignment.Right,
verticalStartPoint: VerticalAlignment.Bottom
}),
scrollStrategy: new NoOpScrollStrategy()
};
public selectionHandler(eventArgs: ISelectionEventArgs) {
this.text = eventArgs.newSelection.value;
eventArgs.cancel = true;
}
}
Mutli-Level Drop Down menu
El siguiente ejemplo demuestra cómo implementar un menú desplegable de varios niveles que permite al usuario navegar rápida y fácilmente a través de una jerarquía de contenido al pasar el cursor sobre una serie de menús anidados.
Para la implementación del menú desplegable de varios niveles, usaremos IgxDropDownComponent, así como una directiva y un servicio personalizados que se describen a continuación.
Para configurar IgxDropDownItem para abrir un menú desplegable adicional, agregue la directiva multiLevel que manejaría la overlay settings del menú desplegable anidado y administraría su estado abierto/cerrado a través de su propiedad innerDropdown.
<igx-drop-down #dropdown1>
<igx-drop-down-item [value]="'Web'" multiLevel [innerDropdown]="web">
Web <igx-icon igxSuffix>chevron_right</igx-icon>
</igx-drop-down-item>
...
</igx-drop-down>
<igx-drop-down #web>
<igx-drop-down-item [value]="'App Builder'">
App Builder
</igx-drop-down-item>
...
</igx-drop-down>
Para configurar el menú desplegable de varios niveles para que se comporte como un menú, debe controlar el evento de cambio de selección de todos los menús desplegables en la jerarquía y cancelar el comportamiento predeterminado. Luego, para manejar la selección correctamente, puede usar el método handleSelection de MultiLevelService y para evitar que se cierre el menú desplegable al hacer clic en un elemento del menú, use los métodos handleClosing de MultiLevelService.
@ViewChildren(IgxDropDownComponent, { read: IgxDropDownComponent })
private _dropdowns: QueryList<IgxDropDownComponent>;
@ViewChild('dropdown1', { read: IgxDropDownComponent })
private _multiLevelDropdown: IgxDropDownComponent;
constructor(private _multiLevelService: MultiLevelService) { }
public ngAfterViewInit(): void {
this._dropdowns.forEach((dropdown) => {
dropdown.selectionChanging.subscribe((args) => {
args.cancel = true;
const value = args.newSelection.value;
const categories = this._multiLevelService.categories;
if (categories.includes(value)) {
this.selection = '';
return;
}
if (this._multiLevelService.isMultiLevel(dropdown)) {
this._multiLevelService.handleSelection();
} else {
dropdown.close();
}
this.selection = value;
});
});
this._multiLevelDropdown.closing.subscribe((args) => {
this._multiLevelService.handleClosing(args);
});
}
El resultado de las configuraciones anteriores se puede ver en el siguiente ejemplo.
Note
Para mostrar el componente desplegable abierto inicialmente, se recomienda establecer el método open como una devolución de llamada del método requestAnimationFrame. Esto asegurará que el árbol DOM se vuelva a pintar y que todos los elementos estén colocados correctamente.
Navigation directive
Utilice la directiva igxDropDownItemNavigation para habilitar la navegación con el teclado para el componente igxDropDown. Para permitir que la directiva maneje todos los eventos desencadenados, se debe aplicar al elemento activo (enfocado) o a un contenedor principal. De forma predeterminada, un menú desplegable o sus elementos no reciben el foco, por lo que la directiva se puede colocar en un button o input que controlará el menú desplegable. El valor de la directiva de navegación debe apuntar a un componente que sea una instancia o un descendiente de la clase IgxDropDownBaseDirective.
El siguiente ejemplo muestra una entrada que abre y cierra la instancia igxDropDown al hacer clic. La aplicación de la directiva igxDropDownItemNavigation en la entrada misma permitirá la navegación con el teclado cuando se utilicen las teclas de flecha hacia arriba y hacia abajo. Esto se basa en el comportamiento desplegable predeterminado con la propiedad enableItemsFocus establecida en false para permitir que la entrada mantenga el foco.
<!-- input-dropdown.component.html -->
<igx-input-group #inputGroup [igxToggleAction]="dropDown">
<input type="text" igxInput [igxDropDownItemNavigation]="dropDown"
readonly= "true"
placeholder="choose an option"
[value]="dropDown.selectedItem?.value"
(keydown.ArrowDown)="openDropDown()"/>
<igx-suffix igxIconButton="flat" igxRipple>
<igx-icon>arrow_drop{{ dropDown.collapsed ? '_down' : '_up' }}</igx-icon>
</igx-suffix>
</igx-input-group>
<span>Selected: {{ dropDown.selectedItem?.value }}</span>
<igx-drop-down #dropDown [width]="'160px'">
<igx-drop-down-item *ngFor="let item of items" [value]="item.field">
{{ item.field }}
</igx-drop-down-item>
</igx-drop-down>
// input-dropdown.component.ts
export class InputDropDownComponent {
@ViewChild(IgxDropDownComponent) public igxDropDown: IgxDropDownComponent;
@ViewChild('inputGroup', { read: IgxInputGroupComponent}) public inputGroup: IgxInputGroupComponent;
public items: Array<{ field: string }> = [
{ field: 'Option 1' },
{ field: 'Option 2' },
{ field: 'Option 3' }
];
public openDropDown() {
if (this.igxDropDown.collapsed) {
this.igxDropDown.open({
modal: false,
positionStrategy: new ConnectedPositioningStrategy({
target: this.inputGroup.element.nativeElement
})
});
}
}
}
La aplicación de la directiva garantizará que se ejecuten las siguientes acciones como resultado de la navegación con el teclado:
| Nombre | Descripción |
|---|---|
Enter |
Seleccione un elemento del menú desplegable y cierre el menú desplegable. |
Space |
Seleccione un elemento del menú desplegable y cierre el menú desplegable. |
Esc |
Cierra el menú desplegable. |
Arrow Down |
Navegue al siguiente elemento en el componente de destino. |
Arrow Up |
Navegue al elemento anterior en el componente de destino. |
End |
Navegue hasta el último elemento del componente de destino. |
Home |
Navegue hasta el primer elemento del componente de destino. |
Cuando la propiedad allowItemsFocus está habilitada, los elementos desplegables obtienen un índice de pestaña y se enfocan cuando están activos. Los elementos desplegables enfocados son los que desencadenan eventos durante la navegación con el teclado, lo que significa que la directiva de navegación debe aplicarse en los elementos desplegables individuales.
<igx-input-group [igxToggleAction]="dropDown">
<input igxInput type="text">
</igx-input-group>
<igx-drop-down #dropDown [allowItemsFocus]="true">
<igx-drop-down-item *ngFor="let p of provinceData" [igxDropDownItemNavigation]="dropDown">
{{ p }}
</igx-drop-down-item>
</igx-drop-down>
Estilismo
Usando la Ignite UI for Angular Theming, podemos alterar en gran medida la apariencia del menú desplegable. Primero, para que podamos utilizar las funciones expuestas por el motor de temas, necesitamos importar el archivo index en nuestro archivo de estilo:
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
Siguiendo el enfoque más simple, creamos un nuevo tema que extiende el drop-down-theme y acepta algunos de los parámetros del tema predeterminado.
$custom-drop-down-theme: drop-down-theme(
$background-color: #fdfdfd,
$header-text-color: #345779,
$item-text-color: #2dabe8,
$selected-item-background: #345779,
$selected-item-text-color: #fdfdfd,
$selected-hover-item-background: #345779,
$selected-hover-item-text-color: #fdfdfd,
$selected-focus-item-background: #345779,
$selected-focus-item-text-color: #fdfdfd,
$hover-item-background: rgba(0, 0, 0, 0.12),
$hover-item-text-color: #345779,
);
Using CSS variables
El último paso es pasar el tema desplegable personalizado:
@include css-vars($custom-drop-down-theme);
Using Theme Overrides
Para diseñar componentes para navegadores más antiguos, como Internet Explorer 11, tenemos que utilizar un enfoque diferente, ya que no admite variables CSS.
Si el componente utiliza Emulated ViewEncapsulation, es necesario penetrate esta encapsulación usando::ng-deep. Para evitar que el tema personalizado se filtre a otros componentes, asegúrese de incluir el selector:host antes de::ng-deep:
:host {
::ng-deep {
@include drop-down($custom-drop-down-theme);
}
}
Note
El componente IgxDropDown utiliza IgxOverlay para contener y mostrar el contenedor de la lista igx-drop-down-items. Para definir correctamente el alcance de sus estilos, es posible que deba utilizar un OverlaySetting.outlet. Para más detalles consulte: Guía de estilo IgxOverlay.
Demo
API Summary
- Componente IgxDropDown
- Estilos de componentes IgxDropDown
- IgxDropDownItemComponent.
- Superposición Igx
- Estilos de superposición Igx
- DirectivaIgxDivider
- IgxDividerEstilos directivos
Theming Dependencies
Additional Resources
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.
GitHub