bricks/docs/ai/widget.md
2025-11-13 18:04:58 +08:00

252 lines
6.3 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# Text
用处:用于在界面上显示静态文本内容,支持国际化、文本对齐和样式配置
类型:普通控件,继承自`TextBase`
## 主要方法
| 方法名 | 描述 |
|----------------|----------------------------------------------------------------------|
| `set_text(text)` | 设置控件显示的文本内容 |
| `set_otext(otxt)` | 设置国际化文本键,自动根据当前语言翻译并显示 |
| `set_style(k, v)` | 设置控件的CSS样式属性 |
| `set_css(css)` | 为控件添加CSS类 |
## 主要事件
无自定义事件(继承自`JsWidget`的基础事件如`click``mousemove`等可用)
## 源码例子
```json
{
"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` | 当文本内容发生变化时触发,携带当前文本数据 |
## 源码例子
```json
{
"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`控件
## 主要事件
无自定义事件
## 源码例子
```json
{
"id": "title1_demo",
"widgettype": "Title1",
"options": {
"text": "Main Title", // 标题文本
"halign": "center" // 居中对齐
}
}
```
# Title2
用处用于显示二级标题文本字体大小略小于Title1且加粗
类型:普通控件,继承自`TextBase`
## 主要方法
`Text`控件
## 主要事件
无自定义事件
## 源码例子
```json
{
"id": "title2_demo",
"widgettype": "Title2",
"options": {
"text": "Section Title", // 标题文本
"halign": "left" // 左对齐
}
}
```
# Title3
用处用于显示三级标题文本字体大小略小于Title2且加粗
类型:普通控件,继承自`TextBase`
## 主要方法
`Text`控件
## 主要事件
无自定义事件
## 源码例子
```json
{
"id": "title3_demo",
"widgettype": "Title3",
"options": {
"text": "Subsection Title", // 标题文本
"css": "custom-title" // 自定义样式
}
}
```
# Title4
用处用于显示四级标题文本字体大小略小于Title3且加粗
类型:普通控件,继承自`TextBase`
## 主要方法
`Text`控件
## 主要事件
无自定义事件
## 源码例子
```json
{
"id": "title4_demo",
"widgettype": "Title4",
"options": {
"otext": "i18n_title", // 国际化文本键
"i18n": true // 启用国际化
}
}
```
# Title5
用处用于显示五级标题文本字体大小略小于Title4且加粗
类型:普通控件,继承自`TextBase`
## 主要方法
`Text`控件
## 主要事件
无自定义事件
## 源码例子
```json
{
"id": "title5_demo",
"widgettype": "Title5",
"options": {
"text": "Small Title", // 标题文本
"color": "#333333" // 文本颜色
}
}
```
# Title6
用处用于显示六级标题文本字体大小略小于Title5且加粗
类型:普通控件,继承自`TextBase`
## 主要方法
`Text`控件
## 主要事件
无自定义事件
## 源码例子
```json
{
"id": "title6_demo",
"widgettype": "Title6",
"options": {
"text": "Caption", // 标题文本
"bgcolor": "#ffffff" // 背景颜色
}
}
```
# Tooltip
用处:用于在用户与目标控件交互时显示提示信息,支持自动隐藏和位置调整
类型:普通控件,继承自`Text`
## 主要方法
| 方法名 | 描述 |
|------------------|----------------------------------------------------------------------|
| `show(otext, event)` | 显示提示信息,接收国际化文本键和触发事件以定位 |
| `hide()` | 隐藏提示信息 |
## 主要事件
无自定义事件(通常与目标控件的鼠标事件联动使用)
## 源码例子
```json
{
"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的方式。