Descripción general del componente divisor Angular

El componente Ignite UI for Angular Splitter brinda la capacidad de crear diseños, divididos en múltiples 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 divisorias entre los paneles. En la siguiente demostración se muestra un diseño simple de Splitter.

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 a la 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 ha importado la Ignite UI for Angular Splitter, puede comenzar a usar el componente igx-splitter.

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

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 extienda el splitter-theme.

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

$splitter-theme: splitter-theme(
    $bar-color: #011627,
    $handle-color: #ECAA53,
    $expander-color: #ECAA53,
    $border-radius: 0,
    $focus-color: #ECAA53,
    $size: 4px
);

Using CSS Variables

El siguiente paso es pasar el tema divisor personalizado:

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

Using Theme Overrides

Para diseñar componentes para Internet Explorer 11, tenemos que utilizar un enfoque diferente, ya que no admite variables CSS.

Si el componente utiliza una ViewEncapsulation Emulated, es necesario penetrate esta encapsulación usando::ng-deep. Por otro lado, 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 {
        // Pass the custom splitter theme to the `igx-splitter` mixin
        @include splitter($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

Theming Dependencies

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

Descripción general del componente divisor Angular

Angular Splitter Example

Getting Started with Ignite UI for Angular Splitter

Using the Angular Splitter

Orientation

Collapsible Splitter

Configuring panes

Nested panes

Demo

Navegación por teclado

Key combinations

Estilismo

Using CSS Variables

Using Theme Overrides

Demo

Custom sizing

API References

Theming Dependencies

Tematización