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
.panel
element. If the option name is in camelCase please use the dashed version instead. ex: overlayColor
becomes overlay-color
Name | Type | Default | Description |
---|---|---|---|
progress | string | 'circle' | Sets the progress indicator which is shown when the refresh button is clicked. Styles available are 'bar', 'circle' and 'circle-lg' |
progressColor | string | 'master' | Change the color of the progress indicator. Follows the Pages contextual color naming convention. Note: 'white' color is only available for progress 'circle-lg' |
refresh | boolean | false | Toggle progress indicator by setting this option. ex: Set this to 'false' from inside onRefresh function to hide the progress indicator |
error | string | null | Slide-in an error message inside the portlet. Recommended to be used when notifying the user about a failed refresh callback |
overlayColor | string | 'white' | Change the color of overlay which is shown while the refresh process is in progress. Any hex color code is accepted |
overlayOpacity | number | 0.6 | Change the opacity of the overlay. Use any value between 0 and 1 |
onRefresh | function | undefined | Called when the [data-toggle="refresh"] button is clicked |
onCollapse | function | undefined | Called when the [data-toggle="collapse"] button is clicked |
onExpand | function | undefined | Called when the [data-toggle="refresh"] button is clicked while the portlet is being collapsed |
onMaximize | function | undefined | Called when the [data-toggle="maximize"] button is clicked |
onRestore | function | undefined | Called when the [data-toggle="maximize"] button is clicked while the portlet is being maximized |
onClose | function | undefined | Called when the [data-toggle="close"] button is clicked |