Switch

API Reference: UI.Switch

Switch is a two-state toggle button. Switch allows the user to select between two options. (e.g. on/off)

TypeScript code blocks include examples of how to implement, override and components within the theme. You can create page with the UI Editor to make your page compatible with theming and then you can implement themable components programmatically. Once the page is created with the UI Editor, it generates a class under scripts/generated/pages. You can then extend that class with the following TypeScript classes.

thumbOnColor

The default of thumbOnColor is green on Android and null on iOS. If this is set on iOS, the switch grip will lose its drop shadow. For iOS, If you want to use default of this property, you should set null.

toggleOnColor

The default of toggleOnColor is gray on Android and green on iOS.

TypeScript
JavaScript
TypeScript
import PageSampleDesign from 'generated/pages/pageSample';
import FlexLayout = require('sf-core/ui/flexlayout');
import Application = require('sf-core/application');
import Switch = require('sf-core/ui/switch');
import Color = require('sf-core/ui/color');
//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PageSampleDesign {
mySwitch: Switch;
constructor() {
super();
// Overrides super.onShow method
this.onShow = onShow.bind(this, this.onShow.bind(this));
// Overrides super.onLoad method
this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
this.layout.alignItems = FlexLayout.AlignItems.CENTER;
}
}
/**
* @event onShow
* This event is called when a page appears on the screen (everytime).
* @param {function} superOnShow super onShow function
* @param {Object} parameters passed from Router.go function
*/
function onShow(superOnShow: () => void) {
const { headerBar } = this;
superOnShow();
Application.statusBar.visible = false;
headerBar.visible = false;
}
/**
* @event onLoad
* This event is called once when page is created.
* @param {function} superOnLoad super onLoad function
*/
function onLoad(superOnLoad: () => void) {
superOnLoad();
this.mySwitch = new Switch({
thumbOnColor: Color.BLUE,
toggleOnColor: Color.RED
});
this.layout.addChild(this.mySwitch, "mySwitch", ".sf-switch", {
thumbOnColor: "#0000FF",
toggleOnColor: "#FF0000"
});
}
JavaScript
const Page = require("sf-core/ui/page");
const extend = require("js-base/core/extend");
const Color = require('sf-core/ui/color');
const Label = require('sf-core/ui/label');
const FlexLayout = require('sf-core/ui/flexlayout');
const Switch = require('sf-core/ui/switch');
var Page1 = extend(Page)(
function(_super) {
_super(this, {
onShow: function(params) {
this.statusBar.visible = false;
this.headerBar.visible = false;
}
});
this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
this.layout.alignItems = FlexLayout.AlignItems.CENTER;
var mySwitch = new Switch({
thumbOnColor : Color.BLUE,
toggleOnColor: Color.RED
});
this.layout.addChild(mySwitch);
}
);
module.exports = Page1;

thumbOffColor and toggleOffColor

On Android, those two properties can be used without a problem. However, due to restrictions by Apple, those properties are not allowed to be set on iOS directly. To overcome this, you can use a workaround to set it manually, like example given below:

TypeScript
JavaScript
TypeScript
let switch1: Switch = new Switch();
switch1.left = 100;
switch1.nativeObject.backgroundColor = Color.GREEN.nativeObject,"backgroundColor";
switch1.nativeObject.layer.cornerRadius = switch1.nativeObject.frame.height/2;
this.layout.addChild(switch1, "mySwitch", ".sf-switch", {
toggleOnColor: "#FF0000"
});
JavaScript
let switch1 = new Switch();
switch1.left = 100;
switch1.toggleOnColor = Color.RED;
switch1.nativeObject.backgroundColor = Color.GREEN.nativeObject,"backgroundColor";
switch1.nativeObject.layer.cornerRadius = switch1.nativeObject.frame.height/2;
this.layout.addChild(switch1);

Using this workaround is not advised by Smartface, since Switch implementation may be changed on newer iOS versions, use at your own risk.

Setting switch themes on style

Since setting thumbOnColor on iOS will make switch lose its drop shadow and toggleOffColor and thumbOffColor doesn't exist on iOS, you can use following theme sample to overcome common quirks.

Switch.json
Switch.json
".switch": {
"toggleOnColor": "rgba( 0, 161, 241, 1 )",
"android": {
"toggleOffColor": "rgba( 0, 161, 241, 1 )",
"thumbOffColor": "rgba(255, 255, 255, 1)"
},
"+Device:Device.os === \"Android\"": {
"thumbOnColor": "rgba( 255, 255, 255, 1 )"
}
}