React Zoom 슬라이더 개요
React ZoomSlider 컨트롤은 범위 지원 컨트롤에 확대/축소 기능을 제공합니다. ZoomSlider에는 수평 스크롤 막대, 전체 범위의 축소판 및 크기 조정 가능한 확대/축소 범위 창이 있습니다. ZoomSlider는 독립형 컨트롤로 작동할 수 없으며 DataChart 또는 CategoryChart와 같은 범위 기반 컨트롤의 향상된 기능으로 작동합니다.
React Zoom Slider Example
다음 샘플은 IgrZoomSlider
사용하여 IgrDataChart
의 콘텐츠를 탐색하는 방법을 보여줍니다.
Usage
기능 이름 | 설명 |
---|---|
스크롤바 탐색 | 사용자는 ZoomSlider 스크롤 막대의 내장 기능을 사용하여 데이터 범위를 스크롤하고 규모를 변경할 수 있습니다. |
이동 및 확대/축소 | 사용자는 엄지 패드의 가장자리를 드래그하여 현재 디스플레이의 범위를 더 크게(축소) 또는 더 작은 범위(확대)로 만들어 디스플레이 배율을 조정할 수 있습니다. |
다양한 사용자 상호 작용 옵션 | 모든 마우스 사용자 상호 작용은 터치를 통해 중복 지원되며 대부분 키보드를 통해 지원됩니다. 자세한 내용은 사용자 상호 작용 및 유용성을 참조하세요. |
터치 지원 | 터치 지원 장치에서 사용자는 전체 ZoomSlider 기능을 즐길 수 있습니다. 모든 마우스 상호 작용은 터치 환경에서 지원됩니다. |
확장성 | ZoomSlider 컨트롤은 기본적으로 DataChart 컨트롤을 지원합니다. |
구성 가능한 줌 범위 창 | 초기 확대/축소 범위 창 너비와 위치, 최소 크기를 구성할 수 있습니다. |
Dependencies
React 차트 컴포넌트를 설치할 때 핵심 패키지도 설치해야 합니다.
npm install --save igniteui-react-core
npm install --save igniteui-react-charts
Component Modules
IgrZoomSlider
에는 다음 모듈이 필요합니다.
import { IgrZoomSliderModule } from 'igniteui-react-charts';
import { IgrZoomSlider } from 'igniteui-react-charts';
IgrDataChartInteractivityModule.register();
Code Snippet
다음 코드는 ZoomSlider를 설정하는 방법을 보여줍니다.
<IgrZoomSlider
width="100%"
height="100%"
/>
Additional Resources
차트 기능 항목에서 차트에 대한 자세한 내용을 확인할 수 있습니다.
API References
다음은 위 섹션에서 언급된 API 멤버 목록입니다.