ui-divided-box

AngularJS directive for horizontal and vertical divided boxes
Homepage:
0 people use it

https://github.com/timfogarty1549/ui-divided-box/blob/master/README.md

ui-divided-box for angularJS

OVERVIEW

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.

overview

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.

REQUIREMENTS

The full jQuery is required.

ELEMENTS

elements

Horizontal boxes appear as

horizontal

Vertical boxes appear as

vertical

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.

Installation

  • include ui-divided-box.js
  • add module to angular

installation

Known Issues

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.

Future Development

Rather than using a simple background color for the draggable divider, use a repeatable image, or vectors on a canvas.

comments powered by Disqus
This page was last updated about 2 years ago.