This package has been deprecated

Author message:

Renamed to cog-dock-panel. Please upgrade to that package.

ng-dock-panel

1.0.1 • Public • Published

ng-dock-panel

DEPRECATION NOTICE: This package has been renamed to cog-dock-panel For a discussion of why only official Angular packages should carry the ng- prefix, see Please leave the ng prefix alone.

Angular module for dockable panels

Forked from dardino/ngDock in order to add ng-show/hide and collapsible panel support.

Usage:

dock-panel and dock

<body>
  <div dock-panel>
    <div dock="$angularexpr">my content</div>
  </div>
</body>

$angularexpr is an angular expression that returns one of this:

  • top
  • left
  • right
  • bottom
  • fill

example:

<body>
  <div dock-panel>
    <div dock="bottom">Bottom</div>
    <div dock="fill">my content</div>
  </div>
</body>

or:

<body>
  <div dock-panel>
    <div dock="myScopeVariable">my content</div>
  </div>
</body>

dock-resizable

If you want to be able to resize a dock you need to set the dock-resizable directive:

<body>
  <div dock-panel>
    <div dock="bottom" dock-resizable>Bottom</div>
    <div dock="fill">Fill</div>
  </div>
</body>

You can also pass an options object that will be passed through to the underlying jquery-ui resizable plugin:

<body>
  <div dock-panel>
    <div dock="bottom" dock-resizable="{maxHeight: 300}">Bottom</div>
    <div dock="fill">Fill</div>
  </div>
</body>

See jquery-ui resizable docs for possible options.

If you want to customize the resize handles, you can include an HTML element with a css class of 'dock-resize-handle' as a child of the dock-resizable element. The dock-resizable directive will locate the child element and convert it to a resize handle.

<body>
  <div dock-panel>
    <div dock="bottom" dock-resizable>Bottom
      <div dock-resize-handle></div>
    </div>
    <div dock="fill">Fill</div>
  </div>
</body>

You can use both dock-resizable and dock-collapsible on the same dock, if desired.

notice: you can only resize a non 'fill' dock

dock-collapsible

If you want to be able to collapse a dock you need to set the dock-collapsible directive, AND include an HTML element with a css class of 'dock-collapse-handle' as a child of the dock-collapsible element. The dock-collapsible directive will locate the child element and convert it to a collapse handle.

<body>
  <div dock-panel>
    <div dock="bottom" dock-collapsible>Bottom
          <div dock-collapse-handle></div>
        </div>
    </div>
    <div dock="fill">Fill</div>
  </div>
</body>

You can use both dock-collapsible and dock-resizable on the same dock, if desired.

notice: you can only collapse a non 'fill' dock

Styling

Because ng-dock-panel components are composed of normal HTML elements, you can style them as necessary using a combination of the jquery-ui classes, ng-dock-panel classes and attributes, plus your own custom classes.

Style distribution (CSS)

The compiled styles are distributed in the root of the package, as ng-dock-panel.css (or .min.css).

Style source (SASS / LESS)

The style source is available as either SCSS or LESS format, in <package-root>/lib/style/sass or .../style/less, respectively.

Readme

Keywords

Package Sidebar

Install

npm i ng-dock-panel

Weekly Downloads

5

Version

1.0.1

License

MIT

Last publish

Collaborators

  • cognivator