Angular 분할기 구성 요소 개요

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

    Angular 분할기 예제

    EXAMPLE
    TS
    HTML
    SCSS

    이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.

    Ignite UI for Angular Splitter 시작하기

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

    ng add igniteui-angular
    cmd

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

    또는 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 {}
    typescript

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

    Angular 분할기 사용

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

    정위

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

    public type = SplitterType.Horizontal;
    typescript
    <igx-splitter [type]="type">
        <igx-splitter-pane>
            ...
        </igx-splitter-pane>
        <igx-splitter-pane>
            ...
        </igx-splitter-pane>
    </igx-splitter>
    html

    접을 수 있는 스플리터

    입력을 사용하여 스플리터의 핸들과 확장기를 표시하거나 숨겨 스플리터를 접을 수 있거나 접을 수 없도록 할 수 있습니다 nonCollapsible. 기본값은 false이므로 분할자를 축소할 수 있습니다.

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

    EXAMPLE

    창 구성

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

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

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

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

    중첩된 창

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

    public typeHorizontal = SplitterType.Horizontal;
    public typeVertical = SplitterType.Vertical;
    typescript
    <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>
    html

    데모

    EXAMPLE
    TS
    HTML
    SCSS

    키보드 탐색

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

    키 조합

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

    스타일링

    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';
    scss

    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
    );
    scss

    CSS 변수 사용

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

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

    데모

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

    EXAMPLE
    TS
    HTML
    SCSS

    사용자 지정 크기 조정

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

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

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

    <div class="my-app">
      <igx-splitter></igx-splitter>
    </div>
    html
    .my-app {
      --igx-splitter-size: 10px;
    }
    scss

    API 참조

    테마 종속성

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