48 lines
1.2 KiB
React
48 lines
1.2 KiB
React
|
import React from 'react';
|
|||
|
|
import './ToggleSwitch.css';
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 统一的启/停开关组件
|
|||
|
|
* @param {boolean} checked - 开关状态
|
|||
|
|
* @param {function} onChange - 状态变化回调
|
|||
|
|
* @param {string} label - 标签文字 (可选，如果不提供则文字显示在开关内)
|
|||
|
|
* @param {boolean} disabled - 是否禁用
|
|||
|
|
* @param {string} size - 大小: 'small' | 'medium' (默认) | 'large'
|
|||
|
|
*/
|
|||
|
|
const ToggleSwitch = ({
|
|||
|
|
checked = false,
|
|||
|
|
onChange,
|
|||
|
|
label,
|
|||
|
|
disabled = false,
|
|||
|
|
size = 'medium',
|
|||
|
|
onClick = null
|
|||
|
|
}) => {
|
|||
|
|
const handleClick = (e) => {
|
|||
|
|
if (disabled) return;
|
|||
|
|
e.stopPropagation();
|
|||
|
|
onChange?.(!checked);
|
|||
|
|
onClick?.();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div
|
|||
|
|
className={`toggle-switch-container ${size} ${disabled ? 'disabled' : ''}`}
|
|||
|
|
onClick={handleClick}
|
|||
|
|
style={{ cursor: disabled ? 'not-allowed' : 'pointer' }}
|
|||
|
|
>
|
|||
|
|
<div className={`toggle-switch ${checked ? 'on' : 'off'}`}>
|
|||
|
|
<span className="toggle-text">
|
|||
|
|
{checked ? '启用' : '停用'}
|
|||
|
|
</span>
|
|||
|
|
<div className="toggle-slider"></div>
|
|||
|
|
</div>
|
|||
|
|
{label && (
|
|||
|
|
<span className="toggle-label">{label}</span>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default ToggleSwitch;
|
|||
|
|
|