35 lines
2.9 KiB
Markdown
35 lines
2.9 KiB
Markdown
# Button
|
||
|
||
**コントロール機能**：クリック可能なボタンコントロールで、アイコン、テキストラベル、カスタムアクションの応答をサポートしています。イベントの発生や操作の実行に広く使用されます。
|
||
**タイプ**：通常コントロール
|
||
**親クラスコントロール**：`bricks.Layout`
|
||
|
||
## 初期化パラメータ
|
||
|
||
| パラメータ名 | 型 | 説明 |
|
||
|------------|----|------|
|
||
| `orientation` | string | レイアウト方向。選択肢は `'horizontal'` または垂直（デフォルトは垂直）。内部要素の配置方法に影響します。 |
|
||
| `height` | string | コントロールの高さ。デフォルトは `100%`。 |
|
||
| `width` | string | コントロールの幅。デフォルトは `100%`。 |
|
||
| `item_rate` | number | アイコンとテキストのサイズスケーリング比率。デフォルトは `1`。 |
|
||
| `tooltip` | string | マウスホバー時に表示されるヒントテキスト。 |
|
||
| `color` | string | テキストの色。CSSカラーバリュー。 |
|
||
| `bgcolor` | string | 背景色。CSSカラーバリュー。 |
|
||
| `nonepack` | boolean | 内余白（padding）と枠線（border）を削除するかどうか。`true` の場合、`padding: 0` および `border: 0` が設定されます。 |
|
||
| `name` | string | コントロールの一意な識別名称。DOM要素のIDを設定するために使用されます。 |
|
||
| `icon` | string | アイコンリソースのURL。指定された場合、ボタン内に `Icon` コントロールが作成され表示されます。 |
|
||
| `label` | string | ボタン上に表示されるテキストラベルの内容。 |
|
||
| `css` | object | カスタムCSSスタイルオブジェクト。ボタンのスタイルにマージされます。 |
|
||
| `action` | object | ボタンクリック時にトリガーされるアクションの設定。以下のサブプロパティを含みます：<br> - `target`: 目標コンポーネント／パス<br> - `datawidget`: データソースコントロール<br> - `datamethod`: データ取得メソッド名<br> - `datascript`: カスタムスクリプトロジック<br> - `dataparams`: アクションに渡すパラメータ<br> - `rtdata`: データをリアルタイムで取得するかどうか<br> - `actiontype`: アクションの種類（例：画面遷移、送信など） |
|
||
|
||
## 主なイベント
|
||
|
||
- **`click`**
|
||
ボタンがクリックされたときに発火します。イベントコールバックは `opts` 設定オブジェクトを引数として受け取ります。
|
||
発火タイミング：ユーザーがボタン（アイコンまたはテキスト部分を含む）をクリックした後、`target_clicked` メソッドが呼び出される際に発行されます。
|
||
イベントリスナーの例：
|
||
```js
|
||
button.bind('click', function(opts) {
|
||
console.log('Button clicked with options:', opts);
|
||
});
|
||
``` |