6.3 KiB
6.3 KiB
Text
用处：用于在界面上显示静态文本内容，支持国际化、文本对齐和样式配置
类型：普通控件，继承自TextBase
主要方法
| 方法名 | 描述 |
|---|---|
set_text(text) |
设置控件显示的文本内容 |
set_otext(otxt) |
设置国际化文本键，自动根据当前语言翻译并显示 |
set_style(k, v) |
设置控件的CSS样式属性 |
set_css(css) |
为控件添加CSS类 |
主要事件
无自定义事件（继承自JsWidget的基础事件如click、mousemove等可用）
源码例子
{
"id": "text_demo",
"widgettype": "Text",
"options": {
"text": "Hello, Bricks!", // 直接设置显示文本
"halign": "center", // 水平居中对齐
"valign": "middle", // 垂直居中对齐
"css": "my-text-style", // 自定义CSS类
"bgcolor": "#f0f0f0" // 背景颜色
},
"binds": [
{
"actiontype": "script",
"wid": "text_demo",
"event": "click",
"script": "console.log('Text clicked!')" // 点击时执行脚本
}
]
}
KeyinText
用处：允许用户通过键盘输入和编辑文本内容，并在文本变化时触发事件通知
类型：普通控件，继承自Text
主要方法
| 方法名 | 描述 |
|---|---|
key_down_action(event) |
处理键盘输入事件，支持删除、退格和字符输入 |
dispatch_changed() |
当文本内容变化时触发changed事件 |
set_text(text) |
设置控件显示的文本内容 |
主要事件
| 事件名 | 描述 |
|---|---|
changed |
当文本内容发生变化时触发，携带当前文本数据 |
源码例子
{
"id": "keyin_demo",
"widgettype": "KeyinText",
"options": {
"text": "Enter text here...", // 初始文本
"name": "input_data", // 事件数据中的键名
"halign": "left", // 左对齐
"width": "200px" // 宽度
},
"binds": [
{
"actiontype": "script",
"wid": "keyin_demo",
"event": "changed",
"script": "console.log('Input changed:', params)" // 文本变化时打印数据
}
]
}
Title1
用处：用于显示一级标题文本，字体较大且加粗
类型：普通控件，继承自TextBase
主要方法
同Text控件
主要事件
无自定义事件
源码例子
{
"id": "title1_demo",
"widgettype": "Title1",
"options": {
"text": "Main Title", // 标题文本
"halign": "center" // 居中对齐
}
}
Title2
用处：用于显示二级标题文本，字体大小略小于Title1且加粗
类型：普通控件，继承自TextBase
主要方法
同Text控件
主要事件
无自定义事件
源码例子
{
"id": "title2_demo",
"widgettype": "Title2",
"options": {
"text": "Section Title", // 标题文本
"halign": "left" // 左对齐
}
}
Title3
用处：用于显示三级标题文本，字体大小略小于Title2且加粗
类型：普通控件，继承自TextBase
主要方法
同Text控件
主要事件
无自定义事件
源码例子
{
"id": "title3_demo",
"widgettype": "Title3",
"options": {
"text": "Subsection Title", // 标题文本
"css": "custom-title" // 自定义样式
}
}
Title4
用处：用于显示四级标题文本，字体大小略小于Title3且加粗
类型：普通控件，继承自TextBase
主要方法
同Text控件
主要事件
无自定义事件
源码例子
{
"id": "title4_demo",
"widgettype": "Title4",
"options": {
"otext": "i18n_title", // 国际化文本键
"i18n": true // 启用国际化
}
}
Title5
用处：用于显示五级标题文本，字体大小略小于Title4且加粗
类型：普通控件，继承自TextBase
主要方法
同Text控件
主要事件
无自定义事件
源码例子
{
"id": "title5_demo",
"widgettype": "Title5",
"options": {
"text": "Small Title", // 标题文本
"color": "#333333" // 文本颜色
}
}
Title6
用处：用于显示六级标题文本，字体大小略小于Title5且加粗
类型：普通控件，继承自TextBase
主要方法
同Text控件
主要事件
无自定义事件
源码例子
{
"id": "title6_demo",
"widgettype": "Title6",
"options": {
"text": "Caption", // 标题文本
"bgcolor": "#ffffff" // 背景颜色
}
}
Tooltip
用处：用于在用户与目标控件交互时显示提示信息，支持自动隐藏和位置调整
类型：普通控件，继承自Text
主要方法
| 方法名 | 描述 |
|---|---|
show(otext, event) |
显示提示信息，接收国际化文本键和触发事件以定位 |
hide() |
隐藏提示信息 |
主要事件
无自定义事件（通常与目标控件的鼠标事件联动使用）
源码例子
{
"id": "tooltip_target",
"widgettype": "Button", // 假设存在Button控件
"options": {
"text": "Hover me", // 按钮文本
"tip": "This is a button" // Tooltip提示文本
},
"subwidgets": [
{
"id": "tooltip_demo",
"widgettype": "Tooltip",
"options": {
"rate": 0.8, // 文本缩放比例
"text": "Default tooltip" // 默认提示文本
}
}
]
}
注意：Tooltip通常通过目标控件的
tip属性自动关联，无需单独定义。上述例子展示了手动创建Tooltip的方式。