import React from "react"
import styled from "styled-components"
// 开关盒子
const SwitchBox = styled.div`
width: 44px;
height: 22px;
border-radius: 12px;
border: 2px solid #e9eef2;
padding: 2px;
cursor: pointer;
`
// 多选框
const checkbox = styled.input.attrs({ type: "checkbox" })``
const Label = styled.label`
display: inline-block;
width: 36px;
height: 14px;
border-radius: 12px;
position: relative;
overflow: hidden;
background-color: #f3f6f8;
> input {
visibility: hidden;
}
> input::after {
position: absolute;
width: 14px;
height: 14px;
left: 1px;
top: 0px;
visibility: visible;
content: "";
background-color: white;
border-radius: 50%;
transition: all 0.2s;
}
input:checked::after {
transform: translateX(20px);
}
input::before {
cursor: pointer;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
visibility: visible;
content: "";
transition: all 0.2s;
}
input:checked::before {
}
input:checked::after {
background-color: #32d74b;
}
`
interface Iporps {
onChange: (checked: boolean) => void
}
const Switch: React.FC<Iporps> = (props: Iporps) => {
return (
<SwitchBox>
<Label className="label">
<input type="checkbox" onChange={(e) => props.onChange(e.target.checked)} />
</Label>
</SwitchBox>
)
}
export default Switch
父组件
function index() {
// 路由实例
const navigate = useRouter()
// 给子组件传值
const switchHandle = (checked: boolean) => {
alert(checked)
}
return (
<Container>
<Sider>
<PageUp>
<Arrow onClick={() => navigate.push("/account")} />
</PageUp>
<Menu>
<Arrow onClick={() => navigate.push("/account")} />
<span>Security</span>
</Menu>
<Menu>
<Arrow onClick={() => navigate.push("/account")} />
<span>Security</span>
</Menu>
<Menu>
<Arrow onClick={() => navigate.push("/account")} />
<span>Security</span>
</Menu>
<Menu>
<Arrow onClick={() => navigate.push("/account")} />
<span>Security</span>
</Menu>
</Sider>
{/* 右侧主体 */}
<Main>
<SetUp>
<span>Let's complete setting up your account......</span>
<span>set up email & password</span>
</SetUp>
<Notice>Notifications</Notice>
<Prompt>Select which notifications you would like to receive </Prompt>
<SwitchBox>
<Switch onChange={(e) => switchHandle(e)} />
</SwitchBox>
</Main>
</Container>
)
}
export default index
效果如下