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/splitter';
// 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/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 {}

    이제 Ignite UI for Angular Splitter 모듈이나 디렉티브를 가져왔으니, 컴포넌트를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>

    Collapsible Splitter

    입력을nonCollapsible 사용해 스플리터의 손잡이와 확장기를 보여주거나 숨기면 접이식 여부를 설정할 수 있습니다. 기본 값이 false이므로 분배기는 접을 수 있습니다.

    <igx-splitter [nonCollapsible]="true">
    <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 입력 속성은 거짓.

    <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- 수평 분열기의 유리창을 팽창/접는

    스타일링

    Splitter Theme Property Map

    기본 속성을 수정하면 모든 관련 종속 속성이 자동으로 업데이트되어 변경 내용이 반영됩니다.

    기본 속성 종속 속성 설명
    $bar색 $handle색 바 드래그 핸들 색상
    $expander색화살 확장기 색상
    $focus색집중 스플리터 바에 사용되는 색상

    ​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,
  $size: 4px
);

    Using CSS Variables

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

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

    Demo

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

    Styling with Tailwind

    스플리터는 저희 맞춤형 Tailwind 유틸리티 클래스를 사용해 스타일링할 수 있습니다. 먼저 Tailwind를 꼭 설정 하세요.

    전역 스타일시트의 순풍 가져오기와 함께 다음과 같이 원하는 테마 유틸리티를 적용할 수 있습니다.

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

    유틸리티 파일에는 테마 변형 두 가지light가dark 모두 포함되어 있습니다.

    • 라이트 테마에는 클래스를 사용light-* 하세요.
    • 어두운 테마에는 클래스를 사용dark-* 하세요.
    • 접두사 뒤에 컴포넌트 이름을 덧붙이세요,light-splitter​dark-splitter 예: .

    이 클래스들이 적용되면 동적 테마 계산이 가능합니다. 그 다음에는 생성된 CSS 변수를 무arbitrary properties 시할 수 있습니다. 콜론 다음에는 유효한 CSS 색상 형식(HEX, CSS 변수, RGB 등)을 입력하세요.

    전체 속성 목록은 스플리터 테마에서 확인할 수 있습니다. 문법은 다음과 같습니다:

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

    느낌표(!)는 유틸리티 클래스가 우선순위가 되도록 보장하기 위해 필요합니다. Tailwind는 레이어에 스타일을 적용하는데, 이 스타일을 중요하게 표시하지 않으면 컴포넌트의 기본 테마에 의해 덮어쓰여집니다.

    Custom sizing

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

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

    또는 모든 인스턴스를 타겟팅하는 유버설--igx-splitter-size 변수를 사용할 수도 있습니다:

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

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

    API References

    Theming Dependencies

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