基础组件

本章涵盖最常用的基础组件：Panel/Label/Button。

Panel / div

用途：通用容器（布局/背景/事件挂载）。

标签：<Panel> / <div>

常用属性：

• class / id / ref
• :style（BSS 由 <style> 管理）
• 事件：@click / @mouseenter / @mouseleave / @mousemove 等

常用 BSS：

• width/height/margin/padding/position
• background/opacity/z-index/transform

---

Label / text / span

用途：纯文本显示（可翻译 / 可动态更新）。

标签：<Label> / <text> / <span>

常用属性：

• text="..."（翻译 key）
• :text="expr"（表达式）
• ref="..." 便于脚本调用 setText...

常用 BSS：

• font, font-size, color, text-shadow
• white-space（换行/滚动）

JS 示例：

const title = ref("title")
title.setTextString("任务列表")

---

Button

用途：点击按钮。

标签：<Button>

事件：

• @click（常用）

常用 BSS：

• base-background / hover-background / pressed-background

JS 示例：

ref("ok").setOnClick(() => {
  sound.play("ui/confirm")
})

完整方法列表见：UI JS API。