【发布时间】：2020-02-08 11:34:43
【问题描述】：
我有一个在多个地方使用的 ToggleButton 组件。对于它的一种用途，我希望将 SVG 呈现为滑动的切换按钮的一部分（如果您查看位于 cmets 链接中的示例，我指的是圆形部分）。
这是我的组件代码：
const ToggleButton = ({
label,
value,
name,
onChange,
}) => (
<div className={styles.toggleButton}>
<input
id={name}
type="checkbox"
className={styles.checkbox}
value={value}
checked={value ? 'checked' : null}
onChange={onChange}
/>
<label htmlFor={name} className={styles.switch} />
</div>
);
export default ToggleButton;
这是 CSS 文件：
.toggleButton {
align-items: center;
}
.switch {
position: relative;
display: inline-block;
width: 35px;
height: 12px;
background-color: gray;
border-radius: 20px;
transition: all 0.3s;
}
.switch::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: gray;
top: -4px;
transition: all 0.3s;
cursor: pointer;
box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.25);
}
.checkbox {
display: none;
}
.checkbox:checked + .switch::after {
left: 15px;
background-color: blue;
}
.checkbox:checked + .switch {
background-color: blue;
}
【问题讨论】：
-
只需为一个 div 的背景创建一个 css 规则，缩放它并将 div 添加到你的按钮。与任何其他图像完全一样。 Fontawesome 将 scg 转换为 base64 并将其用作字符。去那里看看 :)
标签： html css reactjs svg toggleswitch