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';
// 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';
// 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 {}

Now that you have the Ignite UI for Angular Splitter module or directives imported, you can start using the igx-splitter component.

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

The splitter can be vertical or horizontal, which is defined by the type input. The default value is 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

You can make the splitter collapsible or not by showing or hiding the splitter's handle and expanders, using the nonCollapsible input. The default value is false, so the splitter is collapsible.

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

Configuring panes

The igxSplitterPane component contains several input properties. You can set the initial pane size by using the size input property. The minSize and maxSize input properties can be used to set the minimum or maximum allowed size of the pane. Resizing beyond minSize and maxSize is not allowed.

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

You can also forbid the resizing of a pane by setting its resizable input property to 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 - Moves the splitter bar up in a vertical splitter
Arrow Down - Moves the splitter bar down in a vertical splitter
Arrow Left - Moves the splitter bar left in a horizontal splitter
Arrow Right - Moves the splitter bar right in a horizontal splitter
Ctrl + Arrow Up - Expands/Collapses a pane in a vertical splitter
Ctrl + Arrow Down - Expands/Collapses a pane in a vertical splitter
Ctrl + Arrow Left - Expands/Collapses a pane in a horizontal splitter
Ctrl + Arrow Right - Expands/Collapses a pane in a horizontal splitter

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

To get started with styling the igxSplitter component, you need to import the index file, where all the theme functions and component mixins live:

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

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

You can change the default styles of the splitter by creating a new theme that extends the splitter-theme. By providing just the base parameters, the theme will automatically generate all necessary styles for the interaction states.

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

You can either use the --size variable, targeting the igx-splitter directly:

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

Or you can use the universal --igx-splitter-size variable to target all instances:

<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