Switch in iOS style

[MKaiser96]

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

[marcus-j-davies]

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

[bakman2]

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"}}]

[MKaiser96]

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.