Visão geral React Zoom Slider
O controle React ZoomSlider fornece funcionalidade de zoom para controles habilitados para intervalo. O ZoomSlider apresenta uma barra de rolagem horizontal, uma miniatura de todo o intervalo e uma janela de intervalo de zoom redimensionável. O ZoomSlider não pode funcionar como um controle autônomo e atua como um aprimoramento para controles baseados em intervalo, como o DataChart ou CategoryChart.
React Zoom Slider Example
O exemplo a seguir demonstra como usar IgrZoomSlider para navegar pelo conteúdo em IgrDataChart.
Usage
| Nome do Recurso | Descrição |
|---|---|
| Navegação por barra de rolagem | Os usuários podem alterar a escala e rolar por intervalos de dados usando os recursos integrados da barra de rolagem do ZoomSlider. |
| Panorâmica e zoom | Os usuários podem ajustar a escala de exibição arrastando as bordas do teclado para fazer com que a exibição atual cubra uma faixa maior (diminuir o zoom) ou uma faixa menor (aumentar o zoom). |
| Várias opções de interação do usuário | Todas as interações do usuário do mouse são suportadas redundantemente por meio do toque e a maioria delas – por meio do teclado. Para detalhes, veja Interações do usuário e usabilidade. |
| Suporte de toque | Em dispositivos habilitados para toque, os usuários podem aproveitar a funcionalidade completa do ZoomSlider. Todas as interações do mouse são suportadas no ambiente de toque. |
| Extensibilidade | O controle ZoomSlider oferece suporte imediato ao controle DataChart. |
| Janela de intervalo de zoom configurável | A largura e a posição da janela de zoom inicial, bem como seu tamanho mínimo, são configuráveis. |
Dependencies
Ao instalar o componente de gráfico React, o pacote principal também deve ser instalado.
npm install --save igniteui-react-core
npm install --save igniteui-react-charts
Component Modules
O IgrZoomSlider requer os seguintes módulos:
import { IgrZoomSliderModule } from 'igniteui-react-charts';
import { IgrZoomSlider } from 'igniteui-react-charts';
IgrDataChartInteractivityModule.register();
Code Snippet
O código a seguir demonstra como configurar o ZoomSlider.
<IgrZoomSlider
width="100%"
height="100%"
/>
Additional Resources
Você pode encontrar mais informações sobre gráficos no tópico Recursos de gráficos.
API References
A seguir está uma lista de membros da API mencionados nas seções acima: