React之Arco组件：Switch

设计思路

本质上switch就是一个button，通过改变其button样式，就达到开关的效果，最终成果如下

​简化代码

swtich.tsx

import React,{useState} from "react";

function Switch(){

    // 创建本地的checked 的state，用于控制开关关闭或开始
    const [checked, setChecked] = useState<boolean>(false)


    // Switch点击事件
    const onHandleClick: React.MouseEventHandler<HTMLButtonElement> = (event => {
        setChecked(!checked);
    })

    // 通过checked给予classname
    const className = checked ? 'arco-switch-checked' : ''

    return (
        <button
        className={'arco-switch ' + className}
        onClick={onHandleClick}
        role="switch"
        type="button"
        aria-checked={checked}
        >
            <div className="arco-switch-dot">
            </div>
        </button>
    )
}

export default Switch;

swtich.css

.arco-switch-dot {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 4px;
    left: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--color-bg-white);
    color: var(--color-neutral-3);
    font-size: 12px;
    transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
}
.arco-switch-checked .arco-switch-dot {
    color: rgb(var(--primary-6));
    left: 100%;
    transform: translateX(-100%);
    margin-left: -4px;
}

总结知识点

通过变量来控制class，可以有效的灵活改变样式

const className = checked ? 'checked' : ''

如何让小点运动起来

初始状态

left: 4px;

直接向右移动拉满，然后再回来一个身位即可

left: 100%; 
transform: translateX(-100%);

1. 相关链接

官方示例

官方源码