Portlets

Basic portlets in Pages follow the exact same markup of .panel in Bootstrap. Going a step further we have added portlet tools to enhance your web app experience.

Basic Portlet

Portlet scroll

Create a basic portlet using .panel just like in Bootstrap. To make the portlet body scrollable, simply add .scrollable to the .panel-body. Then create a new wrapper element as the immediate child of the .panel-body containing the all the content and set it a height or max-height

<div class="panel panel-default">
    <div class="panel-heading">
        <div class="panel-title">Basic Portlets
        </div>
    </div>
    <div class="panel-body scrollable">
      <!-- REMOVE THIS WRAPPER IF .scrollable IS NOT USED -->
        <div style="max-height:130px">
          ...
        </div>
    </div>
</div>

Style options

Append .separator to your .panel-heading to separator between panel header and panel body

<div class="panel panel-default">
    <div class="panel-heading separator">
        <div class="panel-title">Basic Portlets
        </div>
    </div>
    <div class="panel-body">
      ...
    </div>
</div>

Replace .panel-default with .panel-transparent to make the background of a portlet transparent

<div class="panel panel-transparent">
    <div class="panel-heading">
        <div class="panel-title">Basic Portlets
        </div>
    </div>
    <div class="panel-body">
      ...
    </div>
</div>

Use any contextual background color with portlets by appending .bg-* (ex: .bg-success) to .panel . Text color of the panel body can also be changed by adding any .text-* contextual color class

<div class="panel panel-default bg-success text-white">
    <div class="panel-heading">
        <div class="panel-title">Basic Portlets
        </div>
    </div>
    <div class="panel-body">
      ...
    </div>
</div>

Append .panel-condensed to reduce padding of .panel-heading and .panel-body

<div class="panel panel-default panel-condensed">
    <div class="panel-heading">
        <div class="panel-title">Basic Portlets
        </div>
    </div>
    <div class="panel-body">
      ...
    </div>
</div>

Advance Portlet

Example

Convert traditional Bootstrap panels into portlets using Pages Portlets jQuery plugin. The following portlet controls are available:

• Collapse
• Refresh
• Close
• Settings
• Resize

jQuery users

<div id="myPortlet" class="panel panel-default">
    <div class="panel-heading ">
        <div class="panel-title">Portlet Title
        </div>
        <div class="panel-controls">
            <ul>
                <li>
                    <div class="dropdown">
                        <a id="portlet-settings" data-target="#" href="#" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
                            <i class="portlet-icon portlet-icon-settings "></i>
                        </a>

                        <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="portlet-settings">
                            <li><a href="#">Item 1</a></li>
                            <li><a href="#">Item 2</a></li>   
                        </ul>
                    </div>
                </li>
                <li><a href="#" class="portlet-collapse" data-toggle="collapse"><i class="portlet-icon portlet-icon-collapse"></i></a>
                </li>
                <li><a href="#" class="portlet-refresh" data-toggle="refresh"><i class="portlet-icon portlet-icon-refresh"></i></a>
                </li>
                <li><a href="#" class="portlet-maximize" data-toggle="maximize"><i class="portlet-icon portlet-icon-maximize"></i></a>
                </li>
                <li><a href="#" class="portlet-close" data-toggle="close"><i class="portlet-icon portlet-icon-close"></i></a>
                </li>
            </ul>
        </div>
    </div>
    <div class="panel-body">
        ...
    </div>
</div>
<script>
$(function(){
  $('#myPortlet').portlet({
        onRefresh: function() {
            // Timeout to simulate AJAX response delay
            setTimeout(function() {
                $('#myPortlet').portlet({
                    refresh: false
                });
            }, 2000);
        }
    });
});
</script>

Usage

Portlets can be initialized using either data attributes or via Javascript. However if you need to have a refresh button within your portlet it is a must that you follow the latter which enables you to bind a refresh callback function.

Via data attributes

<div class="panel panel-default" data-pages="portlet">
    <div class="panel-heading ">
        <div class="panel-title">Portlet Title
        </div>
        <div class="panel-controls">
            <ul>
                <li><a href="#" class="portlet-close" data-toggle="close"><i class="portlet-icon portlet-icon-close"></i></a>
                </li>
            </ul>
        </div>
    </div>
    <div class="panel-body">
        ...
    </div>
</div>

Via Javascript

<script>
$(function() {
    $('#myPortlet').portlet(options)
})
</script>

AngularJS users

Markup

When using portlets on AngularJS you only have to do minor additions to the attributes of .panel element. You must include pg-portlet directive to apply portlet plugin. Additionally you can pass plugin options as attributes, ie: when you want to bind a callback for refresh button you can pass your function defined in the controller's scope as an attribute. Please refer to the example below. For other attributes please refer to the "Options" table below

<div id="portlet-advance" class="panel panel-default" pg-portlet on-refresh="refreshMyPortlet()">
    <div class="panel-heading ">
        <div class="panel-title">Portlet Title
        </div>
        <div class="panel-controls">
            <ul>
                <li>
                    <div class="dropdown">
                        <a id="portlet-settings" data-target="#" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
                            <i class="portlet-icon portlet-icon-settings "></i>
                        </a>
                        <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="portlet-settings">
                            <li><a>API</a>
                            </li>
                            <li><a>Preferences</a>
                            </li>
                            <li><a>About</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li><a href="" data-toggle="collapse" class="portlet-collapse"><i class="portlet-icon portlet-icon-collapse"></i></a>
                </li>
                <li><a href="" data-toggle="refresh" class="portlet-refresh"><i class="portlet-icon portlet-icon-refresh"></i></a>
                </li>
                <li><a href="" data-toggle="maximize" class="portlet-maximize"><i class="portlet-icon portlet-icon-maximize"></i></a>
                </li>
                <li><a href="" data-toggle="close" class="portlet-close"><i class="portlet-icon portlet-icon-close"></i></a>
                </li>
            </ul>
        </div>
    </div>
    <div class="panel-body">
        ...
    </div>
</div>

Options