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

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

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, definido pelatype entrada. 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 dobrável ou não mostrando ou escondendo a alavanca e os expansores do divisor, usando anonCollapsible entrada. O valor padrão é falso, então o divisor é colapsá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 asize propriedade de entrada. AsminSize propriedades de entrada emaxSize podem ser usadas para definir o tamanho mínimo ou máximo permitido do painel. Redimensionar alémminSize do limite nãomaxSize é 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 suaresizable propriedade de entrada como falso.

<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- 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 divisória para a esquerda em um divisor horizontal
Arrow Right- Move a barra divisória para a direita em um divisor horizontal
Ctrl + Arrow Up- Expande/Colapsa um painel em um divisor vertical
Ctrl + Arrow Down- Expande/Colapsa um painel em um divisor vertical
Ctrl + Arrow Left- Expande/Colapsa um painel em um divisor horizontal
Ctrl + Arrow Right- Expande/Colapsa um painel em um divisor horizontal

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

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

@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 mudar os estilos padrão do divisor criando um novo tema que estenda osplitter-theme. Ao fornecer apenas os parâmetros base, o tema gerará automaticamente todos os estilos necessários para os estados de interação.

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