| 1 | // Copyright © SixtyFPS GmbH <info@slint.dev> |
|---|
| 2 | // SPDX-License-Identifier: MIT |
|---|
| 3 | |
|---|
| 4 | import { Theme } from "../theme.slint" ; |
|---|
| 5 | import { Images } from "../images.slint" ; |
|---|
| 6 | |
|---|
| 7 | export component CheckBox { |
|---|
| 8 | callback clicked <=> i-touch-area.clicked; |
|---|
| 9 | in-out property <bool> checked; |
|---|
| 10 | |
|---|
| 11 | min-height: 18px; |
|---|
| 12 | width: self.height; |
|---|
| 13 | |
|---|
| 14 | states [ |
|---|
| 15 | checked when checked : { |
|---|
| 16 | i-container.border-width: 0; |
|---|
| 17 | i-container.background: Theme.palette.lemon-green; |
|---|
| 18 | i-check-icon.opacity: 1.0; |
|---|
| 19 | } |
|---|
| 20 | ] |
|---|
| 21 | |
|---|
| 22 | i-container := Rectangle { |
|---|
| 23 | border-color: Theme.palette.slint-blue-300; |
|---|
| 24 | border-width: 2px; |
|---|
| 25 | border-radius: 2px; |
|---|
| 26 | |
|---|
| 27 | animate background { duration: Theme.durations.fast; } |
|---|
| 28 | |
|---|
| 29 | i-check-icon := Image { |
|---|
| 30 | opacity: 0.0; |
|---|
| 31 | colorize: Theme.palette.pure-black; |
|---|
| 32 | source: Images.check; |
|---|
| 33 | |
|---|
| 34 | animate opacity { duration: Theme.durations.fast; } |
|---|
| 35 | } |
|---|
| 36 | } |
|---|
| 37 | |
|---|
| 38 | i-touch-area := TouchArea { |
|---|
| 39 | clicked => { |
|---|
| 40 | checked = !checked; |
|---|
| 41 | } |
|---|
| 42 | } |
|---|
| 43 | } |
|---|
| 44 | |
|---|
