ui-divided-box for angularJS
ui-divided-box is a set of AngularJS directives that mimic the Flex/Actionscript DividedBox containers. A divided box lays out its children horizontally or vertically, inserting a draggable divider between each child. Dragging a divider increases or decreases the size of the element to the left in a horizontal divided box, or above in a vertical divided box, and correspondingly takes away or adds to the last element in the list.
creates a horizontal box of four DIVs each separated by a vertical divider. Drag the divider to resize the boxes.
You can find examples on the demo page.
The full jQuery is required.
Horizontal boxes appear as
Vertical boxes appear as
Attributes for divided box elements
orientation: for <ui-divided-box> only. Indicates layout direction. If first character is 'h' then the layout is horizontal, otherwise it is vertical.
divider-width: the width of the divider. Defaults to 3 pixels.
divider-color: the color of the divider. Defaults to gray.
divider-class: CSS class to apply to the divider. Defaults to null.
Attributes for child elements of divided boxes
min: minimum size of this child, in pixels, defaults to 10
max: maximum size of this child, in pixels
Use CSS to set the initial size of the child element.
- include ui-divided-box.js
- add module to angular
There is an error in calculating the width or height of the last element. Depending on the width of the outer container, the last element is off between 0 and 3 pixels.
Rather than using a simple background color for the draggable divider, use a repeatable image, or vectors on a canvas.