bricks/docs/ja/input.md
2025-11-19 12:30:39 +08:00

14 KiB
Raw Blame History

UiType

コントロール機能:すべての入力コントロールの基底クラス。共通の値取得、設定、リセット、無効化などのメソッドを提供します。
タイプ:通常コントロール
親クラスコントロールbricks.Layout

初期化パラメータ

パラメータ 説明
name string コントロール名(必須)
value / defaultvalue any デフォルト値
required boolean 必須項目かどうか。デフォルトは false

主なイベント

  • changed:コントロールの値が変更されたときに発生。現在のコントロールのキーと値のペアデータを含みます。
  • blur:フォーカスを失ったときに発生する可能性があります(サブクラスで実装されます)。

UiHide

コントロール機能非表示フィールドコントロール。表示されないデータを格納するために使用され、DOM 上では display: none として表示されます。
タイプ:通常コントロール
親クラスコントロールUiType

初期化パラメータ

UiType から継承。追加のパラメータはありません。

主なイベント

  • changed:値が変更されたときに発生。

UiStr

コントロール機能:単一行テキスト入力ボックス。テキストの配置、文字数制限、プレースホルダーなどの機能をサポートします。
タイプ:通常コントロール
親クラスコントロールUiType

初期化パラメータ

パラメータ 説明
align string テキストの配置方法:left, center, right
length number 最大文字数maxlength
minlength number 最小文字数minlength
tip string ヒント情報(未使用)
width string 入力ボックスの幅(例:'200px'
readonly string/boolean 読み取り専用かどうか
required boolean 必須項目かどうか
placeholder string プレースホルダーテキスト(国際化対応)
css string カスタムCSSクラス名
dynsize boolean フォントサイズを動的に調整するか。デフォルトは true
cfontsize number フォントサイズの拡大縮小比率

主なイベント

  • focus:フォーカスを得たときに発生。
  • blur:フォーカスを失ったときに発生。
  • changed:入力内容が変更され、正規表現による検証を通過した後に発生。
  • keydownEnterキー押下時にblurイベントを発生。

UiPassword

コントロール機能:パスワード入力ボックス。UiStr を継承し、入力内容はマスク表示されます。
タイプ:通常コントロール
親クラスコントロールUiStr

初期化パラメータ

UiStr と同じ。

主なイベント

UiStr と同じ。


UiInt

コントロール機能:整数入力ボックス。数字のみの入力を自動制限。右揃えで表示されます。
タイプ:通常コントロール
親クラスコントロールUiStr

初期化パラメータ

パラメータ 説明
length number 入力最大桁数(任意)

主なイベント

  • changed:有効な整数が入力されたときに発生。
  • 値は常に整数形式で返される(parseInt を呼び出す)。

UiFloat

コントロール機能:浮動小数点数入力ボックス。小数点以下の桁数制御およびステップ値の設定をサポートします。
タイプ:通常コントロール
親クラスコントロールUiInt

初期化パラメータ

パラメータ 説明
dec_len number 小数点以下に保持する桁数。デフォルトは2

主なイベント

  • changed:有効な浮動小数点数が入力されたときに発生。
  • 返り値は parseFloat(this.value) になります。

UiTel

コントロール機能:電話番号入力ボックス。<input type="tel"> を使用。カスタム pattern の設定に対応。
タイプ:通常コントロール
親クラスコントロールUiStr

初期化パラメータ

パラメータ 説明
pattern string 正規表現文字列。入力フォーマットの検証に使用

主なイベント

  • changed:入力が pattern に一致した場合に発生。

UiEmail

コントロール機能:メールアドレス入力ボックス。<input type="email"> を使用。カスタム pattern の追加設定も可能。
タイプ:通常コントロール
親クラスコントロールUiStr

初期化パラメータ

パラメータ 説明
pattern string オプションのカスタム正規表現による検証ルール

主なイベント

  • changed:有効なメールアドレス形式が入力されたときに発生。

UiFile

コントロール機能:ファイルアップロードコントロール。ドラッグ&ドロップアップロード、クリックでのファイル選択をサポート。ファイルタイプの制限および複数選択の可否を設定可能。
タイプ:コンテナコントロール
親クラスコントロールVBox

初期化パラメータ

パラメータ 説明
accept string 受け入れるMIMEタイプの接頭辞。例'image/', 'audio/'
multiple boolean 複数ファイルのアップロードを許可するか
width string コンテナの幅。デフォルトは '100%'

主なイベント

  • dragenter / dragover / dragleave / drop:ドラッグ関連イベント。ハイライト表示やファイル受信処理に使用。
  • changed:ファイルを選択またはドラッグインした後に発生。ファイルオブジェクトまたは配列を渡す。
  • input:ネイティブの input change イベントリスナー。

UiImage

コントロール機能:画像アップロードコントロール。ドラッグ・クリックでのアップロード、カメラ撮影ボタンをサポート。アップロード後は画像のプレビューが可能。
タイプ:コンテナコントロール
親クラスコントロールUiFile

初期化パラメータ

UiFile と同じ。デフォルトで accept='image/'

主なイベント

  • changedファイル選択または撮影完了後に発生。File オブジェクトを付与。
  • shot:撮影完了イベント。SysCamera によって発行され、キャッチされる。

UiAudio

コントロール機能:音声アップロードコントロール。録音機能(マイク)をサポート。アップロード後は再生によるプレビューが可能。
タイプ:コンテナコントロール
親クラスコントロールUiFile

初期化パラメータ

UiFile と同じ。デフォルトで accept='audio/'

主なイベント

  • changed:ファイル選択または録音完了後に発生。
  • record_end:録音終了イベント。SysAudioRecorder によって発行される。

UiVideo

コントロール機能:動画アップロードコントロール。動画録画機能(カメラ)をサポート。アップロード後は再生によるプレビューが可能。
タイプ:コンテナコントロール
親クラスコントロールUiFile

初期化パラメータ

UiFile と同じ。デフォルトで accept='video/'

主なイベント

  • changed:ファイル選択または録画完了後に発生。
  • record_end:録画終了イベント。SysVideoRecorder によって発行される。

UiCheck

コントロール機能チェックボックスコントロール視覚的にはアイコンの切り替え。ブール状態true/falseを表す。
タイプ:通常コントロール
親クラスコントロールUiType

初期化パラメータ

パラメータ 説明
value boolean 初期状態で選択されているかどうか

主なイベント

  • changed:状態が切り替わったときに発生。{name: true/false} 形式のデータを送信。
  • state_changed:アイコンの状態変更イベント(MultipleStateIcon から発行)。

UiCheckBox

コントロール機能:複数選択/単一選択グループコントロール。データに基づいて複数の UiCheck テキストラベルを生成。静的データまたはリモートからの読み込みに対応。
タイプ:コンテナコントロール
親クラスコントロールUiType

初期化パラメータ

パラメータ 説明
label string グループタイトル
data array 静的なオプションリスト [ {text:'', value:''} ]
dataurl string リモートデータのURL
method string リクエスト方式。デフォルトは GET
params object リクエストパラメータ
textField string 表示フィールド名。デフォルトは 'text'
valueField string 値フィールド名。デフォルトは 'value'
value / defaultValue string/array デフォルト選択値(単一選択は文字列、複数選択は配列)

注:multicheck 属性が存在し真の場合、複数選択モードとなります。

主なイベント

  • changed:いずれかのオプションの状態が変化したときに発生。{name: selectedValue(s)} を送信。
  • 内部で UiCheckchanged イベントをバインドし、値の更新を行う。

UiDate

コントロール機能:日付選択コントロール。ネイティブの <input type="date"> を使用。最小・最大日付の制限をサポート。
タイプ:通常コントロール
親クラスコントロールUiStr

初期化パラメータ

パラメータ 説明
max_date string 許容される最大日付形式YYYY-MM-DD
min_date string 許容される最小日付形式YYYY-MM-DD

主なイベント

  • changed:日付が変更されたときに発生。
  • blur / focus:フォーカスイベントは親クラスによりサポート。

UiText

コントロール機能複数行テキストエリアtextarea。Tabによるインデント、Enterによる改行、フォントサイズの動的適応をサポート。
タイプ:通常コントロール
親クラスコントロールUiType

初期化パラメータ

パラメータ 説明
rows number 行数。デフォルトは5
cols number 列数。デフォルトは40
readonly boolean 読み取り専用かどうか
required boolean 必須項目かどうか
value / defaultvalue string デフォルトのテキスト内容

主なイベント

  • input:内容が変更されたときに内部値を更新。
  • keydownTabキーとEnterキーをインターセプトし、スマートインデントと改行を実現。
  • changed:内容が変更されたときに手動で発行。

UiCode

コントロール機能:ドロップダウン選択ボックス(<select>)。コードテーブル選択に使用。ローカルデータまたは非同期読み込みに対応。
タイプ:通常コントロール
親クラスコントロールUiType

初期化パラメータ

パラメータ 説明
data array 静的なオプションデータ [ {text:'', value:''} ]
dataurl string オプションを非同期取得するAPIアドレス
method string リクエストメソッド。デフォルトはGET
params object リクエストパラメータ
textField string 表示フィールド名。デフォルトは 'text'
valueField string 値フィールド名。デフォルトは 'value'
nullable boolean 空の選択肢を許可するか(先頭に空項目を追加)
value / defaultvalue string デフォルト選択値

主なイベント

  • input:選択項目が変更されたときに発生。値を更新し、changed を発行。
  • changed:値が変更された後、外部へ通知。
  • 外部イベントによるデータの再読み込みをサポート(例:連動フィルタリングなど)。

UiSearch

コントロール機能:検索選択コントロール。アイコンクリックでポップアップウィンドウを開き、テーブルから選択できるようにします。関連検索によく使用されます。
タイプ:コンテナコントロール
親クラスコントロールHBox

初期化パラメータ

パラメータ 説明
search_url string ポップアップ内に読み込むページのURL
valueField string 戻り値に対応するフィールド名
textField string 表示テキストに対応するフィールド名
popup_options object ポップアップの設定パラメータ
value string 初期値
text string 初期表示テキスト

主なイベント

  • アイコンの click:検索ポップアップを開く。
  • changed:ポップアップ内でレコードを選択した後に発生。選択された値を返す。
  • dismiss:ポップアップを閉じたときのイベント。