53 lines
2.9 KiB
Markdown
53 lines
2.9 KiB
Markdown
# MiniForm
|
||
|
||
**コントロール機能**：MiniFormは軽量なフォームコントロールであり、複数のフィールド入力項目を動的に表示・切り替えできます。ユーザーはドロップダウンセレクタから異なるフィールドを選択でき、選択に応じて対応する入力コンポーネントが動的にレンダリングされます。また、リアルタイムでの入力イベントの監視やデータの統合もサポートしています。
|
||
|
||
**タイプ**：通常コントロール
|
||
**親クラスコントロール**：`bricks.HBox`
|
||
|
||
## 初期化パラメータ
|
||
|
||
| パラメータ名 | 型 | 説明 |
|
||
|------------|----|------|
|
||
| `defaultname` | String | 既定で選択されるフィールド名。未設定の場合、`fields` 配列の最初のフィールドの `name` が使用されます。 |
|
||
| `label_width` | String | （オプション）ラベル列の幅。例：`'80px'`。内部実装でこのパラメータを使用するかどうかにより動作が異なります。 |
|
||
| `input_width` | String | （オプション）入力欄領域の幅。例：`'150px'`。こちらも子コントロールの実際の使用状況によって決まります。 |
|
||
| `params` | Object | （オプション）追加のデフォルトパラメータ。`getValue()` を呼び出す際に出力値にマージされます。 |
|
||
| `fields` | Array\\<Object\\> | フィールド定義の配列。各オブジェクトは選択可能なフィールドを表し、以下のサブプロパティを持ちます：<br>- `name`: フィールドの一意識別子（String）<br>- `label`: 表示名（String）<br>- `icon`: （オプション）アイコンのクラス名またはパス<br>- `uitype`: 入力コントロールの種類（例：`"text"`、`"code"`、`"select"`など）<br>- `uiparams`: 当該フィールドに対応する入力コントロールに渡す追加設定パラメータ |
|
||
|
||
> 例：
|
||
> ```js
|
||
> {
|
||
> defaultname: "username",
|
||
> label_width: "100px",
|
||
> input_width: "200px",
|
||
> params: { appId: "123" },
|
||
> fields: [
|
||
> {
|
||
> name: "username",
|
||
> label: "ユーザー名",
|
||
> uitype: "text",
|
||
> uiparams: { placeholder: "ユーザー名を入力してください" }
|
||
> },
|
||
> {
|
||
> name: "password",
|
||
> label: "パスワード",
|
||
> uitype: "password",
|
||
> uiparams: { placeholder: "パスワードを入力してください" }
|
||
> }
|
||
> ]
|
||
> }
|
||
> ```
|
||
|
||
## 主要イベント
|
||
|
||
| イベント名 | 発生条件 | 持続データ |
|
||
|----------|---------|----------|
|
||
| `input` | 現在アクティブな入力コントロールで入力内容が変更されたときに発生 | `params` のデータと、現在の入力コントロールの値（`getValue()` で取得）を含むオブジェクトを返します。 |
|
||
|
||
> 使用例：
|
||
> ```js
|
||
> miniFormInstance.bind('input', function(data) {
|
||
> console.log('現在のフォーム値:', data);
|
||
> });
|
||
> ``` |