背景
UI同学给了设计稿,设计稿中的 Switch
跟组件库(例如arco-design、antd-design) 的Switch
样式有区别。
大多数的Switch
组件是类似这样的:
小圆点完全位于
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%)
}
网友评论