mirror of
https://github.com/kierankihn/uno-game.git
synced 2025-12-27 02:13:18 +08:00
feat(ui): add reusable Button and LabeledInput components using Slint
This commit is contained in:
65
src/ui/Components.slint
Normal file
65
src/ui/Components.slint
Normal file
@@ -0,0 +1,65 @@
|
||||
import { LineEdit } from "std-widgets.slint";
|
||||
|
||||
export component Button inherits Rectangle {
|
||||
in property <string> text;
|
||||
in property <bool> enabled: true;
|
||||
|
||||
callback clicked;
|
||||
|
||||
width: 100px;
|
||||
height: 36px;
|
||||
background: !root.enabled ? #555555 // 禁用状态
|
||||
: touch.pressed ? #444444 // 按下
|
||||
: #2C2C2C; // 默认
|
||||
border-radius: 6px;
|
||||
|
||||
touch := TouchArea {
|
||||
enabled: root.enabled;
|
||||
clicked => {
|
||||
root.clicked()
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
text: root.text;
|
||||
color: #FFFFFF;
|
||||
font-size: 14px;
|
||||
vertical-alignment: center;
|
||||
horizontal-alignment: center;
|
||||
}
|
||||
}
|
||||
|
||||
export component LabeledInput inherits VerticalLayout {
|
||||
in property <InputType> input-type: InputType.text;
|
||||
|
||||
in property <string> label-text;
|
||||
in-out property <string> value <=> input.text;
|
||||
in property <string> placeholder;
|
||||
|
||||
spacing: 6px;
|
||||
|
||||
// 标签文本
|
||||
Text {
|
||||
text: root.label-text;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #555555;
|
||||
}
|
||||
|
||||
// 输入框背景和实体
|
||||
Rectangle {
|
||||
height: 36px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 6px;
|
||||
border-width: 1px;
|
||||
border-color: input.has-focus ? #888888 : #E0E0E0; // 聚焦时边框变深
|
||||
|
||||
input := LineEdit {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 14px;
|
||||
placeholder-text: root.placeholder;
|
||||
input-type: root.input-type;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user