bricks/docs/cn/widgets.md
2025-10-12 17:59:59 +08:00

7.9 KiB
Raw Blame History

bricks控件

bricks内置许多的显示控件所有显示控件都继承自JsWidget容器控件Layout就继承自JsWidget其他的容器HBox VBox继承自Layout

基础控件

  • Form:输入表单控件 自动根据options中的fields定义构造表单目前支持的数据类型有 ** 'str' 对应的控件为: bricks.UiStr ** 'hide' 对应的控件为: bricks.UiHide ** 'tel' 对应的控件为: bricks.UiTel ** 'date' 对应的控件为: bricks.UiDate ** 'int' 对应的控件为: bricks.UiInt ** 'float' 对应的控件为: bricks.UiFloat ** 'check' 对应的控件为: bricks.UiCheck ** 'checkbox' 对应的控件为: bricks.UiCheckBox ** 'email' 对应的控件为: bricks.UiEmail ** 'file' 对应的控件为: bricks.UiFile ** 'image' 对应的控件为: bricks.UiImage ** 'code' 对应的控件为: bricks.UiCode ** 'text' 对应的控件为: bricks.UiText ** 'password' 对应的控件为: bricks.UiPassword ** 'audio' 对应的控件为: bricks.UiAudio ** 'video' 对应的控件为: bricks.UiVideo 上述控件都在输入定义

  • Accordion bricks.Accordion 手风琴控件,支持多个标题,内容组成的控件,内容和展开和折叠

  • AudioPlayer bricks.AudioPlayer 音频播放控件

  • ChartBar bricks.ChartBar 将后台数据显示为条形图表

  • Button bricks.Button 按钮控件

  • Cols bricks.Cols 列式排列控件,可动态填满父控件的宽度

  • Conform bricks.Conform 确认控件,弹出窗口显示内容,并要求用户确认

  • Countdown bricks.Countdown 时间倒计时控件,显示从还剩下的时间

  • TimePassed bricks.TimePassed 时间消耗控件,显示从开始计时开始所消耗的时间

  • DataGrid bricks.DataGrid 数据表格控件

  • DataRow bricks.DataRow 数据行控件

  • DataViewer bricks.DataViewer 数据显示控件DynamicColumn控件的后代控件

  • DOCXviewer bricks.DOCXviewer docx文件显示控件

  • EXCELviewer bricks.EXCELviewer excel文件显示控件

  • PDFviewer bricks.PDFviewer pdf显示控件

  • DynamicAccordion bricks.DynamicAccordion 动态手风琴控件

  • IconBar bricks.IconBar 图标条控件

  • IconTextBar bricks.IconTextBar 图标文本条控件

  • FloatIconBar bricks.FloatIconBar 浮动图标条,平时显示一个标识图标,点击此标识图标后显示图标条

  • FloatIconTextBar bricks.FloatIconTextBar 浮动图标正文条,平时显示一个标识图标,点击此图标后显示图标正文条

  • Html bricks.Html HTML控件直接显示html内容

  • IconbarPage bricks.IconbarPage 图标条页控件,显示图标条,不同的图标点击后显示图标对应的内容

  • NewWindow bricks.NewWindow 新浏览器页签或窗口控件浏览器创建新的窗口或页签显示url的内容

  • Iframe bricks.Iframe Iframe控件用于显示外部网站内容

  • Image bricks.Image 图像控件

  • StatedIcon bricks.StatedIcon 多站台图标,点击后状态改变,支持多个状态,并发出状态改变事件

  • Icon bricks.Icon 图标控件支持多种图像格式url

  • BlankIcon bricks.BlankIcon 空白图标占位控件

  • ChartLine bricks.ChartLine

  • LlmIO bricks.LlmIO

  • LlmOut bricks.LlmOut

  • MarkdownViewer bricks.MarkdownViewer

  • MdWidget bricks.MdWidget

  • Menu bricks.Menu

  • Message bricks.Message

  • Error bricks.Error

  • MultipleStateImage bricks.MultipleStateImage 多状态图像控件

  • PeriodDays bricks.PeriodDays 日期期间控件,自动计算时间段的起始日期

  • ChartPie bricks.ChartPie 饼图控件基于echrts

  • ProgressBar bricks.ProgressBar 进度条控件

  • SysCamera bricks.SysCamera 照相控件,可拍摄照片

  • WidgetRecorder bricks.WidgetRecorder 控件视频录制控件,可录制浏览器播放的视频

  • SysAudioRecorder bricks.SysAudioRecorder 浏览器音频录制控件,用来录制音频

  • SysVideoRecorder bricks.SysVideoRecorder 浏览器视频录制控件,用来录制视频

  • Running bricks.Running 运行图标控件modal模式显示正在运行相关控件不可操作需要在完成 任务后dismiss它

  • Splitter bricks.Splitter 分割器控件,显示水平或垂直分割线

  • Svg bricks.Svg Svg图标控件

  • StatedSvg bricks.StatedSvg 带状态的svg图标控件不同状态显示不同的图标

  • MultipleStateIcon bricks.MultipleStateIcon 多状态图标控件

  • TabPanel bricks.TabPanel 页签控件

  • Tabular bricks.Tabular 数据列表形式的数据维护控件,支持数据的显示,增加,修改和删除

xls2ddl工具能根据数据表结构自动生成数据Tabular控件以及相关的数据维护dspy

  • Toolbar bricks.Toolbar 工具条控件
  • Tree bricks.Tree 树形控件
  • VadText bricks.VadText 自动捕获语音并将捕获的语音发送给服务器
  • VideoPlayer bricks.VideoPlayer

视频播放控件支持浏览器支持的视频格式外还支持m3u8流媒体和Dash流媒体, bricks已在3parties目录中包含了所依赖的hls和dash包

  • Video bricks.VideoPlayer 视频播放控件同VideoPlayer
  • WebSocket bricks.WebSocket

支持websocket

  • WebTTS bricks.WebTTS 为完成控件,浏览器内置文本转语音能力
  • WebASR bricks.WebASR 未完成控件,浏览器内部的语音识别能力
  • Tooltip bricks.Tooltip

Tooltip控件不直接创建而是在控件中添加“tip":"提示字符串“属性为控件添加Tooltip控件

文本控件

第一号标题

第二号标题

第三号标题

第四号标题

第五号标题

第六号标题

xterm.js在bricks中的实现

容器类控件

  • VScrollPanel bricks.VScrollPanel 垂直滚动容器,需要设置固定的高度或占满全部父容器高度

  • HScrollPanel bricks.HScrollPanel 水平滚动容器,需要设置固定的宽度或占满全部父容器宽度

  • Popup bricks.Popup 弹出容器,置于当前全部控件最上面

  • PopupWindow bricks.PopupWindow 弹出窗口,置于当前全部控件最上面

  • HBox bricks.HBox 水平扩展容器,全部子控件水平排放

  • VBox bricks.VBox 垂直扩展容器,全部子控件垂直排放

  • Filler bricks.Filler 占满父容器剩余控件如果父容器有多个Filler控件则平均分配剩余控件Filler容器下可添加子控件

  • DynamicColumn bricks.DynamicColumn 子控件需要设置固定宽度,动态从左到右,从上到下排列子控件

  • ResponsableBox bricks.ResponsableBox 自适应容器,当宽度大则水平排列子控件,而高度大时则水平排列子控件, 并能根据宽高变化自动改变。

  • Modal bricks.Modal modal容器