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

EXAMPLE

TS

HTML

SCSS

import { Component } from '@angular/core';
import { SplitterType, IgxSplitterComponent, IgxSplitterPaneComponent } from 'igniteui-angular';

@Component({
    selector: 'app-splitter-horizontal-sample',
    styleUrls: ['splitter-horizontal-sample.component.scss'],
    templateUrl: 'splitter-horizontal-sample.component.html',
    imports: [IgxSplitterComponent, IgxSplitterPaneComponent]
})
export class SplitterHorizontalSampleComponent {
    public type = SplitterType.Horizontal;
}
tsコピー

<igx-splitter style='height: 100vh;' [style.width]='"100%"'>
        <igx-splitter-pane>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in lacus eget turpis congue fermentum. Aliquam sollicitudin massa vel ullamcorper bibendum. Donec sit amet augue in justo fermentum facilisis vel quis quam. Vivamus eget iaculis nisi, vitae dignissim leo. Donec eget consectetur lacus. In viverra vehicula libero, quis dictum odio varius in. Phasellus aliquam elit et lectus ornare placerat. Aliquam vitae sapien facilisis, auctor enim quis, consectetur dui. Cras elementum velit eros, ut efficitur ante pellentesque in. Proin vulputate lacus dui, vitae imperdiet dui pharetra ac. Nunc sagittis, sapien et posuere varius, mauris justo tincidunt odio, in interdum lorem libero sed enim. Nulla placerat scelerisque felis vitae accumsan.
            </p>
        </igx-splitter-pane>
        <igx-splitter-pane>
            <p>
                Duis auctor, diam id vehicula consequat, lacus tellus molestie magna, sed varius nisi quam eget nisl. Donec dignissim mi et elementum laoreet. Nam dignissim quis justo eu fermentum. Proin vestibulum, neque quis elementum tincidunt, nibh mi gravida purus, eget volutpat ipsum magna in orci. Donec id mauris vitae lectus molestie blandit. Praesent non quam interdum, efficitur lacus nec, gravida mauris. Ut ac ante maximus, ultrices turpis a, aliquam magna. Praesent blandit ante ut nulla malesuada lobortis. Praesent a lobortis justo. Morbi congue, dui sed ornare faucibus, turpis felis vulputate arcu, lobortis posuere sem leo eget risus. Duis risus augue, dignissim ac tincidunt a, ullamcorper rutrum nisl. Ut ut ipsum vel purus viverra dapibus.
            </p>
        </igx-splitter-pane>
    </igx-splitter>
htmlコピー

p {
    padding: 0 16px;
}
scssコピー

Edit in: CodesandboxStackBlitz

Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.

60 以上のコンポーネント、柔軟な API、強力なテーマ設定およびブランディング機能、必要な速度と機能を備えた Angular アプリケーションを構築するための豊富な機能セット。

無料で試してみる

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

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

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

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

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

EXAMPLE

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

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

Demo

EXAMPLE

TS

HTML

SCSS

import { Component } from '@angular/core';
import { SplitterType, IgxSplitterComponent, IgxSplitterPaneComponent } from 'igniteui-angular';

@Component({
    selector: 'app-splitter-nested-sample',
    styleUrls: ['splitter-nested-sample.component.scss'],
    templateUrl: 'splitter-nested-sample.component.html',
    imports: [IgxSplitterComponent, IgxSplitterPaneComponent]
})
export class SplitterNestedSampleComponent {
    public typeHorizontal = SplitterType.Horizontal;
    public typeVertical = SplitterType.Vertical;
}
tsコピー

<igx-splitter style='height: 100vh;' [type]="typeHorizontal" >
    <igx-splitter-pane size='50%'>
        <igx-splitter [type]="typeVertical" [style.width]='"100%"'>
            <igx-splitter-pane size='50%'>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in lacus eget turpis congue fermentum. Aliquam sollicitudin massa vel ullamcorper bibendum. Donec sit amet augue in justo fermentum facilisis vel quis quam. Vivamus eget iaculis nisi, vitae dignissim leo. Donec eget consectetur lacus. In viverra vehicula libero, quis dictum odio varius in. Phasellus aliquam elit et lectus ornare placerat. Aliquam vitae sapien facilisis, auctor enim quis, consectetur dui. Cras elementum velit eros, ut efficitur ante pellentesque in. Proin vulputate lacus dui, vitae imperdiet dui pharetra ac. Nunc sagittis, sapien et posuere varius, mauris justo tincidunt odio, in interdum lorem libero sed enim. Nulla placerat scelerisque felis vitae accumsan. Curabitur id tortor laoreet, luctus justo sit amet, viverra mi. Nunc laoreet auctor metus eget suscipit. Vestibulum vestibulum imperdiet pharetra. Sed ac dignissim dui. In vitae suscipit nunc. Praesent vel felis nulla. Nullam non justo elit. Ut quis eleifend libero. Morbi ut maximus dui, non tristique risus.
                </p>
            </igx-splitter-pane>
            <igx-splitter-pane size='50%'>
                <p>
                    Suspendisse potenti. Mauris vehicula neque ullamcorper tortor pulvinar gravida. Integer porttitor orci ex, ac vehicula nisi ultricies vel. Phasellus feugiat, urna eget congue sollicitudin, augue mi vulputate velit, in porttitor lacus orci sit amet eros. Donec mollis tempor mi. Ut sed justo consectetur, laoreet orci id, vestibulum velit. Aliquam ultricies arcu nec placerat eleifend. Integer ornare auctor mauris, vitae placerat est hendrerit ut.
                </p>
            </igx-splitter-pane>
        </igx-splitter>
    </igx-splitter-pane>
    <igx-splitter-pane size='49%'>
        <igx-splitter [type]="typeVertical" [style.width]='"100%"'>
            <igx-splitter-pane size='50%'>
                <p>
                    Duis auctor, diam id vehicula consequat, lacus tellus molestie magna, sed varius nisi quam eget nisl. Donec dignissim mi et elementum laoreet. Nam dignissim quis justo eu fermentum. Proin vestibulum, neque quis elementum tincidunt, nibh mi gravida purus, eget volutpat ipsum magna in orci. Donec id mauris vitae lectus molestie blandit. Praesent non quam interdum, efficitur lacus nec, gravida mauris. Ut ac ante maximus, ultrices turpis a, aliquam magna. Praesent blandit ante ut nulla malesuada lobortis. Praesent a lobortis justo. Morbi congue, dui sed ornare faucibus, turpis felis vulputate arcu, lobortis posuere sem leo eget risus. Duis risus augue, dignissim ac tincidunt a, ullamcorper rutrum nisl. Ut ut ipsum vel purus viverra dapibus. Maecenas efficitur nibh elementum, pellentesque sapien sit amet, fermentum sem. Pellentesque nisl mi, porta eget viverra a, tincidunt ac ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum et malesuada fames ac ante ipsum primis in faucibus.
                </p>
            </igx-splitter-pane>
            <igx-splitter-pane size='50%'>
                <p>
                    Suspendisse potenti. Proin faucibus venenatis purus in pellentesque. Nunc eget justo pretium massa pellentesque sodales. Phasellus orci ligula, condimentum et faucibus id, faucibus sit amet mauris. Praesent consequat cursus mauris, eget tempus lorem. Quisque vel leo nec massa aliquam pellentesque sit amet vel erat. Phasellus at mauris laoreet, egestas magna eget, dignissim nisl. Etiam non nibh nec orci elementum facilisis a vel tortor. Praesent sagittis mattis risus non tincidunt.
                </p>
            </igx-splitter-pane>
        </igx-splitter>
    </igx-splitter-pane>
</igx-splitter>
htmlコピー

p {
    padding: 0 16px;
}
scssコピー

Edit in: CodesandboxStackBlitz

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

Using CSS Variables

El siguiente paso es pasar el tema divisor personalizado:

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

Demo

Este es el resultado final de aplicar su nuevo tema.

EXAMPLE

TS

HTML

SCSS

import { Component } from '@angular/core';
import { SplitterType, IgxSplitterComponent, IgxSplitterPaneComponent } from 'igniteui-angular';

@Component({
    selector: 'app-splitter-styling-sample',
    styleUrls: ['splitter-styling-sample.component.scss'],
    templateUrl: 'splitter-styling-sample.component.html',
    imports: [IgxSplitterComponent, IgxSplitterPaneComponent]
})
export class SplitterStylingSampleComponent {
    public type = SplitterType.Horizontal;
}
tsコピー

<igx-splitter style='height: 100vh;' [style.width]='"100%"'>
    <igx-splitter-pane>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in lacus eget turpis congue fermentum. Aliquam sollicitudin massa vel ullamcorper bibendum. Donec sit amet augue in justo fermentum facilisis vel quis quam. Vivamus eget iaculis nisi, vitae dignissim leo. Donec eget consectetur lacus. In viverra vehicula libero, quis dictum odio varius in. Phasellus aliquam elit et lectus ornare placerat. Aliquam vitae sapien facilisis, auctor enim quis, consectetur dui. Cras elementum velit eros, ut efficitur ante pellentesque in. Proin vulputate lacus dui, vitae imperdiet dui pharetra ac. Nunc sagittis, sapien et posuere varius, mauris justo tincidunt odio, in interdum lorem libero sed enim. Nulla placerat scelerisque felis vitae accumsan. Curabitur id tortor laoreet, luctus justo sit amet, viverra mi. Nunc laoreet auctor metus eget suscipit. Vestibulum vestibulum imperdiet pharetra. Sed ac dignissim dui. In vitae suscipit nunc. Praesent vel felis nulla. Nullam non justo elit. Ut quis eleifend libero. Morbi ut maximus dui, non tristique risus.
        </p>
    </igx-splitter-pane>
    <igx-splitter-pane>
        <p>
            Duis auctor, diam id vehicula consequat, lacus tellus molestie magna, sed varius nisi quam eget nisl. Donec dignissim mi et elementum laoreet. Nam dignissim quis justo eu fermentum. Proin vestibulum, neque quis elementum tincidunt, nibh mi gravida purus, eget volutpat ipsum magna in orci. Donec id mauris vitae lectus molestie blandit. Praesent non quam interdum, efficitur lacus nec, gravida mauris. Ut ac ante maximus, ultrices turpis a, aliquam magna. Praesent blandit ante ut nulla malesuada lobortis. Praesent a lobortis justo. Morbi congue, dui sed ornare faucibus, turpis felis vulputate arcu, lobortis posuere sem leo eget risus. Duis risus augue, dignissim ac tincidunt a, ullamcorper rutrum nisl. Ut ut ipsum vel purus viverra dapibus. Maecenas efficitur nibh elementum, pellentesque sapien sit amet, fermentum sem. Pellentesque nisl mi, porta eget viverra a, tincidunt ac ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum et malesuada fames ac ante ipsum primis in faucibus.
        </p>
    </igx-splitter-pane>
</igx-splitter>htmlコピー

@use "layout.scss";
@use "igniteui-angular/theming" as *;

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

@include css-vars($splitter-theme);
 scssコピー

Edit in: CodesandboxStackBlitz

Custom sizing

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

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