O controle deslizante é um dos elementos de IU mais comuns na web e em aplicativos móveis. Usado para selecionar um valor ou intervalo de valores, ele fornece uma melhor experiência do usuário, visualizando os dados conectados ao controle deslizante.
Os controles deslizantes são úteis ao fornecer uma variedade de opções, como selecionar uma faixa de preço específica, rastrear uma remessa de pacote ou preencher um formulário.
Neste post, criaremos diferentes controles deslizantes usando o react-slider, um componente sem cabeça do React fácil de construir e personalizar.
react-slider component
react-slider é um componente pequeno, acessível e independente de CSS que nos ajuda a construir componentes de slider personalizados para aplicativos React. Ele usa o padrão render props sob o capô para fornecer uma IU sem interface para o nosso aplicativo.
Vamos começar com o componente react-slider instalando o seguinte pacote:
npm install react-slider
Depois de instalar o pacote e renderizar o componente em nosso aplicativo. O componente do controle deslizante padrão se parece com o controle deslizante abaixo:
Controle deslizante React padrão .
Posteriormente, podemos usar o código padrão para este controle deslizante para personalizá-lo:
}/>
Com o pacote de controle deslizante instalado, podemos revisar as três partes principais que o constituem: trilha , marca e polegar.
A trilha
A trilha é a linha horizontal que conecta as partes do controle deslizante. Para personalizar a trilha, podemos adicionar um nome de classe, como trackClassName, ou renderizar um componente personalizado, como renderTrack. Usando um nome de classe, podemos personalizar o estilo do componente da trilha.
Mas, se quisermos ter controle sobre a trilha, devemos renderizar um componente personalizado e alterá-lo com base em nossos requisitos. Por exemplo, a renderização de um componente personalizado controla a atualização do usuário de que um valor muda de X para Y.
Podemos escrever nossas próprias funcionalidades em cima disso, como atualizar o estado de um componente pai.
Aqui está um exemplo de como usar um nome de classe e renderizar um componente personalizado:
A miniatura
A miniatura é o elemento que desliza na trilha, que também podemos personalizar com um nome de classe ou renderizar um componente personalizado usando o método render props.
A marca
A marca é uma etapa dentro do controle deslizante que renderiza junto com a trilha para atualizar o progresso ou status. É útil quando queremos construir um controle deslizante baseado em progresso.
Isso é semelhante a uma barra de progresso, mas tem etapas intermediárias. Cada etapa exige que concluamos uma ação, antes de prosseguir para a próxima etapa.
Aqui, temos um controle deslizante vertical com cada etapa designada por uma marca.
Nós pode personalizar as marcas de duas maneiras: fornecendo um nome de classe ou renderizando nosso componente de marca personalizado usando acessórios de renderização.
Até agora, cobrimos todas as partes principais do controle deslizante de reação. Agora, vamos implementá-los dentro de um aplicativo React com alguns casos de uso comuns.
Criando um controle deslizante simples no React
Para começar a construir um controle deslizante no React com o componente react-slider, crie um arquivo denominado slider.js na pasta raiz e adicione o seguinte código:
import ReactSlider from”react-slider”; const Slider=()=> {return (
Aqui, fornecemos três nomes de classes CSS que personalizam o thumb, track e slider:
.horizontal-slider {width: 100%; largura máxima: 500px; altura: 100vh; margem: automático; }.example-thumb {cursor: ponteiro; posição: absoluta; índice z: 100; plano de fundo: #ffffff; borda: 5px sólido # 3774ff; raio da borda: 100%; display: bloco; sombra da caixa: 0 0 2px 0 rgb (0 0 0/44%); }.example-thumb.active {cor de fundo: cinza; }.example-track {position: relative; plano de fundo: #ddd; }.example-track.example-track-0 {background: # 83a9ff; }.horizontal-slider.example-track {top: 20px; altura: 4px; }.horizontal-slider.example-thumb {top: 12px; largura: 10px; esboço: nenhum; altura: 10px; altura da linha: 38px; }
Com o estilo do controle deslizante, há duas coisas importantes a serem observadas aqui: os nomes das classes example-thumb e example-track fornecem apenas um estilo para os componentes de track e thumb.
Para definir o estilo de uma trilha De Mark 1 a Mark 2, podemos adicionar um estilo usando o nome de classe example-track.example-track-0. Discutiremos isso em detalhes ao criar um controle deslizante vertical.
Com a personalização concluída, concluímos o controle deslizante simples; encontre o código completo e renderização aqui .
Criando um controle deslizante vertical no React
Também podemos construir um controle deslizante vertical usando o componente react-slider. Os controles deslizantes verticais geralmente mostram o progresso. Por exemplo, muitos sites de comércio eletrônico usam controles deslizantes verticais para mostrar a progressão dos pacotes entregues pelo correio.
Um exemplo de O controle deslizante vertical React que construiremos pode ser encontrado aqui .
: controles deslizantes verticais, como controles deslizantes horizontais e deslizantes, têm três componentes deslizantes e de passo,
formulário.
A etapa
Crie um arquivo step.js e adicione o código a seguir para renderizar cada uma das cinco etapas. Como podemos ver na imagem acima, temos cinco etapas no design. Portanto, devemos adicionar uma matriz de etapas com valores nela. Com base no elemento ativo, podemos renderizar o respectivo valor:
import React from”react”; const steps=[“Etapa 1″,”Etapa 2″,”Etapa 3″,”Etapa 4″,”Etapa 5”]; const Step=({currentIndex})=> {return (
{step}
);})}
); }; exportar etapa padrão;
Aqui, temos os props currentIndex que passamos do componente pai. Ele mantém o valor do elemento atualmente ativo no controle deslizante. Por exemplo, se a segunda marca estiver ativa, currentIndex é 1.
Com base nisso, podemos renderizar e estilizar o valor da matriz de etapas.
O controle deslizante vertical
Para adicionar um controle deslizante vertical, adicione Slider/index.js na pasta raiz e adicione o seguinte código:
import React from”react”; importar ReactSlider de”react-slider”; import”../styles.css”; import”./slider.css”; const Slider=({onChange, currentIndex})=> {return (
Podemos então importar o ReactSlider e passar algumas propriedades para ele. Vamos explorá-los em detalhes.
className
O prop className determina se o controle deslizante é horizontal ou vertical e podemos estilizá-lo assim:
.vertical-slider {height: 380px; largura: 25%; }
markClassName
A personalização do marcador em cada etapa pode ser feita por meio da propriedade markClassName. Podemos usar className para estilizá-lo ou podemos estilizar nosso componente personalizado e passá-lo como adereços de renderização dentro do react-slider:
.example-mark {width: 8px; altura: 8px; borda: 2px solid rgb (0, 0, 0); cor de fundo: rgb (255, 255, 255); cursor: ponteiro; raio da borda: 50%; alinhamento vertical: meio; margem: 0px calc (19px); inferior: calc (50%-6px); }.example-mark.example-mark-active {border: 2px solid # 00d4ff; cor de fundo: rgb (255, 255, 255); }.example-mark.example-mark-completed {border: 2px solid rgb (255, 255, 255); cor de fundo: # 00d4ff; }
Aqui, temos três classes:
.example-mark styles o mark component example-mark-active identifica e estiliza a marca ativa atual example-mark-completed renderiza elementos que foram visitados ou completados
trackClassName
Podemos personalizar e estilizar a trilha usando a prop trackClassName no controle deslizante:
.example-track {position: relative; plano de fundo: #ddd; }.example-track.example-track-0 {background: # 00d4ff; }
Observe que example-track-0 determina o estilo de cada faixa especificada. Por exemplo, se tivermos cinco marcas, podemos personalizar cada faixa entre as marcas usando track-0, track-1, track-2, track-3 e track-4.
O controle deslizante então renderiza assim:
Outras propriedades do controle deslizante vertical incluem:
onChange chama uma função sempre que alteramos ou clicamos em um marcador no controle deslizante defaultValue especifica a posição de uma marca ativa para o primeiro valor de renderização especifica o valor do índice atual Mínimo e máximo determinam as marcas de intervalo do controle deslizante habilita o marcador de passo do controle deslizante. renderMark é um suporte de renderização que personaliza as marcas
Construindo um formulário com um controle deslizante de progresso no React
Em alguns cenários, como a criação instruções de trabalho digitais, podemos construir um formulário com um controle deslizante de progresso. Cada nível tem um conjunto de entradas que o usuário deve preencher enquanto o controle deslizante de progresso mostra o progresso do usuário no processo.
Para começar a criar um formulário, crie Form/index.js e adicione o seguinte código,
importar React de”react”; importar FormElement de”./FormElement”; import”./style.css”; const formEls=[“Etapa 1″,”Etapa 2″,”Etapa 3″,”Etapa 4″,”Etapa 5”]; const Form=({currentIndex, handleNext, handleComplete})=> {return (
{formEls [currentIndex]}
{currentIndex===formEls.length-1 ? (
); }; exportar formulário padrão;
O componente de formulário usa os props currentIndex, handleNext e handleComplete para lidar com as etapas.
Criando um formulário multinível no React
Outra maneira de usar um formulário deslizante é desenvolvimento de um aplicativo usando um formulário multinível .
Uma vez que a forma multinível usa um controle deslizante horizontal, devemos usar um estilo para os componentes horizontais. Como o controle deslizante vertical, temos marcas, mínimo, máximo e props de valor. Por ser baseado em formulário, não precisamos de uma trilha.
Vamos implementar um formulário multinível usando o controle deslizante de reação e nossos componentes estilizados personalizados. Existem dois componentes principais em formulários multiníveis: etapas de navegação e elementos de formulário.
Devemos gerenciar o índice atual no estado do componente e renderizar o elemento do formulário com base nesse índice.
O o código a seguir contém o formulário que vemos acima:
{tabs [index]}
);})}
Os dois botões do formulário, Próximo e Voltar , armazenam o valores de formulário no estado do componente:
const [state, setState]=useS tate ({valor: 0}); const onNext=()=> {setState ({… estado, valor: estado.valor + 1}); }; const onPrevious=()=> {setState ({… estado, valor: estado.valor-1}); };
Finalmente, temos um controle deslizante que renderiza os componentes personalizados de marca e polegar. react-slider nos fornece os adereços de renderização renderMark e renderThumb para renderizar a marca personalizada e os componentes thumb em ReactSlider:
Comparando os componentes do controle deslizante React
Embora esta postagem se concentre no controle deslizante para construir um controle deslizante no React, há outras opções para usar também. A seguir está uma breve visão geral de cada um e dos benefícios e desvantagens que eles têm.
Material-UI
Material-UI é uma estrutura de IU popular com um núcleo que tem um tamanho do pacote reduzido em torno de 300 KB e tempo de download de 13 ms ; seu pacote de controle deslizante, material-ui-slider, tem um tamanho de pacote reduzido de 26 KB e tempo de download de 1 ms .
A documentação amigável para iniciantes da IU do material e a opção de visualizar o código-fonte completo em seu editor integrado o tornaram popular entre a comunidade de desenvolvimento.
No entanto, se estiver usando material-ui-slider, ele pode aumentar o tamanho do pacote de um aplicativo e a personalização não está disponível em toda a extensão que é no react-slider.
Ant Design
Ant Design, uma linguagem de design de IU e uma biblioteca de IU React , também é bastante popular, mas tem o mesmo problema com um
Além disso, não é possível usar componentes personalizados por meio de objetos de renderização
vantagens do react-slider
react-slider é fácil de personalizar e podemos renderizar componentes personalizados usando o padrão de prop de renderização. Ele também tem o tamanho de pacote mais leve de 12 KB na versão reduzida .
Conclusão
O controle deslizante é um elemento React UI comum para mostrar uma gama de valores, ajudando os usuários a selecionar uma variedade de opções rapidamente.
Embora existam muitas bibliotecas e estruturas para construir um controle deslizante, o componente react-slider fornece personalização, um pacote pequeno para desempenho eficiente e uma experiência de desenvolvedor eficiente.
Mas, também é importante observar que se seu produto ou empresa já usa uma estrutura ou biblioteca, como Ant Design, Bootstrap ou Material UI, é mais fácil usar os componentes deslizantes dessas respectivas bibliotecas.
Isso pode reduzir a sobrecarga de gerenciamento de várias bibliotecas para um único aplicativo.
