Switch Button

The Switch Button control provides the possibility to turn on and off some app settings depending on the position of the button. You can create a switched on button, a disabled button or even initialize a disabled switched on button, if you need to prevent users from changing the default settings.

Related resources

• Get the widget by installing the wx-svelte-core package.
• Check the API Reference to see the list of configuration properties.
• Explore the samples to visualize the available features.

Initialization

To create a Switch instance on a page, you need to complete two steps:

• import the source file of the control on a page:

App.svelte

<script>
    import { Switch } from "wx-svelte-core";
</script>

• use the <Switch> tag to initialize the control:

App.svelte

<Switch/>

A default switch button is initialized turned off with no label.

Setting the value

The Switch button is initialized on a page turned off. Use the value property to control the state of the button. Set the property to true to turn the button on:

<Switch value={true}/> 

Related sample: Switch Button

Getting the current state

It is possible to get the state of a Switch button. For this, you need:

• specify a variable that will contain the state of the Switch button (it may contain the initial state):

<script>
    import { Switch } from "wx-svelte-core";

    let state = true;
</script>

• bind the variable to the checked property of the control:

<Switch bind:checked={state} />

If the name of the variable matches its value, you can use the shorthand while binding the property:

<script>
    import { Switch } from "wx-svelte-core";

    let checked = true;
</script>

<Switch bind:checked />

After that the value assigned to the bound variable will be updated on each change of the state of the Switch button.

Related sample: Switch Button

Setting the disabled state

You can initialize a disabled Switch Button with the help of the disabled property. Set the property to true or specify it without any value, like this:

<Switch disabled={true}/> <!-- equals to <Switch disabled/> -->

Related sample: Switch Button

Adding a label

A default switch button has no label. To add it, you can use the Field component and complete several steps:

• include the Field source file on a page, declare the <Field> tag and fill it with the necessary props:
  • add a desired label via the label property. Besides a simple text, you can display the current control's state in the label (see the example below)
  • set the type="switch" property for the Field component
  • set the position="left" property, if you want to place the label to the left of the switch button
  • specify the id variable to bind the field and switch controls

<script>
    let v1 = false;
</script>

<Field label="Switch:{v1}" position="left" let:id/>

After that, wrap the switch button in question in the <Field> tags and specify the id property for the switch button:

<script>
    import { Switch, Field } from "wx-svelte-core";

    let v1 = false;
</script>

<Field label="Switch:{v1}" position="left" type="switch" let:id>
    <Switch {id} />
</Field>

Related sample: Switch Button