hamed/nobat724_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design switch component

Browse Source
This commit is contained in:
Ehsan
2024-10-11 19:26:04 +03:30
parent d052b3181d
commit 934d16195b
1 changed files with 13 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/component/SwitchTable.js
+13 -23
View File
@@ -3,7 +3,7 @@ import { styled } from "@mui/material/styles";
const MaterialUISwitch = styled(Switch)(({ theme }) => ({ const MaterialUISwitch = styled(Switch)(({ theme }) => ({
width: 63, width: 63,
height: 34, height: 38,
padding: 7, padding: 7,
"& .MuiSwitch-switchBase": { "& .MuiSwitch-switchBase": {
margin: 1, margin: 1,
@@ -11,23 +11,19 @@ const MaterialUISwitch = styled(Switch)(({ theme }) => ({
transform: "translateX(6px)", transform: "translateX(6px)",
"&.Mui-checked": { "&.Mui-checked": {
color: "#fff", color: "#fff",
transform: "translateX(22px)", transform: "translateX(24px)",
"& .MuiSwitch-thumb:before": { "& .MuiSwitch-thumb:before": {
backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent( background: "#5559CE",
"#fff" borderRadius: "50%",
)}" d="M4.2 2.5l-.7 1.8-1.8.7 1.8.7.7 1.8.6-1.8L6.7 5l-1.9-.7-.6-1.8zm15 8.3a6.7 6.7 0 11-6.6-6.6 5.8 5.8 0 006.6 6.6z"/></svg>')`,
}, },
"& + .MuiSwitch-track": { "& + .MuiSwitch-track": {
opacity: 1, opacity: 1,
backgroundColor: "#aab4be", backgroundColor: "#c7cef4",
...theme.applyStyles("dark", {
backgroundColor: "#8796A5",
}),
}, },
}, },
}, },
"& .MuiSwitch-thumb": { "& .MuiSwitch-thumb": {
backgroundColor: "#001e3c", background: "#d7d7d7",
width: 32, width: 32,
height: 32, height: 32,
"&::before": { "&::before": {
@@ -39,21 +35,16 @@ const MaterialUISwitch = styled(Switch)(({ theme }) => ({
top: 0, top: 0,
backgroundRepeat: "no-repeat", backgroundRepeat: "no-repeat",
backgroundPosition: "center", backgroundPosition: "center",
backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent( background: "#d7d7d7",
"#fff" borderRadius: "50%",
)}" d="M9.305 1.667V3.75h1.389V1.667h-1.39zm-4.707 1.95l-.982.982L5.09 6.072l.982-.982-1.473-1.473zm10.802 0L13.927 5.09l.982.982 1.473-1.473-.982-.982zM10 5.139a4.872 4.872 0 00-4.862 4.86A4.872 4.872 0 0010 14.862 4.872 4.872 0 0014.86 10 4.872 4.872 0 0010 5.139zm0 1.389A3.462 3.462 0 0113.471 10a3.462 3.462 0 01-3.473 3.472A3.462 3.462 0 016.527 10 3.462 3.462 0 0110 6.528zM1.665 9.305v1.39h2.083v-1.39H1.666zm14.583 0v1.39h2.084v-1.39h-2.084zM5.09 13.928L3.616 15.4l.982.982 1.473-1.473-.982-.982zm9.82 0l-.982.982 1.473 1.473.982-.982-1.473-1.473zM9.305 16.25v2.083h1.389V16.25h-1.39z"/></svg>')`,
}, },
...theme.applyStyles("dark", {
backgroundColor: "#003892",
}),
}, },
"& .MuiSwitch-track": { "& .MuiSwitch-track": {
opacity: 1, opacity: 1,
backgroundColor: "#aab4be", background: "transparent",
borderRadius: 20 / 2, border: "1px solid #d7d7d7",
...theme.applyStyles("dark", { borderRadius: "27px",
backgroundColor: "#8796A5", transform: "translateY(-2px)",
}),
}, },
})); }));
@@ -61,8 +52,7 @@ function SwitchTable({ value }) {
return ( return (
<FormGroup> <FormGroup>
<FormControlLabel <FormControlLabel
control={<MaterialUISwitch sx={{ m: 1 }} defaultChecked />} control={<MaterialUISwitch defaultChecked={value} sx={{ m: 1 }} />}
label="MUI switch"
/> />
</FormGroup> </FormGroup>
); );