Visão geral do componente divisor Angular

O componente Ignite UI for Angular Splitter fornece a capacidade de criar layouts, divididos em vários painéis dispostos vertical ou horizontalmente que podem ser redimensionados, expandidos e recolhidos. Essas interações são realizadas por meio da UI exposta nas barras divisoras entre os painéis. Um layout Splitter simples é demonstrado na demonstração abaixo.

Angular Splitter Example

Getting Started with Ignite UI for Angular Splitter

Para começar a usar o componente Ignite UI for Angular Splitter, primeiro você precisa instalar Ignite UI for Angular. Em um aplicativo Angular existente, digite o seguinte comando:

ng add igniteui-angular

Para obter uma introdução completa ao Ignite UI for Angular, leia o tópico de introdução.

O próximo passo é importar o IgxSplitterModule no seu arquivo 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 {}

Como alternativa, a partir da 16.0.0, você pode importar o IgxSplitterComponent como uma dependência autônoma ou usar o token IGX_SPLITTER_DIRECTIVES para importar o componente e todos os seus componentes e diretivas de suporte.

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

Agora que você importou o módulo Ignite UI for Angular Splitter ou as diretivas, você pode começar a usar o componente igx-splitter.

Using the Angular Splitter

igxSplitter é inicializado com a tag igx-splitter. Vários painéis divisores podem ser definidos sob um único componente igx-splitter. O conteúdo do painel é modelável e será renderizado em seu próprio contêiner redimensionável.

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

O divisor pode ser vertical ou horizontal, o que é definido pelo type input. O valor padrão é 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

Você pode tornar o divisor recolhível ou não, mostrando ou ocultando o handle e os expansores do divisor, usando a entrada nonCollapsible. O valor padrão é false, então o divisor é recolhível.

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

Configuring panes

O componente igxSplitterPane contém várias propriedades de entrada. Você pode definir o tamanho inicial do painel usando a propriedade de entrada size. As propriedades de entrada minSize e maxSize podem ser usadas para definir o tamanho mínimo ou máximo permitido do painel. Redimensionar além de minSize e maxSize não é permitido.

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

Você também pode proibir o redimensionamento de um painel definindo sua propriedade de entrada resizable como false.

<igx-splitter>
    <igx-splitter-pane [resizable]='false'>
        ...
    </igx-splitter-pane>
    <igx-splitter-pane>
        ...
    </igx-splitter-pane>
</igx-splitter>

Nested panes

Você pode aninhar componentes divisores para criar um layout mais complexo dentro de um painel 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

Navegação pelo teclado

A navegação pelo teclado está disponível por padrão no componente splitter. Quando você foca uma barra divisora e pressiona uma das seguintes combinações de teclas, o comportamento descrito é executado.

Key combinations

• Arrow Up- move a barra divisora para cima em um divisor vertical
• Arrow Down- move a barra divisora para baixo em um divisor vertical
• Arrow Left- move a barra divisora para a esquerda em um divisor horizontal
• Arrow Right- move a barra divisora para a direita em um divisor horizontal
• Ctrl + Arrow Up- Expande/recolhe um painel em um divisor vertical
• Ctrl + Arrow Down- Expande/recolhe um painel em um divisor vertical
• Ctrl + Arrow Left- Expande/recolhe um painel em um divisor horizontal
• Ctrl + Arrow Right- Expande/recolhe um painel em um divisor horizontal

Estilização

Para começar a estilizar o componente igxSplitter, você precisa importar o arquivo index, onde todas as funções do tema e mixins de componentes estão localizados:

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

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

Você pode alterar os estilos padrão do divisor criando um novo tema que estenda o 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
);

Using CSS Variables

O próximo passo é passar o tema do divisor personalizado:

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

Demo

Este é o resultado final da aplicação do seu novo tema.

Custom sizing

Você pode usar a variável--size, direcionando diretamente o igx-splitter:

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

Ou você pode usar a variável universal--igx-splitter-size para atingir todas as instâncias:

<div class="my-app">
  <igx-splitter></igx-splitter>
</div>

.my-app {
  --igx-splitter-size: 10px;
}

API References

• Componente IgxSplitter
• Componente IgxSplitterPane
• Tipo de divisor
• Estilos de componentes IgxSplitter

Theming Dependencies

• Tema IgxDropDown
• Estilos IgxIcon

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

• Ignite UI for Angular Fóruns
• Ignite UI for Angular GitHub