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

2.4 KiB
Raw Permalink Blame History

IconbarPage

コントロール機能アイコンツールバー付きのページコンテナ。アイコンツールバーIconTextBarを上部または下部に配置でき、ツールアイテムをクリックすることで、対応するコンテンツコンポーネントを動的に読み込み表示します。
タイプ:コンテナコントロール
親クラスbricks.VBox

初期化パラメータ

  • opts:設定オブジェクト。以下のプロパティを含みます:
    • bar_opts (Object):アイコンツールバーの設定オプション。bricks.IconTextBar に渡されます。
      • margin (String | Number):ツールバーの外側余白(マージン)。
      • rate (Number):レイアウト内での占有比率。
      • tools (Array):ツールアイテムの配列。各アイテムは以下の構造を持つオブジェクトです:
        • name (String):ツールの名称。識別用。
        • icon (String):アイコンのクラス名またはパス。
        • label (String, オプション):ツールのテキストラベル。
        • tip (String):マウスオーバー時のヒント情報。
        • dynsize (Boolean):サイズを動的に調整するかどうか。
        • rate (Number):このツールがレイアウト内で占める比率。
        • content (Object | String):子コントロールの設定または型名を示すもので、コンテンツを動的に生成するために使用されます。
    • bar_at (String):ツールバーの位置を指定します。「'top'」または「'bottom'」のいずれか。デフォルトは「'top'」。

注意:コンストラクタでは自動的に height: '100%' が設定されます。

主なイベント

  • command イベント:
    • 発生元:内部の IconTextBar インスタンスから発火。
    • コールバックパラメータ:event.params にはクリックされた tool オブジェクトが含まれます。
    • 動作:ユーザーがツールアイコンをクリックすると、command_handle メソッドが呼び出され、tool.content の内容に基づいてコンテンツコンポーネントが動的に生成され、現在の表示領域の内容と入れ替えられます。
bar.bind('command', this.command_handle.bind(this))