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 importarlosIgxSplitterModule en tu archivo app.module.ts.

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

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

Alternativamente,16.0.0 puedes importarlosIgxSplitterComponent como una dependencia independiente, o usar elIGX_SPLITTER_DIRECTIVES token para importar el componente y todos sus componentes y directivas de soporte.

// home.component.ts

import { IGX_SPLITTER_DIRECTIVES } from 'igniteui-angular/splitter';
// 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 tienes importado el módulo o directivas del divisor Ignite UI for Angular, puedes empezar a usar eligx-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 que se define por latype 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

Puedes hacer que el divisor sea plegable o no mostrando o ocultando la maneta y los expansores del divisor, usando lanonCollapsible entrada. El valor por defecto es falso, por lo que el divisor es plegable.

<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. Puedes establecer el tamaño inicial del panel usando lasize propiedad de entrada. LasminSize propiedades de entrada ymaxSize pueden usarse para establecer el tamaño mínimo o máximo permitido del panel. No está permitido redimensionar más alláminSize de la situaciónmaxSize.

<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 puedes prohibir el redimensionamiento de un panel configurando suresizable propiedad de entrada 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 divisora hacia arriba en un divisor vertical
Arrow Down- Mueve la barra divisoria hacia abajo en un divisor vertical
Arrow Left- Mueve la barra divisora hacia la izquierda en un divisor horizontal
Arrow Right- Mueve la barra divisora hacia la derecha en un divisor horizontal
Ctrl + Arrow Up- Expande/Colapsa un panel en un divisor vertical
Ctrl + Arrow Down- Expande/Colapsa un panel en un divisor vertical
Ctrl + Arrow Left- Expande/Colapsa un panel en un divisor horizontal
Ctrl + Arrow Right- Expande/Colapsa un panel en un divisor horizontal

Estilismo

Splitter Theme Property Map

Al modificar una propiedad principal, todas las propiedades dependientes relacionadas se actualizan automáticamente para reflejar el cambio:

Propiedad principal	Propiedad dependiente	Descripción
$bar color	$handle-color	El color para la maneta de arrastre del manillar
	$expander color	El color para el expansor de flechas
	$focus-color	El color utilizado para la barra divisora enfocada

Para empezar a estilizar el componente igxSplitter, necesitas importar elindex archivo, donde están todas las funciones de tema y las mezclas 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';

Puedes cambiar los estilos predeterminados del divisor creando un nuevo tema que extienda elsplitter-theme. Al proporcionar solo los parámetros base, 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.

Styling with Tailwind

Puedes diseñar el divisor usando nuestras clases utilitarias personalizadas de Tailwind. Asegúrate de configurar primero a Tailwind.

Junto con la importación de viento de cola en su hoja de estilo global, puede aplicar las utilidades de tema deseadas de la siguiente manera:

@import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

El archivo de utilidad incluye variantes tantolight comodark de tema.

Usalight-* clases para el tema ligero.
Usadark-* clases para el tema oscuro.
Añadir el nombre del componente después del prefijo, por ejemplo, ,light-splitter,dark-splitter.

Una vez aplicadas, estas clases permiten cálculos dinámicos de temas. Desde ahí, puedes anular las variables CSS generadas usandoarbitrary properties. Después de los dos puntos, proporciona cualquier formato de color CSS válido (HEX, variable CSS, RGB, etc.).

Puedes encontrar la lista completa de propiedades en el tema divisor. La sintaxis es la siguiente:

<igx-splitter
  class="!light-splitter ![--bar-color:#7B9E89]">
  ...
</igx-splitter>

Note

El signo de exclamación(!) es necesario para asegurar que la clase de utilidad tenga prioridad. Tailwind aplica estilos en capas y, sin marcar estos estilos como importantes, serán anulados por el tema predeterminado del componente.

Custom sizing

Puedes usar la--size variable, dirigiéndote directamente a:igx-splitter

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

O puedes usar la variable universal--igx-splitter-size para dirigirte 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 del divisor de 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

Splitter Theme Property Map

Using CSS Variables

Demo

Styling with Tailwind

Note

Custom sizing

API References

Theming Dependencies

Tematización