bricks/docs/ja/widgets.md

bricks コンポーネント

bricks は多数の表示コンポーネントを内蔵しており、すべての表示コンポーネントは JsWidget を継承しています。コンテナコンポーネントである Layout も JsWidget を継承しており、その他のコンテナ HBox や VBox は Layout を継承しています。

基本コンポーネント

• Form：入力フォームコンポーネント
  options の fields 内の各フィールドの uitype 値に基づいて自動的にフォーム項目を生成します。現在サポートされている uitype 属性のデータ型は以下の通りです：

  • '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 コンテンツを直接表示するコンポーネント。

• 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
  LLM 入出力統合コンポーネント。

• LlmOut bricks.LlmOut
  LLM 出力専用コンポーネント。

• MarkdownViewer bricks.MarkdownViewer
  Markdown ファイルを表示するコンポーネント。

• MdWidget bricks.MdWidget
  Markdown 形式のコンテンツを表示するウィジェット。

• Menu bricks.Menu
  メニュー構造を持つコンポーネント。

• Message bricks.Message
  メッセージ表示コンポーネント。

• Error bricks.Error
  エラーメッセージ表示コンポーネント。

• MultipleStateImage bricks.MultipleStateImage
  複数の状態を持つ画像コンポーネント。

• PeriodDays bricks.PeriodDays
  期間選択コンポーネント。期間の開始日を自動計算します。

• ChartPie bricks.ChartPie
  円グラフコンポーネント（echarts 基盤）。

• ProgressBar bricks.ProgressBar
  プログレスバー表示コンポーネント。

• SysCamera bricks.SysCamera
  写真撮影機能を持つカメラコンポーネント。

• WidgetRecorder bricks.WidgetRecorder
  ブラウザ上で再生される動画を録画するコンポーネント。

• SysAudioRecorder bricks.SysAudioRecorder
  ブラウザ内で音声を録音するコンポーネント。

• SysVideoRecorder bricks.SysVideoRecorder
  ブラウザ内で動画を録画するコンポーネント。

• Running bricks.Running
  実行中アイコンコンポーネント。モーダル形式で「処理中」を表示し、関連コンポーネントの操作を一時的に無効化します。処理完了後に 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
  未完成コンポーネント。ブラウザ内蔵のテキスト読み上げ（TTS）機能を利用します。

• WebASR bricks.WebASR
  未完成コンポーネント。ブラウザ内蔵の音声認識（ASR）機能を利用します。

• Tooltip bricks.Tooltip
  ツールチップコンポーネント。直接作成せず、コンポーネントに "tip": "ヒント文字列" の属性を追加することで適用されます。

• Text bricks.Text
  テキスト表示コンポーネント。

• Title1 bricks.Title1
  見出しレベル1。

• Title2 bricks.Title2
  見出しレベル2。

• Title3 bricks.Title3
  見出しレベル3。

• Title4 bricks.Title4
  見出しレベル4。

• Title5 bricks.Title5
  見出しレベル5。

• Title6 bricks.Title6
  見出しレベル6。

• Wterm bricks.Wterm
  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
  モーダルコンテナ。