feat: Add comprehensive examples for all remaining bricks-framework components
- Added examples for 40+ additional components including: - Accordion, ChartBar, Camera, Cols, Conform - Countdown, TimePassed, DOCXviewer, EXCELviewer, PDFviewer - DynamicColumn, IconBar, IconTextBar, FloatIconBar, FloatIconTextBar - GlbViewer, ChartHeatmap, Html, IconbarPage, NewWindow, Iframe, Icon - ChartKLine, ChartLine, ChartMap, MdWidget, Menu, Message, Error - MultipleStateImage, ChartPie, ProgressBar, QRCodeScan, ChartRadar - SysCamera, WidgetRecorder, SysAudioRecorder, SysVideoRecorder, Running - ChartScatter, VScrollPanel, HScrollPanel, Splitter, Svg, Tabular - DeletableLabel, Title1-6, Title15, Wterm - All examples use valid widgettype names registered with bricks.Factory.register - Each example demonstrates proper configuration and usage patterns
This commit is contained in:
parent
5399546114
commit
5dd8bbfc8f
25
examples/Accordion.ui
Normal file
25
examples/Accordion.ui
Normal file
@ -0,0 +1,25 @@
|
||||
{
|
||||
"widgettype": "Accordion",
|
||||
"options": {
|
||||
"items": [
|
||||
{
|
||||
"title": "面板1",
|
||||
"content": {
|
||||
"widgettype": "Text",
|
||||
"options": {
|
||||
"text": "这是面板1的内容"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"title": "面板2",
|
||||
"content": {
|
||||
"widgettype": "Text",
|
||||
"options": {
|
||||
"text": "这是面板2的内容"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
7
examples/Camera.ui
Normal file
7
examples/Camera.ui
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"widgettype": "Camera",
|
||||
"options": {
|
||||
"width": "400px",
|
||||
"height": "300px"
|
||||
}
|
||||
}
|
||||
16
examples/ChartBar.ui
Normal file
16
examples/ChartBar.ui
Normal file
@ -0,0 +1,16 @@
|
||||
{
|
||||
"widgettype": "ChartBar",
|
||||
"options": {
|
||||
"data": {
|
||||
"labels": ["一月", "二月", "三月", "四月"],
|
||||
"datasets": [
|
||||
{
|
||||
"label": "销售额",
|
||||
"data": [12, 19, 3, 5]
|
||||
}
|
||||
]
|
||||
},
|
||||
"width": "400px",
|
||||
"height": "300px"
|
||||
}
|
||||
}
|
||||
12
examples/ChartHeatmap.ui
Normal file
12
examples/ChartHeatmap.ui
Normal file
@ -0,0 +1,12 @@
|
||||
{
|
||||
"widgettype": "ChartHeatmap",
|
||||
"options": {
|
||||
"data": {
|
||||
"x_labels": ["A", "B", "C"],
|
||||
"y_labels": ["1", "2", "3"],
|
||||
"values": [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
|
||||
},
|
||||
"width": "400px",
|
||||
"height": "300px"
|
||||
}
|
||||
}
|
||||
10
examples/ChartKLine.ui
Normal file
10
examples/ChartKLine.ui
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"widgettype": "ChartKLine",
|
||||
"options": {
|
||||
"data": [
|
||||
{"time": "2026-04-21", "open": 100, "high": 110, "low": 95, "close": 105}
|
||||
],
|
||||
"width": "400px",
|
||||
"height": "300px"
|
||||
}
|
||||
}
|
||||
16
examples/ChartLine.ui
Normal file
16
examples/ChartLine.ui
Normal file
@ -0,0 +1,16 @@
|
||||
{
|
||||
"widgettype": "ChartLine",
|
||||
"options": {
|
||||
"data": {
|
||||
"labels": ["1月", "2月", "3月", "4月"],
|
||||
"datasets": [
|
||||
{
|
||||
"label": "用户增长",
|
||||
"data": [10, 25, 30, 45]
|
||||
}
|
||||
]
|
||||
},
|
||||
"width": "400px",
|
||||
"height": "300px"
|
||||
}
|
||||
}
|
||||
13
examples/ChartMap.ui
Normal file
13
examples/ChartMap.ui
Normal file
@ -0,0 +1,13 @@
|
||||
{
|
||||
"widgettype": "ChartMap",
|
||||
"options": {
|
||||
"geo_data": "china",
|
||||
"data": {
|
||||
"北京": 100,
|
||||
"上海": 85,
|
||||
"广州": 70
|
||||
},
|
||||
"width": "500px",
|
||||
"height": "400px"
|
||||
}
|
||||
}
|
||||
11
examples/ChartPie.ui
Normal file
11
examples/ChartPie.ui
Normal file
@ -0,0 +1,11 @@
|
||||
{
|
||||
"widgettype": "ChartPie",
|
||||
"options": {
|
||||
"data": {
|
||||
"labels": ["类别A", "类别B", "类别C"],
|
||||
"values": [30, 50, 20]
|
||||
},
|
||||
"width": "400px",
|
||||
"height": "300px"
|
||||
}
|
||||
}
|
||||
11
examples/ChartRadar.ui
Normal file
11
examples/ChartRadar.ui
Normal file
@ -0,0 +1,11 @@
|
||||
{
|
||||
"widgettype": "ChartRadar",
|
||||
"options": {
|
||||
"data": {
|
||||
"labels": ["速度", "力量", "敏捷", "智力", "耐力"],
|
||||
"values": [80, 60, 75, 90, 70]
|
||||
},
|
||||
"width": "400px",
|
||||
"height": "400px"
|
||||
}
|
||||
}
|
||||
15
examples/ChartScatter.ui
Normal file
15
examples/ChartScatter.ui
Normal file
@ -0,0 +1,15 @@
|
||||
{
|
||||
"widgettype": "ChartScatter",
|
||||
"options": {
|
||||
"data": {
|
||||
"datasets": [
|
||||
{
|
||||
"label": "数据点",
|
||||
"data": [{"x": 10, "y": 20}, {"x": 15, "y": 25}, {"x": 20, "y": 30}]
|
||||
}
|
||||
]
|
||||
},
|
||||
"width": "400px",
|
||||
"height": "300px"
|
||||
}
|
||||
}
|
||||
25
examples/Cols.ui
Normal file
25
examples/Cols.ui
Normal file
@ -0,0 +1,25 @@
|
||||
{
|
||||
"widgettype": "Cols",
|
||||
"options": {
|
||||
"columns": [
|
||||
{
|
||||
"width": "30%",
|
||||
"content": {
|
||||
"widgettype": "Text",
|
||||
"options": {
|
||||
"text": "左侧列"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"width": "70%",
|
||||
"content": {
|
||||
"widgettype": "Text",
|
||||
"options": {
|
||||
"text": "右侧列"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
9
examples/Conform.ui
Normal file
9
examples/Conform.ui
Normal file
@ -0,0 +1,9 @@
|
||||
{
|
||||
"widgettype": "Conform",
|
||||
"options": {
|
||||
"title": "确认对话框",
|
||||
"message": "您确定要执行此操作吗?",
|
||||
"ok_text": "确定",
|
||||
"cancel_text": "取消"
|
||||
}
|
||||
}
|
||||
7
examples/Countdown.ui
Normal file
7
examples/Countdown.ui
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"widgettype": "Countdown",
|
||||
"options": {
|
||||
"total_seconds": 60,
|
||||
"format": "剩余 {minutes}:{seconds}"
|
||||
}
|
||||
}
|
||||
8
examples/DOCXviewer.ui
Normal file
8
examples/DOCXviewer.ui
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"widgettype": "DOCXviewer",
|
||||
"options": {
|
||||
"src": "/static/sample.docx",
|
||||
"width": "600px",
|
||||
"height": "400px"
|
||||
}
|
||||
}
|
||||
7
examples/DeletableLabel.ui
Normal file
7
examples/DeletableLabel.ui
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"widgettype": "DeletableLabel",
|
||||
"options": {
|
||||
"text": "可删除标签",
|
||||
"on_delete": "handleDelete"
|
||||
}
|
||||
}
|
||||
8
examples/EXCELviewer.ui
Normal file
8
examples/EXCELviewer.ui
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"widgettype": "EXCELviewer",
|
||||
"options": {
|
||||
"src": "/static/sample.xlsx",
|
||||
"width": "600px",
|
||||
"height": "400px"
|
||||
}
|
||||
}
|
||||
7
examples/Error.ui
Normal file
7
examples/Error.ui
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"widgettype": "Error",
|
||||
"options": {
|
||||
"text": "发生了一个错误!",
|
||||
"duration": 5000
|
||||
}
|
||||
}
|
||||
16
examples/FloatIconBar.ui
Normal file
16
examples/FloatIconBar.ui
Normal file
@ -0,0 +1,16 @@
|
||||
{
|
||||
"widgettype": "FloatIconBar",
|
||||
"options": {
|
||||
"items": [
|
||||
{
|
||||
"icon": "fa fa-bell",
|
||||
"tooltip": "通知"
|
||||
},
|
||||
{
|
||||
"icon": "fa fa-envelope",
|
||||
"tooltip": "消息"
|
||||
}
|
||||
],
|
||||
"position": "bottom-right"
|
||||
}
|
||||
}
|
||||
18
examples/FloatIconTextBar.ui
Normal file
18
examples/FloatIconTextBar.ui
Normal file
@ -0,0 +1,18 @@
|
||||
{
|
||||
"widgettype": "FloatIconTextBar",
|
||||
"options": {
|
||||
"items": [
|
||||
{
|
||||
"icon": "fa fa-save",
|
||||
"text": "保存",
|
||||
"name": "save"
|
||||
},
|
||||
{
|
||||
"icon": "fa fa-print",
|
||||
"text": "打印",
|
||||
"name": "print"
|
||||
}
|
||||
],
|
||||
"position": "top-right"
|
||||
}
|
||||
}
|
||||
16
examples/HScrollPanel.ui
Normal file
16
examples/HScrollPanel.ui
Normal file
@ -0,0 +1,16 @@
|
||||
{
|
||||
"widgettype": "HScrollPanel",
|
||||
"options": {
|
||||
"width": "300px",
|
||||
"height": "100px"
|
||||
},
|
||||
"subwidgets": [
|
||||
{
|
||||
"widgettype": "HBox",
|
||||
"subwidgets": [
|
||||
{"widgettype": "Text", "options": {"text": "水平滚动内容 - "}},
|
||||
{"widgettype": "Text", "options": {"text": "水平滚动内容 - ".repeat(50)}}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
8
examples/Html.ui
Normal file
8
examples/Html.ui
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"widgettype": "Html",
|
||||
"options": {
|
||||
"html": "<h2>HTML内容</h2><p>这是嵌入的HTML内容</p>",
|
||||
"width": "400px",
|
||||
"height": "200px"
|
||||
}
|
||||
}
|
||||
8
examples/Icon.ui
Normal file
8
examples/Icon.ui
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"widgettype": "Icon",
|
||||
"options": {
|
||||
"icon": "fa fa-star",
|
||||
"size": "24px",
|
||||
"color": "#FFD700"
|
||||
}
|
||||
}
|
||||
19
examples/IconBar.ui
Normal file
19
examples/IconBar.ui
Normal file
@ -0,0 +1,19 @@
|
||||
{
|
||||
"widgettype": "IconBar",
|
||||
"options": {
|
||||
"items": [
|
||||
{
|
||||
"icon": "fa fa-home",
|
||||
"tooltip": "首页"
|
||||
},
|
||||
{
|
||||
"icon": "fa fa-user",
|
||||
"tooltip": "用户"
|
||||
},
|
||||
{
|
||||
"icon": "fa fa-cog",
|
||||
"tooltip": "设置"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
22
examples/IconTextBar.ui
Normal file
22
examples/IconTextBar.ui
Normal file
@ -0,0 +1,22 @@
|
||||
{
|
||||
"widgettype": "IconTextBar",
|
||||
"options": {
|
||||
"items": [
|
||||
{
|
||||
"icon": "fa fa-plus",
|
||||
"text": "新建",
|
||||
"name": "add"
|
||||
},
|
||||
{
|
||||
"icon": "fa fa-edit",
|
||||
"text": "编辑",
|
||||
"name": "edit"
|
||||
},
|
||||
{
|
||||
"icon": "fa fa-trash",
|
||||
"text": "删除",
|
||||
"name": "delete"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
19
examples/IconbarPage.ui
Normal file
19
examples/IconbarPage.ui
Normal file
@ -0,0 +1,19 @@
|
||||
{
|
||||
"widgettype": "IconbarPage",
|
||||
"options": {
|
||||
"title": "图标页面",
|
||||
"icon": "fa fa-dashboard",
|
||||
"items": [
|
||||
{
|
||||
"icon": "fa fa-home",
|
||||
"text": "首页",
|
||||
"url": "home.ui"
|
||||
},
|
||||
{
|
||||
"icon": "fa fa-user",
|
||||
"text": "用户",
|
||||
"url": "user.ui"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
8
examples/Iframe.ui
Normal file
8
examples/Iframe.ui
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"widgettype": "Iframe",
|
||||
"options": {
|
||||
"src": "https://example.com",
|
||||
"width": "600px",
|
||||
"height": "400px"
|
||||
}
|
||||
}
|
||||
8
examples/MdWidget.ui
Normal file
8
examples/MdWidget.ui
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"widgettype": "MdWidget",
|
||||
"options": {
|
||||
"markdown": "# 标题\n\n这是一个 **Markdown** 文档示例。\n\n- 列表项1\n- 列表项2",
|
||||
"width": "400px",
|
||||
"height": "300px"
|
||||
}
|
||||
}
|
||||
22
examples/Menu.ui
Normal file
22
examples/Menu.ui
Normal file
@ -0,0 +1,22 @@
|
||||
{
|
||||
"widgettype": "Menu",
|
||||
"options": {
|
||||
"items": [
|
||||
{
|
||||
"text": "文件",
|
||||
"submenu": [
|
||||
{"text": "新建", "action": "new"},
|
||||
{"text": "打开", "action": "open"},
|
||||
{"text": "保存", "action": "save"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"text": "编辑",
|
||||
"submenu": [
|
||||
{"text": "复制", "action": "copy"},
|
||||
{"text": "粘贴", "action": "paste"}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
8
examples/Message.ui
Normal file
8
examples/Message.ui
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"widgettype": "Message",
|
||||
"options": {
|
||||
"text": "这是一条普通消息",
|
||||
"type": "info",
|
||||
"duration": 3000
|
||||
}
|
||||
}
|
||||
12
examples/MultipleStateImage.ui
Normal file
12
examples/MultipleStateImage.ui
Normal file
@ -0,0 +1,12 @@
|
||||
{
|
||||
"widgettype": "MultipleStateImage",
|
||||
"options": {
|
||||
"states": {
|
||||
"normal": "/static/normal.png",
|
||||
"hover": "/static/hover.png",
|
||||
"active": "/static/active.png"
|
||||
},
|
||||
"width": "100px",
|
||||
"height": "100px"
|
||||
}
|
||||
}
|
||||
9
examples/NewWindow.ui
Normal file
9
examples/NewWindow.ui
Normal file
@ -0,0 +1,9 @@
|
||||
{
|
||||
"widgettype": "NewWindow",
|
||||
"options": {
|
||||
"url": "/static/external-page.html",
|
||||
"width": "800px",
|
||||
"height": "600px",
|
||||
"title": "新窗口"
|
||||
}
|
||||
}
|
||||
8
examples/PDFviewer.ui
Normal file
8
examples/PDFviewer.ui
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"widgettype": "PDFviewer",
|
||||
"options": {
|
||||
"src": "/static/sample.pdf",
|
||||
"width": "600px",
|
||||
"height": "400px"
|
||||
}
|
||||
}
|
||||
8
examples/ProgressBar.ui
Normal file
8
examples/ProgressBar.ui
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"widgettype": "ProgressBar",
|
||||
"options": {
|
||||
"value": 75,
|
||||
"max": 100,
|
||||
"width": "300px"
|
||||
}
|
||||
}
|
||||
7
examples/QRCodeScan.ui
Normal file
7
examples/QRCodeScan.ui
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"widgettype": "QRCodeScan",
|
||||
"options": {
|
||||
"width": "300px",
|
||||
"height": "300px"
|
||||
}
|
||||
}
|
||||
7
examples/Running.ui
Normal file
7
examples/Running.ui
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"widgettype": "Running",
|
||||
"options": {
|
||||
"text": "正在处理...",
|
||||
"width": "200px"
|
||||
}
|
||||
}
|
||||
22
examples/Splitter.ui
Normal file
22
examples/Splitter.ui
Normal file
@ -0,0 +1,22 @@
|
||||
{
|
||||
"widgettype": "Splitter",
|
||||
"options": {
|
||||
"orientation": "horizontal",
|
||||
"width": "500px",
|
||||
"height": "300px"
|
||||
},
|
||||
"subwidgets": [
|
||||
{
|
||||
"widgettype": "Text",
|
||||
"options": {
|
||||
"text": "左侧面板"
|
||||
}
|
||||
},
|
||||
{
|
||||
"widgettype": "Text",
|
||||
"options": {
|
||||
"text": "右侧面板"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
8
examples/Svg.ui
Normal file
8
examples/Svg.ui
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"widgettype": "Svg",
|
||||
"options": {
|
||||
"svg_content": "<svg width='200' height='200'><circle cx='100' cy='100' r='80' fill='red'/></svg>",
|
||||
"width": "200px",
|
||||
"height": "200px"
|
||||
}
|
||||
}
|
||||
7
examples/SysAudioRecorder.ui
Normal file
7
examples/SysAudioRecorder.ui
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"widgettype": "SysAudioRecorder",
|
||||
"options": {
|
||||
"width": "200px",
|
||||
"height": "80px"
|
||||
}
|
||||
}
|
||||
7
examples/SysCamera.ui
Normal file
7
examples/SysCamera.ui
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"widgettype": "SysCamera",
|
||||
"options": {
|
||||
"width": "400px",
|
||||
"height": "300px"
|
||||
}
|
||||
}
|
||||
7
examples/SysVideoRecorder.ui
Normal file
7
examples/SysVideoRecorder.ui
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"widgettype": "SysVideoRecorder",
|
||||
"options": {
|
||||
"width": "400px",
|
||||
"height": "300px"
|
||||
}
|
||||
}
|
||||
12
examples/Tabular.ui
Normal file
12
examples/Tabular.ui
Normal file
@ -0,0 +1,12 @@
|
||||
{
|
||||
"widgettype": "Tabular",
|
||||
"options": {
|
||||
"headers": ["姓名", "年龄", "城市"],
|
||||
"rows": [
|
||||
["张三", "25", "北京"],
|
||||
["李四", "30", "上海"],
|
||||
["王五", "28", "广州"]
|
||||
],
|
||||
"width": "400px"
|
||||
}
|
||||
}
|
||||
7
examples/TimePassed.ui
Normal file
7
examples/TimePassed.ui
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"widgettype": "TimePassed",
|
||||
"options": {
|
||||
"start_time": "2026-04-21T12:00:00Z",
|
||||
"format": "已运行 {days}天{hours}小时{minutes}分钟"
|
||||
}
|
||||
}
|
||||
6
examples/Title1.ui
Normal file
6
examples/Title1.ui
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"widgettype": "Title1",
|
||||
"options": {
|
||||
"text": "一级标题"
|
||||
}
|
||||
}
|
||||
6
examples/Title15.ui
Normal file
6
examples/Title15.ui
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"widgettype": "Title15",
|
||||
"options": {
|
||||
"text": "十五级标题"
|
||||
}
|
||||
}
|
||||
6
examples/Title2.ui
Normal file
6
examples/Title2.ui
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"widgettype": "Title2",
|
||||
"options": {
|
||||
"text": "二级标题"
|
||||
}
|
||||
}
|
||||
6
examples/Title3.ui
Normal file
6
examples/Title3.ui
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"widgettype": "Title3",
|
||||
"options": {
|
||||
"text": "三级标题"
|
||||
}
|
||||
}
|
||||
6
examples/Title4.ui
Normal file
6
examples/Title4.ui
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"widgettype": "Title4",
|
||||
"options": {
|
||||
"text": "四级标题"
|
||||
}
|
||||
}
|
||||
6
examples/Title6.ui
Normal file
6
examples/Title6.ui
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"widgettype": "Title6",
|
||||
"options": {
|
||||
"text": "六级标题"
|
||||
}
|
||||
}
|
||||
15
examples/VScrollPanel.ui
Normal file
15
examples/VScrollPanel.ui
Normal file
@ -0,0 +1,15 @@
|
||||
{
|
||||
"widgettype": "VScrollPanel",
|
||||
"options": {
|
||||
"width": "300px",
|
||||
"height": "200px"
|
||||
},
|
||||
"subwidgets": [
|
||||
{
|
||||
"widgettype": "Text",
|
||||
"options": {
|
||||
"text": "垂直滚动内容\n".repeat(20)
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
7
examples/WidgetRecorder.ui
Normal file
7
examples/WidgetRecorder.ui
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"widgettype": "WidgetRecorder",
|
||||
"options": {
|
||||
"width": "200px",
|
||||
"height": "100px"
|
||||
}
|
||||
}
|
||||
7
examples/Wterm.ui
Normal file
7
examples/Wterm.ui
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"widgettype": "Wterm",
|
||||
"options": {
|
||||
"width": "600px",
|
||||
"height": "400px"
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user