Portlet UI widget

Portlet is a pluggable JavaScript component that allows placing other widgets inside it and creating a flexible page layout. It is possible to drag portlets around the page, which enables changing the structure of the app without writing extra code.

live demo

  • Integration: jQuery, Angular, React, Vue.js, Backbone
  • Support of All Modern browsers
  • Ready for Touch Devices
  • Meets Section 508
  • Quick styling with CSS

Overview

You can move portlets by the handle or by the header. You can configure the behavior of the Portlet widget using the available working modes. The moved portlet can replace the target one. You can also define the moving direction allowing a user to drag portlets only horizontally or vertically.

Moving modes

There are three different modes for moving portlets. The first option implies replacing the target portlet with the moved one. The second one allows portlets to be moved only along the x-axis, thus maintaining column layout. With the third mode, you can drag portlets only along the y-axis, thus preserving a row structure.

Drag-and-drop

You can easily drag portlets by the handles inside them or by their headers. A new possible position of the portlet is highlighted.

Customizable headers

In contrast to the Webix Layout component, you can specify a header for each Portlet. Moreover, it is possible to use this header for dragging the widget to a specific location.

Insert other widgets

It's easy to use any Webix widget with the Portlet. You can define the combination of rows and columns of portlets that will form the structure of your app. After that, you can place Webix widgets into the desired portlets and configure them up to your needs.