+- Logic Machine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: Visualization (https://forum.logicmachine.net/forumdisplay.php?fid=9)
+--- Thread: Custom Switch MDC (/showthread.php?tid=4753)
Custom Switch MDC - eco-view - 06.05.2023
Hello.
Is it possible to use a custom switch such as this?
https://henan-guanjie.gitee.io/ui-design/develop/web/components/input-controls/switches/index.html
https://material-components.github.io/material-components-web-catalog/#/component/switch
RE: Custom Switch MDC - admin - 08.05.2023
Where exactly do you want to use it? The standard toggle element can be styled via CSS to have a similar look.
RE: Custom Switch MDC - eco-view - 11.05.2023
I'd like to use it throughout the visualisation. Is there an easy way for a not super technical person to style 'inline' switch to look like one of these?
RE: Custom Switch MDC - admin - 11.05.2023
Add to Custom CSS:
Code:
.toggler {
width: 84px;
border: none;
overflow: visible;
}
.toggler .btn-toggler {
color: transparent !important;
text-shadow: none;
padding: 0;
width: 42px;
height: 42px;
border-radius: 50%;
box-shadow: 0 0 1px 3px rgba(0, 0, 0, 0.2);
}
.toggler .btn-bg {
padding: 0;
width: 64px;
height: 22px;
margin: 10px;
border-radius: 11px;
}You can adjust the Control size scale property in Vis. parameters to make it bigger/smaller as needed.
RE: Custom Switch MDC - eco-view - 11.05.2023
That works fantastic and looks great!
Would you be able to help me out with a dimmer slider to suit?
Thank you so much
RE: Custom Switch MDC - Daniel - 11.05.2023
See this thread, you can modify it as needed
https://forum.logicmachine.net/showthread.php?tid=467&pid=2544#pid2544