ボックス区切り移動サンプル

ボックス区切り移動(DividedBox)

DividedBoxは要素を区切り線で分割し、分割サイズを区切り線の操作で自由に変更できるようにすることができるUI部品です。

実際の動作画面、及び詳細な使い方については以下のサンプルをご覧ください

使用方法・制限事項

本機能使用時は、以下のファイルを読み込んでください。
- dividedBox/src/DividedBox.css
- dividedBox/src/DividedBox.js
ルート要素をdividedBoxクラスとして、DividedBoxを適用する例です。

ルート要素直下にボックス要素を配置してください。DividedBoxを適用すると各ボックス間に移動可能な区切り線が作成されます。
```

<div class="dividedBox">
  <div>ボックス１</div>
  <div>ボックス２</div>
  <div>ボックス３</div>
</div>
```
```
// javascript
var dividedBoxControlelr = h5.core.controller('.dividedBox', h5.ui.components.DividedBox.DividedBox);
```

デザインについては適宜、別定義によるオーバーライド等で変更してください。

例：区切り線のハンドル用要素(中央の○)の高さと幅を20px、色を白に変更

.dividedBox>.divider>.dividerHandler {
  background-color: #fff;
  /* 円にするため、width=heightにして、角丸(border-radius)はその半分の値を指定 */
  width: 20px;
  height: 20px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
}

.dividedBox.horizontal>.divider>.dividerHandler {
  margin-left: -8px; /* -(divderHandlerのwidth - dviderのwidth) / 2 */
}

.dividedBox.vertical>.divider>.dividerHandler {
  margin-top: -10px;  /* -(divderHandlerのheightの半分) / 2 */
}

ウィンドウサイズ変更等でルート要素のサイズが変更され、要素内容にずれが生じるような場合は、 DividedBoxControllerのrefresh関数を呼び出してください。再計算して表示します。
```
dividedBoxController.refresh();
```
その他機能についてはサンプルをご覧ください