美文网首页
如何实现一个简单的Switch组件

如何实现一个简单的Switch组件

作者: 相遇一头猪 | 来源:发表于2022-06-01 21:29 被阅读0次

背景

UI同学给了设计稿,设计稿中的 Switch 跟组件库(例如arco-design、antd-design) 的Switch样式有区别。

大多数的Switch组件是类似这样的:

image.png
小圆点完全位于Switch内部,而我们的设计稿小圆点是超出Switch的:
image.png
image.png

尝试

刚开始是想用switch-view包裹小圆点和黄色背景色:

const Switch = () => {
  const [checked, setChecked] = useState(false);
  const handleCheck = () => {
    setChecked(!checked);
  }
  return (
    <div className="bg">
      <label className="switch-container" onClick={handleCheck}>
        <div className={`switch-view ${checked ? 'switch-view-check' : ''}`}>
          <div className="switch-view-before"></div>
          <div className="switch-circle"></div>
          </div>
      </label>
    </div>
  )
}
image.png

实现之后的效果是这样的:


image.png
image.png

存在的问题就是小圆点的高度(34px) 大于父元素的高度(32px) ,但是超出父元素的区域又不得不隐藏(黄色区域),导致小圆点被截断并且不是一个圆形。

优化

实际上,switch-view-before完全可以去掉,然后直接把黄色作为switch-circle父元素的背景色

 <div className="bg">
        <label className="switch-container" onClick={handleCheck}>
          <div className={`switch-view ${checked ? 'switch-view-check' : ''}`}>
            <div className="switch-circle"></div>
            </div>
        </label>
    </div>
image.png

效果如下:


image.png
image.png

但是,这还是不符合我们的小圆点必须大于外层的需求。

最终方案

最终方案更简单了,只有小圆点和父级元素。如下图,在没有选中的时候,父元素的背景色是灰色,选中后,让小圆点向X轴移动,然后父元素背景色改为黄色。

image.png
    <div className="bg">
        <label className={`switch-container ${checked ? 'switch-view-container-check' : ''}`} onClick={handleCheck}>
            <div className={`switch-circle ${checked ? 'switch-circle-check' : ''}`}></div>
        </label>
    </div>
.bg {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 400px;
  height: 400px;
  background-color: black;
}
.switch-container {
  display: inline-block;
  position: relative;
  height: 32px;
  width: 64px;
  cursor: pointer;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.2);;
}

.switch-view-container-check {
  background-color: #dfb745;
}

.switch-circle {
  position: absolute;
  left: -1px;
  top: -1px;
  z-index:100;
  width: 34px;
  height: 34px;
  border-radius: 100%;
  background-color: #fff;
  transition: all linear .2s;
}

.switch-circle-check {
  transform: translateX(100%)
}

相关文章

网友评论

      本文标题:如何实现一个简单的Switch组件

      本文链接:https://www.haomeiwen.com/subject/erjsprtx.html