主页 / coding / 问题 / 76936328
Accepted
Sougata Mukherjee
Asked: 2023-08-20 01:35:45 +0800 CST

如何使用 CSS 创建仅背景更改的切换滑块开关

  • 772

在这里，我想创建一个切换开关滑块按钮。我已经创建了它，但是当我单击它时，“它的背景将是蓝色的，当我单击关闭时，”它的背景将是蓝色的，但这里的文本被隐藏和关闭并显示。我想要像这张照片一样：

每次我只将背景颜色切换为蓝色时，我想连续显示打开和关闭按钮，如下图所示：

因此，当我单击切换背景颜色时，会通过一些过渡从一种颜色切换到另一种颜色，下面给出如何使用代码实现此目的。

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;

css 如下

.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 个回答

  1. Best Answer

    我想我明白你想做什么，但我认为这应该用不同的方法来完成，像这样的东西怎么样，底部有一个 div 指示所选的选项。

    这只是一个示例，您必须应用外部逻辑和事件。

    祝你好运！

    https://codesandbox.io/s/weathered-brook-yzkv2n?file=/src/App.js 反应代码：

    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

相关问题