BlueprintJS es un kit de herramientas de interfaz de usuario basado en React para la web. Esta biblioteca está muy optimizada y es popular para crear interfaces que son complejas y densas en datos para aplicaciones de escritorio.
Control deslizante entre los límites inferior y superior. Podemos usar el siguiente enfoque en ReactJS para usar el componente deslizante Blueprint de ReactJS.
Accesorios deslizantes:
- className: se utiliza para denotar una lista delimitada por espacios de nombres de clase para pasar a un elemento secundario.
- disabled: se utiliza para indicar si el control deslizante no es interactivo.
- initialValue: se utiliza para indicar el valor inicial del control deslizante.
- intención: se utiliza para indicar el color de la intención visual que se aplicará al elemento.
- labelPrecision: se utiliza para indicar el número de lugares decimales que se utilizarán al representar el valor de la etiqueta.
- labelRenderer: es una función de devolución de llamada para representar una sola etiqueta.
- labelStepSize: Se utiliza para el incremento entre etiquetas sucesivas.
- labelValues: se utiliza para indicar la array de valores específicos para la ubicación de la etiqueta.
- max: se utiliza para indicar el valor máximo del control deslizante.
- min: se utiliza para indicar el valor mínimo del control deslizante.
- onChange: es una función de devolución de llamada que se activa cuando cambia el valor.
- onRelease: es una función de devolución de llamada que se activa cuando se suelta el identificador.
- showTrackFill: se utiliza para indicar si se debe representar una barra sólida en la pista entre los valores actuales e iniciales, o entre los controladores de RangeSlider.
- stepSize: Se utiliza para el incremento entre valores sucesivos.
- valor: se utiliza para indicar el valor del control deslizante.
- vertical: Se utiliza para indicar si mostrar el slider en orientación vertical.
Accesorios RangeSlider:
- className: se utiliza para denotar una lista delimitada por espacios de nombres de clase para pasar a un elemento secundario.
- disabled: se utiliza para indicar si el control deslizante no es interactivo.
- intención: se utiliza para indicar el color de la intención visual que se aplicará al elemento.
- labelPrecision: se utiliza para indicar el número de lugares decimales que se utilizarán al representar el valor de la etiqueta.
- labelRenderer: es una función de devolución de llamada para representar una sola etiqueta.
- labelStepSize: Se utiliza para el incremento entre etiquetas sucesivas.
- labelValues: se utiliza para indicar la array de valores específicos para la ubicación de la etiqueta.
- max: se utiliza para indicar el valor máximo del control deslizante.
- min: se utiliza para indicar el valor mínimo del control deslizante.
- onChange: es una función de devolución de llamada que se activa cuando cambia el valor.
- onRelease: es una función de devolución de llamada que se activa cuando se suelta el identificador.
- showTrackFill: se utiliza para indicar si se debe representar una barra sólida en la pista entre los valores actuales e iniciales, o entre los controladores de RangeSlider.
- stepSize: Se utiliza para el incremento entre valores sucesivos.
- valor: se utiliza para indicar el valor del control deslizante.
- vertical: Se utiliza para indicar si mostrar el slider en orientación vertical.
Accesorios multideslizador:
- className: se utiliza para denotar una lista delimitada por espacios de nombres de clase para pasar a un elemento secundario.
- defaultTrackIntent: se utiliza para indicar la intención predeterminada de un segmento de pista.
- disabled: se utiliza para indicar si el control deslizante no es interactivo.
- intención: se utiliza para indicar el color de la intención visual que se aplicará al elemento.
- labelPrecision: se utiliza para indicar el número de lugares decimales que se utilizarán al representar el valor de la etiqueta.
- labelRenderer: es una función de devolución de llamada para representar una sola etiqueta.
- labelStepSize: Se utiliza para el incremento entre etiquetas sucesivas.
- labelValues: se utiliza para indicar la array de valores específicos para la ubicación de la etiqueta.
- max: se utiliza para indicar el valor máximo del control deslizante.
- min: se utiliza para indicar el valor mínimo del control deslizante.
- onChange: es una función de devolución de llamada que se activa cuando cambia el valor.
- onRelease: es una función de devolución de llamada que se activa cuando se suelta el identificador.
- showTrackFill: se utiliza para indicar si se debe representar una barra sólida en la pista entre los valores actuales e iniciales, o entre los controladores de RangeSlider.
- stepSize: Se utiliza para el incremento entre valores sucesivos.
- vertical: Se utiliza para indicar si mostrar el slider en orientación vertical.
Accesorios de mango:
- className: se utiliza para denotar una lista delimitada por espacios de nombres de clase para pasar a un elemento secundario.
- intentAfter: se utiliza para indicar la intención del segmento de pista inmediatamente después de este identificador.
- intentBefore: se utiliza para indicar la intención del segmento de pista inmediatamente antes de este identificador.
- tipo de interacción: se utiliza para indicar cómo este identificador interactúa con otros identificadores.
- onChange: es una función de devolución de llamada que se activa cuando cambia el valor.
- onRelease: es una función de devolución de llamada que se activa cuando se suelta el identificador.
- trackStyleAfter: se utiliza para indicar el estilo que se utilizará para el segmento de pista inmediatamente después de este controlador.
- trackStyleBefore: se usa para indicar el estilo que se usará para el segmento de pista inmediatamente antes de este identificador.
- tipo: Se utiliza para denotar el tipo de apariencia del mango.
- valor: se utiliza para indicar el valor numérico de este identificador.
Creación de la aplicación React e instalación del módulo:
-
Paso 1: Cree una aplicación React usando el siguiente comando:
npx create-react-app foldername
-
Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta , muévase a ella con el siguiente comando:
cd foldername
-
Paso 3: Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:
npm install @blueprintjs/core
Estructura del proyecto: Tendrá el siguiente aspecto.
Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.
App.js
import React from 'react' import '@blueprintjs/core/lib/css/blueprint.css'; import { Slider } from "@blueprintjs/core"; function App() { return ( <div style={{ display: 'block', width: 400, padding: 30 }}> <h4>ReactJS Blueprint Slider Component</h4> <Slider min={0} max={100} stepSize={10} labelStepSize={10} /> </div > ); } export default App;
Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:
npm start
Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:
Referencia: https://blueprintjs.com/docs/#core/components/sliders
Publicación traducida automáticamente
Artículo escrito por gouravhammad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA