mirror of
https://github.com/slint-ui/slint.git
synced 2025-08-15 16:10:50 +00:00
072d8fabcb
Add material, material-light and material-dark widgets and make it available by the `env` `SLINT_STYLE`.
104 lines
No EOL
2.9 KiB
Text
104 lines
No EOL
2.9 KiB
Text
// Copyright © SixtyFPS GmbH <info@slint-ui.com>
|
|
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial
|
|
|
|
|
|
import { md } from "md.slint";
|
|
|
|
// Default button widget with Material Design Filled Button look and feel.
|
|
export Button := Rectangle {
|
|
callback clicked;
|
|
|
|
property<string> text <=> label.text;
|
|
property<bool> has-focus <=> fs.has-focus;
|
|
property<bool> pressed: self.enabled && touch.pressed;
|
|
property<bool> enabled <=> touch.enabled;
|
|
property<bool> checkable;
|
|
property<bool> checked;
|
|
property<image> icon;
|
|
property<length> font-size <=> label.font-size;
|
|
|
|
accessible-label <=> label.text;
|
|
accessible-role: button;
|
|
|
|
height: 40px;
|
|
|
|
container := Rectangle {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 20px;
|
|
background: md.sys.color.secondary-container;
|
|
drop-shadow-color: transparent;
|
|
drop-shadow-blur: md.sys.elevation.level0;
|
|
drop-shadow-offset-y: 1px;
|
|
}
|
|
|
|
state-layer := Rectangle {
|
|
opacity: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: container.border-radius;
|
|
background: md.sys.color.on-secondary-container;
|
|
animate opacity { duration: 250ms; easing: ease; }
|
|
}
|
|
|
|
HorizontalLayout {
|
|
padding-left: 24px;
|
|
padding-right: 24px;
|
|
spacing: 8px;
|
|
|
|
if (icon.width > 0 && icon.height > 0): Image {
|
|
source <=> icon;
|
|
width: 24px;
|
|
opacity: label.opacity;
|
|
}
|
|
|
|
label := Text {
|
|
color: md.sys.color.on-secondary-container;
|
|
vertical-alignment: center;
|
|
horizontal-alignment: center;
|
|
font-size: md.sys.typescale.label-large.size;
|
|
font-weight: md.sys.typescale.label-large.weight;
|
|
}
|
|
}
|
|
|
|
touch := TouchArea {
|
|
clicked => {
|
|
if (root.checkable) {
|
|
root.checked = !root.checked;
|
|
}
|
|
root.clicked();
|
|
}
|
|
}
|
|
|
|
fs := FocusScope {
|
|
width: 0px; // Do not react on clicks
|
|
enabled <=> root.enabled;
|
|
key-pressed(event) => {
|
|
if (event.text == " " || event.text == "\n") {
|
|
touch.clicked();
|
|
return accept;
|
|
}
|
|
return reject;
|
|
}
|
|
}
|
|
|
|
states [
|
|
disabled when !root.enabled : {
|
|
container.background: md.sys.color.on-surface;
|
|
container.opacity: 0.12;
|
|
label.opacity: 0.38;
|
|
label.color: md.sys.color.on-surface;
|
|
}
|
|
pressed when touch.pressed : {
|
|
state-layer.opacity: 0.12;
|
|
}
|
|
hover when touch.has-hover : {
|
|
state-layer.opacity: 0.08;
|
|
container.drop-shadow-blur: md.sys.elevation.level1;
|
|
container.drop-shadow-color: md.sys.color.shadow;
|
|
}
|
|
focused when fs.has-focus : {
|
|
state-layer.opacity: 0.12;
|
|
}
|
|
]
|
|
} |