Início / coding / Perguntas / 76936328
Accepted
Sougata Mukherjee
Asked: 2023-08-20 01:35:45 +0800 CST

Como criar um controle deslizante de alternância apenas com alterações de fundo usando CSS

  • 772

Aqui, quero criar um botão deslizante de alternância. Eu o criei, mas quando clico nele, "seu plano de fundo será azul e, quando eu clicar", seu plano de fundo será azul, mas aqui o texto está ficando oculto e desativado e é mostrado. Eu quero como nesta foto:

Toda vez que alterno apenas a cor de fundo para azul, quero mostrar os botões liga e desliga em sequência, como nesta imagem:

Então, quando clico para alternar a cor de fundo, de uma cor para outra com alguma transição, como fazer isso usando o código é fornecido abaixo.

import React, { useState } from 'react';
import './styles.css'; 

const App = () => {
  const [isOn, setIsOn] = useState(false);

  const toggleSwitch = () => {
    setIsOn(!isOn);
  };

  return (<>
    <div className="toggle-container">
      <button
        className={`toggle-button ${isOn ? 'on' : 'off'}`}
        onClick={toggleSwitch}
        style={{color:isOn?'blue':'white',textAlign:isOn?'left':'right'}}
      >
        {isOn ? 'On' : 'Off'}
      </button>
    </div>
    
    </>
  );
};

export default App;

e o css está abaixo

.toggle-button {
  border:2px solid blue;
  outline: none;
  cursor: pointer;
  width: 100px;
  padding: 10px 20px;
  border-radius: 25px;
  font-weight: bold;
  font-size: 16px;
  transition: background-color 0.3s;
  position: relative;
  overflow: hidden;
}

.toggle-button:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: blue;
  transition: left 0.3s, background-color 0.3s;
}

.toggle-button.on:before {
  left: 50%;
  background-color: white;
}

.toggle-button.off {
  background-color: blue;
}

.toggle-button.on {
  background-color: white;
}

.toggle-button.on.off:before {
  background-color: blue;
}

.toggle-button.off.on:before {
  background-color: white;
}
html

1 respostas

  1. Best Answer

    Acho que entendi o que você está tentando fazer, mas acho que isso deveria ser feito com uma abordagem diferente, que tal algo assim, é um div na parte inferior que indica a opção selecionada.

    Este é apenas um exemplo, você terá que aplicar lógica e eventos externos.

    Boa sorte!

    https://codesandbox.io/s/weathered-brook-yzkv2n?file=/src/App.js Código de reação:

    CSS:

    .btn__container {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 2px solid gray;
  border-radius: 3px;
  position: relative;
}

.btn__option {
  border-radius: 3px;
  padding: 8px;
  position: relative;
  z-index: 2;
  transition: all 0.3s linear;
  cursor: pointer;
}

.btn__option:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

.btn__container.btn__container--left .btn__option--left {
  color: white;
}

.btn__container.btn__container--right .btn__option--right {
  color: white;
}

.btn__option--selection {
  padding: 8px;
  border-radius: 3px;
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: purple;
  color: purple;
  z-index: 1;
}

    JSX:

    import "./styles.css";
import { useState, useRef } from "react";

export default function App() {
  const [selected, setSelected] = useState("Text");

  const leftDiv = useRef(null);

  const rightDiv = useRef(null);

  const left = "Text";

  const right = "File";

  const getContainerClass = () => {
    if (selected === left) {
      return "btn__container btn__container--left";
    }
    return "btn__container btn__container--right";
  };

  const getSelectionStyle = () => {
    if (leftDiv && leftDiv.current && rightDiv && rightDiv.current) {
      if (selected === left) {
        return {
          left: "0",
          width: `${leftDiv.current.clientWidth}px`,
          padding: "0"
        };
      } else {
        return {
          left: `${leftDiv.current.clientWidth}px`,
          width: `${rightDiv.current.clientWidth}px`,
          padding: "0"
        };
      }
    }
    return { left: "0" };
  };

  return (
    <div className={getContainerClass()}>
      <div
        className="btn__option btn__option--selection"
        style={getSelectionStyle()}
      >
        {left}
      </div>
      <div
        ref={leftDiv}
        className="btn__option btn__option--left"
        onClick={() => setSelected(left)}
      >
        {left}
      </div>
      <div
        ref={rightDiv}
        className="btn__option btn__option--right"
        onClick={() => setSelected(right)}
      >
        {right}
      </div>
    </div>
  );
}
    • 1

relate perguntas