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.

    Ejemplo de divisor de Angular

    EXAMPLE
    TS
    HTML
    SCSS

    ¿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 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
    cmd

    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 {}
    typescript

    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 {}
    typescript

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

    Uso del divisor de Angular

    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>
    html

    Orientación

    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;
    typescript
    <igx-splitter [type]="type">
        <igx-splitter-pane>
            ...
        </igx-splitter-pane>
        <igx-splitter-pane>
            ...
        </igx-splitter-pane>
    </igx-splitter>
    html

    Divisor plegable

    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>
    html

    EXAMPLE

    Configurar paneles

    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>
    html

    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>
    html

    Paneles anidados

    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;
    typescript
    <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>
    html

    Manifestación

    EXAMPLE
    TS
    HTML
    SCSS

    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.

    Combinaciones de teclas

    • 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
    App Builder | CTA Banner

    Estilo

    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';
    scss

    Puede cambiar los estilos predeterminados del divisor creando un nuevo tema que extienda el splitter-theme.

    // In splitter-styling-sample.component.scss
    
    $custom-splitter-theme: splitter-theme(
      $bar-color: #011627,
      $handle-color: #ecaa53,
      $expander-color: #ecaa53,
      $border-radius: 0,
      $focus-color: #ecaa53,
      $size: 4px
    );
    scss

    Usando variables CSS

    El siguiente paso es pasar el tema divisor personalizado:

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

    Manifestación

    Este es el resultado final de aplicar su nuevo tema.

    EXAMPLE
    TS
    HTML
    SCSS

    Tamaño personalizado

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

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

    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>
    html
    .my-app {
      --igx-splitter-size: 10px;
    }
    scss

    Referencias de API

    Dependencias temáticas

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