0
450
ViewsNo puedo entender cómo diseñar rc-slider (React Component Slider) a través del estilo en línea
He leído los documentos muchas veces y todavía no entiendo completamente cómo diseñar el control deslizante React a través de CSS en línea ( https://github.com/react-component/slider ).
Veo que necesita pasar un handle de accesorios al control deslizante con el css y algún tipo de componente con compensaciones y accesorios de valor. Cuando trato de hacer esto, mi CSS se vuelve horrible, las perillas no se mueven y el control deslizante está por todas partes. El estilo regular no funciona en el control deslizante.
Así es como se ve mi componente que paso al componente deslizante:
importar React desde "react";
export default class SliderStyle extends React.Component { render(){ let style = { position: "absolute", left: "0", height: "15px", borderRadius: "8px", backgroundColor: "#000" }; let tracker = { position: "absolute", marginLeft: "-7px", marginTop: "-5px", width: "14px", height: "14px", cursor: "pointer", borderRadius: "50%", border: "solid 2px #000", backgroundColor: "#fff" } return( <div style={style}><div style={tracker}></div></div> ) } }Luego en el componente principal:
<Slider range allowCross={false} handle={<SliderStyle/>} value={this.state.range} onChange={this.onSliderChange.bind(this)}/>Supongo que el div que devuelvo del componente que paso al componente Slider es el control deslizante real, y el div dentro del primero es lo que será la perilla. Los colores cambian, pero la perilla deslizante no se mueve cuando cambian los valores.
¿Hay algo que no estoy entendiendo aquí?
1 answers
Answer question0
Mirando el ejemplo dado por el control deslizante sobre la creación de un identificador personalizado - http://react-component.github.io/slider/?path=/story/rc-slider--slider - primero me gustaría explicar el objeto identificador . Esto solo reemplazará el mango en su control deslizante ... a lo que creo que se refiere como la "perilla". Esto no cambia el estilo de todo el control deslizante (debe usar la propiedad className de Slider para cambiar los estilos de control deslizante que no son manijas).
Además, debe obtener información sobre las propiedades de compensación y valor que se pasan a su componente de control. El accesorio de compensación es necesario para determinar el porcentaje restante que debe tener su mango. Sin usar esto, su manija no se moverá, lo que parece ser lo que está experimentando actualmente. El apoyo de valor debe mostrarse para mostrar a los usuarios en qué valor se encuentra actualmente el control deslizante (es decir, 3 de 10). Por ejemplo:
const handle = { position: "absolute", transform: 'translate(-50%, -50%)', width: "14px", height: "14px", cursor: "pointer", borderRadius: "50%", border: "solid 2px #000", backgroundColor: "#fff" }; const valueBubble = { position: "absolute", top: "-10px", fontSize: "14px" }; export default class Handle extends React.Component { render(){ const handleStyle = Object.assign({ left: `${this.props.offset}%` }, handle); return( <div style={handleStyle}> <div style={valueBubble}>{this.props.value}</div> </div> ) } }No he ejecutado este código, pero esto debería producir algo así como un controlador circular con una burbuja encima que sostiene el valor actual del control deslizante.