#### Keen - The Ultimate Multi-Demo Bootstrap Admin Theme

#### The most complete UI/UX template solution for today's web projects of any size

## Keen Portlet

### Overview

`KTPortlet` is a Keen's custom plugin defined in `[root]/theme/default/src/theme/framework/components/base/portlet/portlet.js`.

### Initialization

First parameter is the id, class, or tag of the HTML element. The second parameter is for the options.

     var portlet = new KTPortlet(id, options);

     var portlet = new KTPortlet('main_portlet', {
        bodyToggleSpeed: 400,
        tooltips: true,
        tools: {
            toggle: {
                collapse: 'Collapse',
                expand: 'Expand'
            },
            reload: 'Reload',
            remove: 'Remove',
            fullscreen: {
                on: 'Fullscreen',
                off: 'Exit Fullscreen'
            }
        },
        sticky: {
            offset: 300,
            zIndex: 101
        }
    });

### Options

    var options = {
        bodyToggleSpeed: 400,
        tooltips: true,
        tools: {
            toggle: {
                collapse: 'Collapse',
                expand: 'Expand'
            },
            reload: 'Reload',
            remove: 'Remove',
            fullscreen: {
                on: 'Fullscreen',
                off: 'Exit Fullscreen'
            }
        },
        sticky: {
            offset: 300,
            zIndex: 101
        }
    };

Field | Type | Description
--- | --- | ---
`bodyToggleSpeed` | `number` | Set the portlet body toggle speed in miliseconds
Sample
    bodyToggleSpeed: 400
`tooltips` | `boolean` | Enable/disable portlet tooltips
Sample
    tooltips: true
`tools.toggle` | `object` | Portlet toggle tools options. Set the title for the collapse and expand toggle.
Sample
    tools: {
        toggle: {
            collapse: 'Collapse',
            expand: 'Expand'
        }
    }
`tools.reload` | `string` | Set portlet reload title in the tools.
Sample
    tools: {
        reload: 'Reload',
    }
`tools.remove` | `string` | Set portlet remove title in the tools.
Sample
    tools: {
        remove: 'Remove',
    }
`tools.fullscreen` | `object` | Set portlet fullscreen title in the tools.
Sample
    tools: {
        fullscreen: {
            on: 'Fullscreen',
            off: 'Exit Fullscreen'
        }
    }
`sticky.offset` | `number` | Set the scroll offset for the sticky portlet header to appear.
Sample
    sticky: {
        offset: 300
    }
`sticky.zIndex` | `number` | Set the portlet sticky header z-index.
Sample
    sticky: {
        zIndex: 101
    }

### Attributes

    <div class="kt-portlet">
    	<div class="kt-portlet__head">
    		<div class="kt-portlet__head-label">
    			<h3 class="kt-portlet__head-title"><!-- head title here --></h3>
    		</div>
    	</div>
    	<div class="kt-portlet__body">
    		<div class="kt-section">
    			<h3 class="kt-section__title"><!-- section title here --></h3>
    			<div class="kt-section__info"><!-- info here --></div>
    			<div class="kt-section__content kt-section__content--border">
    			<!-- content here -->
    			</div>
    		</div>
    	</div>
    </div>

Atrribute | Description
--- | ---
`k-portlet-tool` | Set an element in the portlet tools button to a specific action. Eg. <a href="#" kt-portlet-tool="remove">Remove</a>
Name | Description
--- | ---
`remove` | Set remove portlet action
`reload` | Reload portlet
`toggle` | Toggle collapse and expand portlet
`fullscreen` | Toggle button to fullscreen portlet

### API Methods

Method | Description
--- | ---
`setDefaults(options)` | Set default options
Input Parameters
Name | Type | Description
--- | --- | ---
`options` | `object` | A new options object for the menu
`setContent(contents)` | Set dropdown content
Input Parameters
Name | Type | Description
--- | --- | ---
`contents` | `string` | Inner HTML to be placed in the dropdown content
`remove()` | Remove the portlet
`reload()` | Reload the portlet
`toggle()` | Toggle the portlet to collapse or expand
`collapse()` | Set portlet to collapse
`expand()` | Set portlet to expand
`fullcreen()` | Set portlet to fullscreen
`unFullcreen()` | Set portlet to default minimize
`getBody()` | Get the portlet body as HTML object
`getSelf()` | Get the portlet as HTML object
`on(name, handler)` | Register event
Input Parameters
Name | Type | Description
--- | --- | ---
`name` | `string` | Unique event name
`handler` | `function` | Callback function handler for the event
`one(name, handler)` | Register event to be run once
Input Parameters
Name | Type | Description
--- | --- | ---
`name` | `string` | Unique event name
`handler` | `function` | Callback function handler for the event

### Keen’s Key Features

Keen empowers your project with virtually limitless array of options
to create endless unique projects.

- Based On Bootstrap 4.x
- Multi-Demo Concept
- Enterprise Ready Architect
- Integrated Build Tools: Gulp, NPM, Yarn, SASS
- Full RTL Support
- Included Classic(without build tool) Version
- Enterprise Ready Core Framework
- Full SASS Support
- Re-Usable Component System
- And many more...

> We truly hope that our love and dedication to produce an incredibly powerful high level solution suits all your project needs. We will continue to deliver incredible enterprise ready solutions for Angular, React and VueJS to serve you better. We sincerely hope you enjoyed using Keen as much as we enjoyed building it.

> Sean, Keenthemes Co-Author