imuiGadgetBar
コンポーネント情報 | |
---|---|
モジュール | im_ui |
導入されたバージョン | 8.0.3 |
バージョン | 8.0.17 |
機能説明
- imuiGadgetItem タグを配置できるガジェット領域を作成します。
- アコーディオンとは違い、1つ1つの領域が独立しています。
- 複数のコンテンツを表示、すべて閉じることが可能です。
- 領域内のガジェットはドラッグで並び替えることが可能です。
- 領域内のガジェットはリサイズで領域サイズの変更が可能です。
- imuiGadgetBarタグがガジェット領域、 imuiGadgetItem タグがガジェットコンテンツ領域を作成します。
- そのため imuiGadgetItem タグと組み合わせて使用してください。
- imuiGadgetItem と組み合わせて使用してください。
- 組み合わせて使用しない場合はレイアウトの崩れや、開閉処理が起こらないなど動作保証をしていません。
- resizable設定時の制約について
- resizableを設定した場合、リサイズする縦方向は、ガジェットウィンドから一番最初のActiveなアイテムを対象とします。
- resizableを設定かつ、アイテムを全て閉じた場合、縦方向のリサイズは行えないものとします。
- resizableを設定した場合、リサイズをする際にドラック出来る位置は、右(“e”)、下(“s”)、右下(“se”)の3箇所とします。
- resizeHandlesに“all”を設定した場合でも3ヵ所以外からのリサイズは行えません。
- resizeHandlesは省略した場合、resizeHandles=“e”とした時と同じ動作とします。
- 複数個所を指定したい場合、カンマを利用して、resizeHandles=“e,s”の様にします。
- 利用可能な箇所を全て使用する場合、resizeHandles=“all”と設定することで3種全てが動作します。
- 許容していない文字列[n, w, ne, sw, nwも対象]を指定した場合は、全て無効化します。但しresizeHandles=“n, ne, all”などとした場合は“all”についても無効化対象とします。
属性一覧
- ボディ内には imuiGadgetItem タグを配置してください。
注釈 | 属性名 | 型 | 説明 | 省略時の動作 |
---|---|---|---|---|
Boolean属性 | disabled |
boolean | ガジェットを無効にするかどうかを指定します | false |
height |
string | ガジェットの全体領域の縦幅を指定します height=“200”の様に単位を省略するとpxとして扱われます |
自動計算された縦幅 | |
HTML5
Boolean属性
|
hidden |
boolean | ガジェットを非表示にします | false |
icons |
Object | ヘッダーのアイコンを指定します 開閉時それぞれのアイコンの指定ができます 詳細は下記の icons を参照してください |
{ header: 'ui-icon-plus', headerSelected: 'ui-icon-minus' } | |
id |
string | ガジェットバーのidです | 代替idを付与 | |
name |
string | ガジェットバーのnameです | 代替nameを付与 | |
Boolean属性 | resizable |
boolean | ガジェット領域のリサイズを可能にするかどうかを指定します | false |
resizeHandles |
string | resizable設定時にリサイズを行うドラッグ位置を指定します ガジェット領域のうち、リサイズ可能な方向を指定します 右(“e”)、下(“s”)、右下(“se”)の3箇所とします “all”を設定した場合でも3ヵ所以外からのリサイズは行えません また、カンマ区切りで複数指定することができます |
e | |
Boolean属性 | sortable |
boolean | ガジェットアイテムの順序を入れ替え可能にするかどうかを指定します | false |
width |
string | ガジェットウィンドの横幅を指定します width=“400”の様に単位を省略するとpxとして扱われます |
100% | |
無害化 | その他 |
string | ユーザ定義属性です | - |