6.5 KiB
IconBar
コントロール機能：複数のクリック可能なSVGアイコンボタンを含むアイコンツールバーを作成。選択状態のサポートおよびイベント発行に対応。
タイプ：コンテナーコントロール
親クラスコントロール：bricks.HBox
初期化パラメータ
| パラメータ名 | 型 | 説明 |
|---|---|---|
opts.cheight |
Number | 子コントロールの高さ（文字単位）。デフォルト値は 2 |
opts.rate |
Number | 拡大縮小率。アイコンサイズに影響を与える。デフォルト値は 1 |
opts.margin |
String | アイコン間の左右マージン。CSS形式（例：'10px'） |
opts.tools |
Array | ツール項目の配列。各ツール項目は以下のフィールドを持つオブジェクト： - name: ツール名（識別およびイベント用）- icon: SVGアイコンのURL- rate: 当該アイコンの拡大縮小率（任意）- dynsize: サイズを動的に調整するかどうか（真偽値）- tip: ツールチップテキスト（任意） |
cheightまたはrateが指定されていない場合、自動的にデフォルト値が設定されます。
主なイベント
| イベント名 | 発火条件 | 持たされるデータ |
|---|---|---|
desc.name（すなわち tools[i].name） |
アイコンがクリックされたときに発火。イベント名はそのアイコンの name フィールド |
対応するアイコンの desc オブジェクトを渡す |
command |
全てのアイコンクリックで発火する共通イベント | 現在のアイコンの desc オブジェクトを渡す |
イベントは
dispatchによって発行され、外部から特定のコマンドや汎用操作を監視するために使用可能。
IconTextBar
コントロール機能：IconBar を拡張し、各ツール項目が「アイコン＋テキスト」の組み合わせで表示される。ラベル付き説明が必要なツールバーに適している。
タイプ：コンテナーコントロール
親クラスコントロール：bricks.IconBar
初期化パラメータ
IconBar のすべてのパラメータを継承し、tools 配列内の各項目のサポートを強化：
| パラメータ名 | 型 | 説明 |
|---|---|---|
opts.tools[i].label |
String | アイコン横に表示されるテキストラベル |
opts.tools[i].tip |
String | マウスホバー時のツールチップテキスト。アイコンとテキストを含む全体のコンテナに適用される |
その他のパラメータ（IconBar と同じ） |
—— | name, icon, rate, dynsize などをサポート |
各ツール項目は水平レイアウト（
HBox）として構築され、内部には順にSvgおよびTextコントロールが追加される。
主なイベント
IconBar と完全に一致：
| イベント名 | 発火条件 | 持たされるデータ |
|---|---|---|
desc.name |
特定の項目がクリックされたときに発火。イベント名はその name フィールド |
対応する desc オブジェクト |
command |
全てのクリックで発火する共通イベント | 現在の項目の desc オブジェクト |
イベントは全体の
HBoxにバインドされており、アイコンまたはテキストのいずれかをクリックしても発火する。
FloatIconBar
コントロール機能：フローティング式のアイコンツールバー。初期状態では「外側に飛び出すアイコン」のみ表示され、マウスカーソルを乗せると完全な IconBar が展開される。サイドバーのフロートツールバーなどに使用される。
タイプ：コンテナーコントロール
親クラスコントロール：bricks.HBox
初期化パラメータ
| パラメータ名 | 型 | 説明 |
|---|---|---|
opts |
Object | 内部の IconBar に渡される設定オブジェクト。構造は IconBar の opts.tools などと同じ |
内部で bricks_resource('imgs/float-out.png') を使用 |
—— | 固定のフロート展開ボタンアイコン |
実際のツール項目は渡された
optsにより内部のIconBarが構築される。
主なイベント
内部の IconBar と一致：
| イベント名 | 発火条件 | 持たされるデータ |
|---|---|---|
desc.name |
展開後に特定のアイコンがクリックされたとき発火 | 対応するアイコンの desc オブジェクト |
command |
全てのアイコンクリックで発火 | 現在のアイコンの desc オブジェクト |
イベントは内蔵された
IconBarインスタンスから発行され、自動的に透過される。
さらに以下の動作イベントも存在：
mousemove：フロートアイコン上で発火し、メニューを展開- ページ上の任意の位置での
click：メニューを折りたたむ（bricks.Bodyのリスニングにより実現）
FloatIconTextBar
コントロール機能：フローティング式の「アイコン＋テキスト」ツールバー。FloatIconBar の拡張版であり、展開後に文字ラベル付きのツール項目を表示する。
タイプ：コンテナーコントロール
親クラスコントロール：bricks.FloatIconBar
初期化パラメータ
FloatIconBar と同じ：
| パラメータ名 | 型 | 説明 |
|---|---|---|
opts |
Object | tools 配列およびその他の設定を含み、内部で IconTextBar を構築する際に使用 |
内部では
build_bar(opts)を呼び出してIconTextBarインスタンスを作成するため、label、tipなどのテキスト関連属性をサポート。
主なイベント
IconTextBar と一致：
| イベント名 | 発火条件 | 持たされるデータ |
|---|---|---|
desc.name |
展開後に特定の項目がクリックされたとき発火 | 当該項目の desc オブジェクト |
command |
全てのクリックで発火 | 現在の項目の desc オブジェクト |
全てのイベントは内部の
IconTextBarインスタンスから発行され、自動的に上位へバブルアップする。