Switch

A widget that allows the user to make a binary choice between two mutually exclusive options, checked and unchecked.

Building

Switch::new(checked).build(state, parent, |builder| builder);

where checked is a bool determining the initial state of the checkbox, true for checked and false for unchecked.

Styling

A switch is composed of two entities, the back with an element id of switch, and the front slider with the class front. The front entity can be styled using the child selector switch>.front. The style when checked can be modified using the :checked pseudoclass.

switch {
    left: 20px;
    top: 20px;
    width: 36px;
    height: 20px;
    background-color: #646464;
    flex-direction: row;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 2.5px;
    padding-right: 2.5px;
    transition: background-color 0.2 0.0;
    border-radius: 9px;
}

switch>.front {
    left: 0%;
    flex-grow: 0.5;
    background-color: white;
    transition: left 0.2 0.0;
    border-radius: 7;
}

switch:checked>.front {
    left: 50%;
    transition: left 0.2 0.0;
}

switch:checked {
    background-color: #3669c9;
    transition: background-color 0.2 0.0;
}

Events

The switch uses the same CheckboxEvent for emitted and received events.

Emitted

• CheckboxEvent::Checked - emitted by the checkbox when switching from unchecked to checked states.
• CheckboxEvent::Unchecked - emitted by the checkbox when switching from checked to unchecked states.

Received

• CheckboxEvent::Check - sets the checkbox to a checked state.
• CheckboxEvent::Uncheck - sets the checkbox to a unchecked state.
• CheckboxEvent::Switch - switches the checkbox from its current state to the other, i.e. checked -> unchecked, unchecked -> checked.

Animations

A switch has no built-in animations. However, the default switch style contains transitions for the slider left position and the switch background colour.