Hi,
I want to built a dashboard in iOS Style. How can I style the switch in iOS style?
Here is an example of the iOS settings.
Best regards,
Markus
Sorry to call you out @hotNipi
But you're the first member that popped into my head.
I am not bad at CSS, but not that good.
I should mention, plenty of others here that can do this type of style - I think @bakman2 & @BartButenaers are pretty intune with DB CSS hackery
I have tried to add a class to the default switch and style it, but the vuetify behaviour is messy to override everything.
I would opt for a custom template:
<template>
<div class="switch-row">
<span class="switch-label">Raster</span>
<label class="ios-switch">
<input
type="checkbox"
v-model="value"
:checked="msg.payload"
@change="this.send({payload: value})"
>
<span class="slider"></span>
</label>
</div>
</template>
<style>
.switch-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 0;
}
.switch-label {
font-size:1rem;
font-weight: 400;
letter-spacing: 0.01em;
}
.ios-switch {
position: relative;
display: inline-block;
width: 52px;
height: 32px;
}
.ios-switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #3a3a3a;
border-radius: 16px;
transition: background 0.2s;
}
.ios-switch input:checked+.slider {
background-color: #4cd964;
}
.slider::before {
content: "";
position: absolute;
height: 28px;
width: 28px;
left: 2px;
top: 2px;
background: #fff;
border-radius: 50%;
transition: transform 0.2s;
}
.ios-switch input:checked+.slider::before {
transform: translateX(20px);
}
</style>
Renders:
You can send a payload with true or false and it will toggle. Upon change it will emit true/false.
example flow
[{"id":"2183a7fff2495e79","type":"ui-template","z":"1f2e6f7bfbcb58e5","group":"f43485e0cc869747","page":"","ui":"","name":"custom switch","order":2,"width":0,"height":0,"head":"","format":"<template>\n <div class=\"switch-row\">\n <span class=\"switch-label\">Raster</span>\n <label class=\"ios-switch\">\n <input\n type=\"checkbox\"\n v-model=\"value\"\n :checked=\"msg.payload\"\n @change=\"this.send({payload: value})\"\n >\n <span class=\"slider\"></span>\n </label>\n </div>\n</template>\n\n<style>\n .switch-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 0;\n\n }\n\n .switch-label {\n font-size:1rem;\n font-weight: 400;\n letter-spacing: 0.01em;\n }\n\n .ios-switch {\n position: relative;\n display: inline-block;\n width: 52px;\n height: 32px;\n }\n\n .ios-switch input {\n opacity: 0;\n width: 0;\n height: 0;\n }\n\n .slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: #3a3a3a;\n border-radius: 16px;\n transition: background 0.2s;\n }\n\n .ios-switch input:checked+.slider {\n background-color: #4cd964;\n }\n\n .slider::before {\n content: \"\";\n position: absolute;\n height: 28px;\n width: 28px;\n left: 2px;\n top: 2px;\n background: #fff;\n border-radius: 50%;\n transition: transform 0.2s;\n }\n\n .ios-switch input:checked+.slider::before {\n transform: translateX(20px);\n }\n</style>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":480,"y":180,"wires":[["d72d6e2ce9b7facf"]]},{"id":"d72d6e2ce9b7facf","type":"debug","z":"1f2e6f7bfbcb58e5","name":"debug 26","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":660,"y":180,"wires":[]},{"id":"b4a686e748bee4de","type":"inject","z":"1f2e6f7bfbcb58e5","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"false","payloadType":"bool","x":290,"y":160,"wires":[["2183a7fff2495e79"]]},{"id":"b67d2a648f122614","type":"inject","z":"1f2e6f7bfbcb58e5","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":290,"y":200,"wires":[["2183a7fff2495e79"]]},{"id":"f43485e0cc869747","type":"ui-group","name":"Group 3","page":"3969e3bc69083441","width":6,"height":1,"order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"3969e3bc69083441","type":"ui-page","name":"db test","ui":"ae5e1b003bc32ad3","path":"/page2","icon":"home","layout":"grid","theme":"c19989f7fdf6e63d","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":2,"className":"","visible":"true","disabled":"false"},{"id":"ae5e1b003bc32ad3","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"headerContent":"page","navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":1,"showDisconnectNotification":true,"allowInstall":true},{"id":"c19989f7fdf6e63d","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"density":"compact","pagePadding":"4px","groupGap":"4px","groupBorderRadius":"4px","widgetGap":"4px"}}]
2 Likes
Thank you for your feedback.
I would like to modify the style of the standard ui-switch because some other nodes (scheduler) also use this style.
It would be nice if you could style the default switch.
