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 issoIgxSplitterModule no seu arquivo 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 você pode importarIgxSplitterComponent como uma dependência independente ou usar oIGX_SPLITTER_DIRECTIVES token para importar o componente e todos os seus componentes e diretivas de suporte.

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

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

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

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

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

Estilização

Splitter Theme Property Map

Quando você modifica uma propriedade primária, todas as propriedades dependentes relacionadas são atualizadas automaticamente para refletir a alteração:

Propriedade primária	Propriedade dependente	Descrição
$bar-cor	$handle cor	A cor da alça de arrasto da barra
	$expander cor	A cor do expansor de seta
	$focus cor	A cor usada para a barra divisora focada

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

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.

Styling with Tailwind

Você pode estilizar o splitter usando nossas classes utilitárias personalizadas Tailwind. Certifique-se de configurar o Tailwind primeiro.

Junto com a importação de vento de cauda em sua folha de estilo global, você pode aplicar os utilitários de tema desejados da seguinte maneira:

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

O arquivo utilitário inclui tantolight as variantes quantodark as do tema.

Uselight-* as aulas para o tema da luz.
Usedark-* classes para o tema sombrio.
Adicione o nome do componente após o prefixo, por exemplo,light-splitter,dark-splitter.

Uma vez aplicadas, essas classes possibilitam cálculos dinâmicos de temas. A partir daí, você pode sobrescrever as variáveis CSS geradas usandoarbitrary properties. Após os dois-pos, forneça qualquer formato de cor CSS válido (HEX, variável CSS, RGB, etc.).

Você pode encontrar a lista completa de propriedades no tema divisor. A sintaxe é a seguinte:

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

Note

O ponto de exclamação(!) é necessário para garantir que a classe utilitária tenha prioridade. O Tailwind aplica estilos em camadas e, sem marcar esses estilos como importantes, eles serão substituídos pelo tema padrão do componente.

Custom sizing

Você pode usar a--size variável, direcionando diretamente oigx-splitter seguinte:

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

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

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

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

API References

Theming Dependencies

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

Visão geral do componente divisor Angular

Angular Splitter Example

Getting Started with Ignite UI for Angular Splitter

Using the Angular Splitter

Orientation

Collapsible Splitter

Configuring panes

Nested panes

Demo

Navegação pelo teclado

Key combinations

Estilização

Splitter Theme Property Map

Using CSS Variables

Demo

Styling with Tailwind

Note

Custom sizing

API References

Theming Dependencies

Temas