neft/examples/default-styles/views/elements/Switch.html

Universal Platform

<import src="input/NativeItem.html" as="NativeItem" />
<import src="input/RandomColor.html" as="RandomColor" />

<script>
    const { utils } = Neft;

    this.onRender(function () {
        this.state.set('enabled', utils.isIOS || utils.isAndroid);
    });
    this.toggleInput = function () {
        const { style } = this.refs.input;
        style.selected = !style.selected;
    };
    this.toggleAnimatedInput = function () {
        const { style } = this.refs.input;
        style.setSelectedAnimated(!style.selected);
    };
</script>

<NativeItem enabled="${state.enabled}">
    <input
      ref="input"
      type="switch"
      n-style:borderColor="${refs.colorInput.state.color}"
      n-style:selectedColor="${refs.colorInput2.state.color}"
      n-style:thumbColor="${refs.colorInput3.state.color}"
    />
</NativeItem>

State: ${refs.input.style.selected}
<RandomColor ref="colorInput" />
<RandomColor ref="colorInput2" />
<RandomColor ref="colorInput3" />
<button n-style:pointer:onClick="${this.toggleInput()}">Toggle</button>
<button n-style:pointer:onClick="${this.toggleAnimatedInput()}">Toggle animated</button>