bricks/docs/en/widgets.md

Bricks Widgets

Bricks includes a wide range of built-in display widgets. All display widgets inherit from JsWidget. The container widget Layout inherits from JsWidget, and other containers such as HBox and VBox inherit from Layout.

Basic Widgets

• Form: Input form widget
  Automatically generates form input fields based on the uitype values of fields defined in options. Currently supported uitype data types include:
  • 'str' → Widget: bricks.UiStr
  • 'hide' → Widget: bricks.UiHide
  • 'tel' → Widget: bricks.UiTel
  • 'date' → Widget: bricks.UiDate
  • 'int' → Widget: bricks.UiInt
  • 'float' → Widget: bricks.UiFloat
  • 'check' → Widget: bricks.UiCheck
  • 'checkbox' → Widget: bricks.UiCheckBox
  • 'email' → Widget: bricks.UiEmail
  • 'file' → Widget: bricks.UiFile
  • 'image' → Widget: bricks.UiImage
  • 'code' → Widget: bricks.UiCode
  • 'text' → Widget: bricks.UiText
  • 'password' → Widget: bricks.UiPassword
  • 'audio' → Widget: bricks.UiAudio
  • 'video' → Widget: bricks.UiVideo

These widgets are registered as input field components in the input definition.

• Accordion bricks.Accordion
  Accordion widget supporting multiple title-content sections with expand/collapse functionality.

• AudioPlayer bricks.AudioPlayer
  Audio playback widget.

• ChartBar bricks.ChartBar
  Displays backend data as bar charts.

• Button bricks.Button
  Button widget.

• Cols bricks.Cols
  Column layout widget that dynamically fills the parent's width.

• Conform bricks.Conform
  Confirmation widget; displays content in a pop-up window and requires user confirmation.

• Countdown bricks.Countdown
  Countdown timer widget showing remaining time.

• TimePassed bricks.TimePassed
  Elapsed time widget showing time consumed since starting the timer.

• DataGrid bricks.DataGrid
  Data table widget.

• DataRow bricks.DataRow
  Data row widget.

• DataViewer bricks.DataViewer
  Data display widget, descendant of the DynamicColumn widget.

• DOCXviewer bricks.DOCXviewer
  DOCX file viewer widget.

• EXCELviewer bricks.EXCELviewer
  Excel file viewer widget.

• PDFviewer bricks.PDFviewer
  PDF viewer widget.

• DynamicAccordion bricks.DynamicAccordion
  Dynamic accordion widget.

• IconBar bricks.IconBar
  Icon bar widget.

• IconTextBar bricks.IconTextBar
  Icon-text bar widget.

• FloatIconBar bricks.FloatIconBar
  Floating icon bar; normally shows a marker icon, which when clicked expands into a full icon bar.

• FloatIconTextBar bricks.FloatIconTextBar
  Floating icon-text bar; normally shows a marker icon, which when clicked expands into a full icon-text bar.

• Html bricks.Html
  HTML widget for directly displaying HTML content.

• IconbarPage bricks.IconbarPage
  Icon-bar page widget; displays an icon bar where clicking different icons shows corresponding content.

• NewWindow bricks.NewWindow
  New browser tab or window widget; opens a new browser window or tab to display URL content.

• Iframe bricks.Iframe
  Iframe widget used to display external website content.

• Image bricks.Image
  Image widget.

• StatedIcon bricks.StatedIcon
  Multi-state icon; changes state upon click, supports multiple states, and emits state-change events.

• Icon bricks.Icon
  Icon widget supporting various image format URLs.

• BlankIcon bricks.BlankIcon
  Blank placeholder icon widget.

• ChartLine bricks.ChartLine
  Line chart widget.

• LlmIO bricks.LlmIO
  LLM input/output interface widget.

• LlmOut bricks.LlmOut
  LLM output-only widget.

• MarkdownViewer bricks.MarkdownViewer
  Markdown file viewer widget.

• MdWidget bricks.MdWidget
  Markdown rendering widget.

• Menu bricks.Menu
  Menu widget.

• Message bricks.Message
  Message notification widget.

• Error bricks.Error
  Error message widget.

• MultipleStateImage bricks.MultipleStateImage
  Multi-state image widget.

• PeriodDays bricks.PeriodDays
  Date period widget; automatically calculates start and end dates of a time span.

• ChartPie bricks.ChartPie
  Pie chart widget based on ECharts.

• ProgressBar bricks.ProgressBar
  Progress bar widget.

• SysCamera bricks.SysCamera
  Camera widget for taking photos.

• WidgetRecorder bricks.WidgetRecorder
  Widget video recorder; records videos played within the browser.

• SysAudioRecorder bricks.SysAudioRecorder
  Browser audio recorder for capturing audio.

• SysVideoRecorder bricks.SysVideoRecorder
  Browser video recorder for capturing video.

• Running bricks.Running
  Running indicator widget; displayed modally to indicate ongoing processes, disabling interaction with other widgets until dismissed after task completion.

• Splitter bricks.Splitter
  Splitter widget for rendering horizontal or vertical divider lines.

• Svg bricks.Svg
  SVG icon widget.

• StatedSvg bricks.StatedSvg
  Stateful SVG icon widget; displays different icons based on current state.

• MultipleStateIcon bricks.MultipleStateIcon
  Multi-state icon widget.

• TabPanel bricks.TabPanel
  Tabbed panel widget.

• Tabular bricks.Tabular
  Data list widget for data management, supporting display, addition, modification, and deletion of data entries.

The xls2ddl tool can automatically generate Tabular data widgets and related data maintenance DSPy code from database table structures.

• Toolbar bricks.Toolbar
  Toolbar widget.

• Tree bricks.Tree
  Tree structure widget.

• VadText bricks.VadText
  Automatically captures speech and sends it to the server.

• VideoPlayer bricks.VideoPlayer
  Video player widget supporting all standard browser-supported formats, plus M3U8 and Dash streaming protocols.
  Bricks includes required HLS and Dash libraries in the 3parties directory.

• Video bricks.VideoPlayer
  Video playback widget (same as VideoPlayer).

• WebSocket bricks.WebSocket
  Supports WebSocket communication.

• WebTTS bricks.WebTTS
  Incomplete widget; provides browser-native text-to-speech capability.

• WebASR bricks.WebASR
  Incomplete widget; uses browser-native speech recognition capability.

• Tooltip bricks.Tooltip
  Tooltip widget; not created directly. Added by including the attribute "tip": "tooltip text" on any widget to attach a tooltip.

• Text bricks.Text
  Text widget.

• Title1 bricks.Title1
  Heading level 1.

• Title2 bricks.Title2
  Heading level 2.

• Title3 bricks.Title3
  Heading level 3.

• Title4 bricks.Title4
  Heading level 4.

• Title5 bricks.Title5
  Heading level 5.

• Title6 bricks.Title6
  Heading level 6.

• Wterm bricks.Wterm
  Implementation of xterm.js within bricks.

Container Widgets

• VScrollPanel bricks.VScrollPanel
  Vertical scrollable container; requires fixed height or must fill the entire height of its parent container.

• HScrollPanel bricks.HScrollPanel
  Horizontal scrollable container; requires fixed width or must fill the entire width of its parent container.

• Popup bricks.Popup
  Popup container positioned above all other widgets.

• PopupWindow bricks.PopupWindow
  Popup window positioned above all other widgets.

• HBox bricks.HBox
  Horizontal layout container; arranges all child widgets horizontally.

• VBox bricks.VBox
  Vertical layout container; arranges all child widgets vertically.

• Filler bricks.Filler
  Fills the remaining space in the parent container. If multiple Filler widgets exist, they equally share the leftover space. Child widgets can be added inside a Filler.

• DynamicColumn bricks.DynamicColumn
  Child widgets require fixed widths; arranged dynamically from left to right, top to bottom.

• ResponsableBox bricks.ResponsableBox
  Responsive container; lays out child widgets horizontally when width is sufficient, vertically when height dominates, adapting automatically to size changes.

• Modal bricks.Modal
  Modal container.