slint/internal/compiler/widgets/material-base/widget-switch.slint

// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-1.0 OR LicenseRef-Slint-commercial

import { md } from "md.slint";

export component Switch {
    callback toggled;

    in property <string> text <=> label.text;
    in-out property <bool> checked;
    out property <bool> has-focus: fs.has-focus;
    in property<bool> enabled: true;

    min-height: 32px;
    vertical-stretch: 0;
    horizontal-stretch: 0;
    accessible-label <=> label.text;
    accessible-checkable: true;
    accessible-checked <=> root.checked;
    accessible-role: checkbox;
    forward-focus: fs;

    VerticalLayout {
        alignment: center;

        layout := HorizontalLayout {
            spacing: 16px;

            Rectangle {
                width: 52px;
                height: 32px;

                track := Rectangle {
                    border-radius: 16px;
                    border-width: 2px;
                    border-color: md.sys.color.outline;
                    background: md.sys.color.surface-variant;
                }

                handle := Rectangle {
                    x: 8px;
                    y: (parent.height - self.height) / 2;
                    width: 16px;
                    height: self.width;
                    border-radius: self.width / 2;
                    background: md.sys.color.outline;

                    state-layer := Rectangle {
                        width: 40px;
                        height: 40px;
                        x: (parent.width - self.width) / 2;
                        y: (parent.height - self.height) / 2;
                        opacity: 0;
                        background: md.sys.color.primary;
                        border-radius: 20px;
                        animate opacity { duration: 300ms; easing: ease; }
                    }

                    animate background, width, x { duration: 75ms; easing: linear; }
                }

                animate background, border-color{ duration: 75ms; easing: linear; }
            }

            label := Text {
                color: md.sys.color.on-surface;
                horizontal-alignment: left;
                vertical-alignment: center;
                vertical-stretch: 0;
                font-size: md.sys.typescale.title-small.size;
                font-weight: md.sys.typescale.title-small.weight;
            }
        }
    }

    touch := TouchArea {
        enabled <=> root.enabled;

        clicked => {
            root.toggle-checked();
        }
    }

    fs := FocusScope {
        x:0;
        width: 0px; // Do not react on clicks
        enabled <=> root.enabled;

        key-pressed(event) => {
            if (event.text == " " || event.text == "\n") {
                 root.toggle-checked();
                 return accept;
            }
            return reject;
        }
    }

    function toggle-checked() {
        if(!root.enabled) {
            return;
        }

        root.checked = !root.checked;
        root.toggled();
    }

    states [
        disabled-selected when !root.enabled && root.checked  : {
            label.opacity: 0.38;
            label.color: md.sys.color.primary;
            track.opacity: 0.12;
            handle.opacity: 0.38;
            handle.width: 24px;
            handle.x: track.width - 28px - 4px;
        }
        disabled when !root.enabled : {
            label.opacity: 0.38;
            label.color: md.sys.color.primary;
            track.opacity: 0.12;
            handle.opacity: 0.38;
        }
        pressed when touch.pressed && !root.checked : {
            state-layer.opacity: 0.12;
            handle.background: md.sys.color.on-surface-variant;
            handle.width: 28px;
            handle.x: track.border-width;
        }
        pressed-selected when touch.pressed && root.checked : {
            state-layer.opacity: 0.12;
            state-layer.background: md.sys.color.on-surface;
            track.background: md.sys.color.primary;
            track.border-color: md.sys.color.primary;
            handle.background: md.sys.color.primary-container;
            handle.width: 28px;
            handle.x: track.width - 28px - 4px;
        }
        hover-selected when touch.has-hover && root.checked : {
            state-layer.opacity: 0.08;
            track.background: md.sys.color.primary;
            track.border-color: md.sys.color.primary;
            handle.background: md.sys.color.primary-container;
            handle.width: 24px;
            handle.x: track.width - 24px - 4px;
        }
        hover when touch.has-hover && !root.checked : {
            state-layer.background: md.sys.color.on-surface;
            state-layer.opacity: 0.08;
            handle.background: md.sys.color.on-surface-variant;
        }
        selected when !touch.has-hover && root.checked : {
            track.background: md.sys.color.primary;
            track.border-color: md.sys.color.primary;
            handle.background: md.sys.color.primary-container;
            handle.width: 24px;
            handle.x: track.width - 24px - 4px;
        }
        focused-selected when fs.has-focus && root.checked : {
            state-layer.opacity: 0.12;
            track.background: md.sys.color.primary;
            track.border-color: md.sys.color.primary;
            handle.background: md.sys.color.primary-container;
            handle.width: 24px;
            handle.x: track.width - 24px - 4px;
        }
        focused when fs.has-focus && !root.checked : {
            state-layer.background: md.sys.color.on-surface;
            state-layer.opacity: 0.12;
        }
    ]
}