Angular 스플리터 구성요소 개요

Ignite UI for Angular 레이아웃을 생성하고 크기를 조정하고 확장하고 축소할 수 있는 수직 또는 수평으로 배열된 여러 창으로 분할하는 기능을 제공합니다. 이러한 상호 작용은 창 사이의 분할 막대에 노출된 UI를 통해 수행됩니다. 아래 데모에서는 간단한 Splitter 레이아웃을 보여줍니다.

Angular Splitter Example

Getting Started with Ignite UI for Angular Splitter

Ignite UI for Angular Splitter 구성 요소를 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.

ng add igniteui-angular

Ignite UI for Angular에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

다음 단계는 IgxSplitterModule 당신의 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 {}

또는 16.0.0부터 IgxSplitterComponent 독립 실행형 종속성으로 가져오거나 IGX_SPLITTER_DIRECTIVES 토큰을 사용하여 구성 요소와 모든 지원 구성 요소 및 지시어를 가져올 수 있습니다.

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

이제 Ignite UI for Angular 가져왔으므로 igx-splitter 구성 요소 사용을 시작할 수 있습니다.

Using the Angular Splitter

igxSplitter는 igx-splitter 태그로 초기화됩니다. 단일 igx-splitter 구성 요소 아래에 여러 분할 창을 정의할 수 있습니다. 창의 콘텐츠는 템플릿으로 작성 가능하며 크기 조정이 가능한 자체 컨테이너로 렌더링됩니다.

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

스플리터는 type 입력에 따라 정의되는 수직 또는 수평이 될 수 있습니다. 기본값은 수직입니다.

public type = SplitterType.Horizontal;

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

Configuring panes

​igxSplitterPane 구성 요소에는 여러 입력 속성이 포함되어 있습니다. size 입력 속성을 사용하여 초기 창 크기를 설정할 수 있습니다. minSize 및 maxSize 입력 속성을 사용하여 창의 최소 또는 최대 허용 크기를 설정할 수 있습니다. minSize 및 maxSize 초과하는 크기 조정은 허용되지 않습니다.

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

​resizable 입력 속성을 false로 설정하여 창 크기 조정을 금지할 수도 있습니다.

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

Nested panes

분할 구성 요소를 중첩하여 분할 창 내부에 더 복잡한 레이아웃을 만들 수 있습니다.

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

키보드 탐색

키보드 탐색은 기본적으로 Splitter 구성 요소에서 사용할 수 있습니다. 분할 막대에 초점을 맞추고 다음 키 조합 중 하나를 누르면 설명된 동작이 수행됩니다.

Key combinations

• Arrow Up- 수직 분할기에서 분할 막대를 위로 이동합니다.
• Arrow Down- 수직 분할기에서 분할 막대를 아래로 이동합니다.
• Arrow Left- 수평 분할기에서 분할 막대를 왼쪽으로 이동합니다.
• Arrow Right- 수평 분할기에서 분할 막대를 오른쪽으로 이동합니다.
• Ctrl + Arrow Up- 수직 분할기에서 창을 확장/축소합니다.
• Ctrl + Arrow Down- 수직 분할기에서 창을 확장/축소합니다.
• Ctrl + Arrow Left- 수평 분할기에서 창을 확장/축소합니다.
• Ctrl + Arrow Right- 수평 분할기에서 창을 확장/축소합니다.

스타일링

​igxSplitter 구성 요소 스타일링을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 index 파일을 가져와야 합니다.

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

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

​splitter-theme 확장하는 새 테마를 생성하여 분배기의 기본 스타일을 변경할 수 있습니다.

// In splitter-styling-sample.component.scss

$splitter-theme: splitter-theme(
    $bar-color: #011627,
    $handle-color: #ECAA53,
    $expander-color: #ECAA53,
    $border-radius: 0,
    $focus-color: #ECAA53,
    $size: 4px
);

Using CSS Variables

다음 단계는 사용자 정의 스플리터 테마를 전달하는 것입니다.

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

Using Theme Overrides

Internet Explorer 11의 구성 요소 스타일을 지정하려면 CSS 변수를 지원하지 않기 때문에 다른 접근 방식을 사용해야 합니다.

구성 요소가 Emulated ViewEncapsulation을 사용하는 경우::ng-deep 사용하여 이 캡슐화를 penetrate 해야 합니다. 반면에 사용자 정의 테마가 다른 구성요소로 누출되는 것을 방지하려면::ng-deep 앞에:host 선택기를 포함해야 합니다.

:host {
    ::ng-deep {
        // Pass the custom splitter theme to the `igx-splitter` mixin
        @include splitter($custom-splitter-theme);
    }
}

Demo

새 테마를 적용한 최종 결과입니다.

Custom sizing

변수를 사용하여--size 다음을 직접 타겟팅 할 수 있습니다. igx-splitter​

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

또는 universal--igx-splitter-size 변수를 사용하여 모든 인스턴스를 타겟팅 할 수 있습니다.

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

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

API References

• IgxSplitter구성요소
• IgxSplitterPaneComponent
• 분배기 유형
• IgxSplitter컴포넌트 스타일

Theming Dependencies

• IgxDropDown 테마
• Igx아이콘 스타일

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

• Ignite UI for Angular 포럼
• Ignite UI for Angular GitHub