Descripción general del control deslizante React Zoom
El control React ZoomSlider proporciona funcionalidad de zoom a controles habilitados para rango. ZoomSlider presenta una barra de desplazamiento horizontal, una miniatura de todo el rango y una ventana de rango de zoom de tamaño variable. ZoomSlider no puede funcionar como un control independiente y actúa como una mejora para controles basados en rangos como DataChart o CategoryChart.
React Zoom Slider Example
El siguiente ejemplo demuestra cómo usar IgrZoomSlider para navegar por el contenido en IgrDataChart.
Usage
| Nombre de la característica | Descripción |
|---|---|
| Navegación con barra de desplazamiento | Los usuarios pueden cambiar la escala y desplazarse por rangos de datos utilizando las capacidades integradas de la barra de desplazamiento ZoomSlider. |
| Panorámica y zoom | Los usuarios pueden ajustar la escala de visualización arrastrando los bordes del control para el pulgar para hacer que la visualización actual cubra un rango mayor (alejar) o un rango más pequeño (acercar). |
| Múltiples opciones de interacción del usuario | Todas las interacciones del usuario del mouse se admiten de manera redundante a través del tacto y la mayoría de ellas, a través del teclado. Para obtener más información, consulte Interacciones del usuario y usabilidad. |
| Soporte táctil | En dispositivos táctiles, los usuarios pueden disfrutar de la funcionalidad completa de ZoomSlider. Todas las interacciones del mouse son compatibles en un entorno táctil. |
| Extensibilidad | El control ZoomSlider admite el control DataChart listo para usar. |
| Ventana de rango de zoom configurable | El ancho y la posición inicial de la ventana del rango de zoom, así como su tamaño mínimo, son configurables. |
Dependencies
Al instalar el componente del gráfico React, también se debe instalar el paquete principal.
npm install --save igniteui-react-core
npm install --save igniteui-react-charts
Component Modules
IgrZoomSlider requiere los siguientes módulos:
import { IgrZoomSliderModule } from 'igniteui-react-charts';
import { IgrZoomSlider } from 'igniteui-react-charts';
IgrDataChartInteractivityModule.register();
Code Snippet
El siguiente código demuestra cómo configurar ZoomSlider.
<IgrZoomSlider
width="100%"
height="100%"
/>
Additional Resources
Puede encontrar más información sobre los gráficos en el tema Características de los gráficos.
API References
La siguiente es una lista de miembros de API mencionados en las secciones anteriores: