mirror of
https://github.com/slint-ui/slint.git
synced 2025-09-28 12:54:45 +00:00
072d8fabcb
Add material, material-light and material-dark widgets and make it available by the `env` `SLINT_STYLE`.
52 lines
No EOL
1.4 KiB
Text
52 lines
No EOL
1.4 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";
|
|
|
|
// A selectable item that is used by `StandardListView` and `ComboBox`.
|
|
export Item := Rectangle {
|
|
callback clicked <=> touch.clicked;
|
|
|
|
property<bool> selected: false;
|
|
property<string> text <=> label.text;
|
|
|
|
height: 48px;
|
|
|
|
state-layer := Rectangle {
|
|
opacity: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: md.sys.color.primary;
|
|
animate opacity { duration: 250ms; easing: ease; }
|
|
}
|
|
|
|
HorizontalLayout {
|
|
padding-left: 12px;
|
|
padding-right: 12px;
|
|
|
|
label := Text {
|
|
color: md.sys.color.on-surface;
|
|
vertical-alignment: center;
|
|
// FIXME after Roboto font can be loaded
|
|
//font-family: md.sys.typescale.label-large.font;
|
|
font-size: md.sys.typescale.label-large.size;
|
|
font-weight: md.sys.typescale.label-large.weight;
|
|
}
|
|
}
|
|
|
|
touch := TouchArea {}
|
|
|
|
states [
|
|
selected when selected : {
|
|
state-layer.opacity: 1;
|
|
state-layer.background: md.sys.color.secondary-container;
|
|
}
|
|
pressed when touch.pressed : {
|
|
state-layer.opacity: 0.12;
|
|
}
|
|
hover when touch.has-hover : {
|
|
state-layer.opacity: 0.08;
|
|
}
|
|
]
|
|
} |