Descripción general del componente del divisor de Angular

El componente Divisor de Ignite UI for Angular proporciona la capacidad de crear diseños, divididos en varios paneles dispuestos vertical u horizontalmente que se pueden cambiar de tamaño, expandir y contraer. Estas interacciones se realizan a través de la interfaz de usuario expuesta en las barras divisoras entre los paneles. En la siguiente demostración se muestra un diseño de divisor simple.

Angular Splitter Example

Getting Started with Ignite UI for Angular Splitter

Para comenzar con el componente Ignite UI for Angular Splitter, 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 al Ignite UI for Angular, lea el tema de introducción.

El siguiente paso es importar IgxSplitterModule en su archivo app.module.ts.

// app.module.ts
...
import { IgxSplitterModule } from 'igniteui-angular';
// import { IgxSplitterModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxSplitterModule],
    ...
})
export class AppModule {}

Alternativamente, a partir de 16.0.0, puede importar IgxSplitterComponent como una dependencia independiente o usar el token IGX_SPLITTER_DIRECTIVES para importar el componente y todos sus componentes y directivas de soporte.

// home.component.ts

import { IGX_SPLITTER_DIRECTIVES } from 'igniteui-angular';
// import { IGX_SPLITTER_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-splitter>
        <igx-splitter-pane>
            Pane 1
        </igx-splitter-pane>
        <igx-splitter-pane>
            Pane 2
        </igx-splitter-pane>
    </igx-splitter>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_SPLITTER_DIRECTIVES]
    /* or imports: [IgxSplitterComponent, IgxSplitterPaneComponent] */
})
export class HomeComponent {}

Ahora que tiene el módulo o las directivas Ignite UI for Angular Splitter importados, puede comenzar a usar el igx-splitter componente.

Using the Angular Splitter

igxSplitter se inicializa con la etiqueta igx-splitter. Se pueden definir múltiples paneles divisores bajo un único componente igx-splitter. El contenido del panel tiene plantillas y se representará en su propio contenedor de tamaño variable.

<!-- splitter.component.html -->
<igx-splitter>
    <igx-splitter-pane>
        ...
    </igx-splitter-pane>
    <igx-splitter-pane>
        ...
    </igx-splitter-pane>
    <igx-splitter-pane>
        ...
    </igx-splitter-pane>
</igx-splitter>

Orientation

El divisor puede ser vertical u horizontal, lo cual está definido por el type de entrada. El valor predeterminado es Vertical.

public type = SplitterType.Horizontal;

<igx-splitter [type]="type">
    <igx-splitter-pane>
        ...
    </igx-splitter-pane>
    <igx-splitter-pane>
        ...
    </igx-splitter-pane>
</igx-splitter>

Collapsible Splitter

Puede hacer que el divisor sea plegable o no mostrando u ocultando el controlador y los expansores del divisor, usando la nonCollapsible entrada. El valor predeterminado es false, por lo que el divisor se puede contraer.

<igx-splitter [nonCollapsible]="true">
    <igx-splitter-pane>
        ...
    </igx-splitter-pane>
    <igx-splitter-pane>
        ...
    </igx-splitter-pane>
</igx-splitter>

Configuring panes

El componente igxSplitterPane contiene varias propiedades de entrada. Puede establecer el tamaño del panel inicial utilizando la propiedad de entrada size. Las propiedades de entrada minSize y maxSize se pueden utilizar para establecer el tamaño mínimo o máximo permitido del panel. No se permite cambiar el tamaño más allá de minSize y maxSize.

<igx-splitter>
    <igx-splitter-pane size='300px' minSize='100px'>
        ...
    </igx-splitter-pane>
    <igx-splitter-pane size='300px' maxSize='500px'>
        ...
    </igx-splitter-pane>
</igx-splitter>

También puede prohibir el cambio de tamaño de un panel estableciendo su propiedad de entrada resizable en false.

<igx-splitter>
    <igx-splitter-pane [resizable]='false'>
        ...
    </igx-splitter-pane>
    <igx-splitter-pane>
        ...
    </igx-splitter-pane>
</igx-splitter>

Nested panes

Puede anidar componentes divisores para crear un diseño más complejo dentro de un panel divisor.

public typeHorizontal = SplitterType.Horizontal;
public typeVertical = SplitterType.Vertical;

<igx-splitter style='height: 30vh;' [type]='typeHorizontal' >
    <igx-splitter-pane>
        <igx-splitter [type]='typeVertical' [style.width]='"100%"'>
            <igx-splitter-pane>
                Pane1.1
            </igx-splitter-pane>
            <igx-splitter-pane>
                Pane1.2
            </igx-splitter-pane>
        </igx-splitter>
    </igx-splitter-pane>
    <igx-splitter-pane>
        <igx-splitter [type]='typeVertical' [style.width]='"100%"'>
            <igx-splitter-pane>
                Pane2.1
            </igx-splitter-pane>
            <igx-splitter-pane>
                Pane2.2
            </igx-splitter-pane>
        </igx-splitter>
    </igx-splitter-pane>
</igx-splitter>

Demo

Navegación por teclado

La navegación con el teclado está disponible de forma predeterminada en el componente divisor. Cuando enfoca una barra divisoria y presiona una de las siguientes combinaciones de teclas, se realiza el comportamiento descrito.

Key combinations

• Arrow Up: mueve la barra divisoria hacia arriba en un divisor vertical.
• Arrow Down: mueve la barra divisoria hacia abajo en un divisor vertical.
• Arrow Left: mueve la barra divisoria hacia la izquierda en un divisor horizontal.
• Arrow Right: mueve la barra divisoria hacia la derecha en un divisor horizontal
• Ctrl + Arrow Up: expande/contrae un panel en un divisor vertical
• Ctrl + Arrow Down: expande/contrae un panel en un divisor vertical
• Ctrl + Arrow Left: expande/contrae un panel en un divisor horizontal
• Ctrl + Arrow Right: expande/contrae un panel en un divisor horizontal

Estilismo

Para comenzar a diseñar el componente igxSplitter, debe importar el archivo index, donde se encuentran todas las funciones del tema y los mixins de componentes:

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

Puede cambiar los estilos predeterminados del divisor creando un nuevo tema que amplíe el splitter-theme. Al proporcionar solo los parámetros básicos, el tema generará automáticamente todos los estilos necesarios para los estados de interacción.

// In splitter-styling-sample.component.scss

$splitter-theme: splitter-theme(
  $bar-color: #011627,
  $handle-color: #ecaa53,
  $expander-color: #ecaa53,
  $size: 4px
);

Using CSS Variables

El siguiente paso es pasar el tema divisor personalizado:

@include css-vars($custom-splitter-theme);

Demo

Este es el resultado final de aplicar su nuevo tema.

Custom sizing

Puede utilizar la variable, dirigiéndose directamente a la--size​ ​igx-splitter variable :

igx-splitter {
  --size: 10px;
}

O bien, puede utilizar la variable universal--igx-splitter-size para dirigirse a todas las instancias:

<div class="my-app">
  <igx-splitter></igx-splitter>
</div>

.my-app {
  --igx-splitter-size: 10px;
}

API References

• Componente IgxSplitter
• Componente IgxSplitterPane
• Tipo de divisor
• Estilos de componentes IgxSplitter

Theming Dependencies

• Tema desplegable Igx
• Estilos de iconos Igx

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.

• Ignite UI for Angular Foros
• Ignite UI for Angular GitHub