Angular 줌 슬라이더 개요

Angular ZoomSlider 컨트롤은 범위 지원 컨트롤에 확대/축소 기능을 제공합니다. ZoomSlider에는 수평 스크롤 막대, 전체 범위의 축소판 및 크기 조정 가능한 확대/축소 범위 창이 있습니다. ZoomSlider는 독립형 컨트롤로 작동할 수 없으며 DataChart 또는 CategoryChart와 같은 범위 기반 컨트롤의 향상된 기능으로 작동합니다.

Angular Zoom Slider Example

다음 샘플은 IgxZoomSliderComponent 사용하여 IgxDataChartComponent의 콘텐츠를 탐색하는 방법을 보여줍니다.

Usage

기능 이름	설명
스크롤바 탐색	사용자는 ZoomSlider 스크롤 막대의 내장 기능을 사용하여 데이터 범위를 스크롤하고 규모를 변경할 수 있습니다.
이동 및 확대/축소	사용자는 엄지 패드의 가장자리를 드래그하여 현재 디스플레이의 범위를 더 크게(축소) 또는 더 작은 범위(확대)로 만들어 디스플레이 배율을 조정할 수 있습니다.
다양한 사용자 상호 작용 옵션	모든 마우스 사용자 상호 작용은 터치를 통해 중복 지원되며 대부분 키보드를 통해 지원됩니다. 자세한 내용은 사용자 상호 작용 및 유용성을 참조하세요.
터치 지원	터치 지원 장치에서 사용자는 전체 ZoomSlider 기능을 즐길 수 있습니다. 모든 마우스 상호 작용은 터치 환경에서 지원됩니다.
확장성	ZoomSlider 컨트롤은 기본적으로 DataChart 컨트롤을 지원합니다.
구성 가능한 줌 범위 창	초기 확대/축소 범위 창 너비와 위치, 최소 크기를 구성할 수 있습니다.

Dependencies

Angular 차트 구성 요소를 설치할 때 코어 패키지도 설치해야 합니다.

npm install --save igniteui-angular-core
npm install --save igniteui-angular-charts

Component Modules

​IgxZoomSliderComponent 에는 다음 모듈이 필요합니다.

import { IgxZoomSliderModule } from 'igniteui-angular-charts';
import { IgxZoomSliderComponent } from 'igniteui-angular-charts';

@NgModule({
    imports: [
        // ...
        IgxZoomSliderModule,
        // ...
    ]
})
export class AppModule {}

Code Snippet

다음 코드는 ZoomSlider를 설정하는 방법을 보여줍니다.

<igx-zoom-slider
  width="100%"
  height="150px">
</igx-zoom-slider>

Additional Resources

​차트 기능 항목에서 차트에 대한 자세한 내용을 확인할 수 있습니다.

API References

다음은 위 섹션에서 언급된 API 멤버 목록입니다.

• IgxZoomSliderComponent
• IgxDataChartComponent