commitall
This commit is contained in:
Sampanna Rimal
72
account/theme/pages/docs/javascript/card-refresh.md
Normal file
72
account/theme/pages/docs/javascript/card-refresh.md
Normal file
@ -0,0 +1,72 @@
|
||||
---
|
||||
layout: page
|
||||
title: Card Refresh Plugin
|
||||
---
|
||||
|
||||
The card refresh plugin provides the functionality for loading ajax content into the card.
|
||||
|
||||
##### Usage
|
||||
|
||||
This plugin can be activated as a jQuery plugin or using the data API.
|
||||
|
||||
###### Data API
|
||||
{: .text-bold }
|
||||
|
||||
Activate the plugin by adding a button with `data-card-widget="card-refresh"` to the card and provide the required `data-source="/URL-TO-CONTENT"` option. By doing that, the plugin will automatically create a GET request to the provided URL and render the returned response the `.card-body` section of the card. If you need to process the returned response before rendering, you should use the jQuery API, which provides hooks to deal with the response.
|
||||
|
||||
|
||||
###### jQuery
|
||||
{: .text-bold }
|
||||
|
||||
The jQuery API provides more customizable options that allows the developer to pre-process the request before rendering and post-process it after rendering.
|
||||
|
||||
```js
|
||||
$('#my-card [data-card-widget="card-refresh"]').CardRefresh(options)
|
||||
```
|
||||
|
||||
##### Options
|
||||
{: .mt-4}
|
||||
|
||||
|---
|
||||
| Name | Type | Default | Description
|
||||
|-|-|-|-
|
||||
| source | String | '' | The URL to the source.
|
||||
| sourceSelector | String | '' | A selector to get return only the content of the selector.
|
||||
| params | Object | {} | GET query paramaters (example: {search_term: 'layout'}, which renders to URL/?search_term=layout)
|
||||
| trigger | String | `[data-card-widget="card-refresh"]` | The CSS selector to the refresh button
|
||||
| content | String | `.card-body` | The CSS selector to the target where the content should be rendered. This selector should exist within the card.
|
||||
| loadInContent | Boolean | TRUE | Whether to automatically render the content.
|
||||
| loadOnInit | Boolean | TRUE | Init plugin on page load.
|
||||
| loadErrorTemplate | Boolean | TRUE | Whether to append the `errorTemplate` to the card when an ajax error occurs.
|
||||
| responseType | String | '' | Response type (example: 'json' or 'html')
|
||||
| overlayTemplate | String | TRUE | The HTML template for the ajax spinner
|
||||
| errorTemplate | String | `'<span class="text-danger"></span>'` | The HTML template for an ajax error message
|
||||
| onLoadStart | Function | Anonymous Function | Called before the ajax request is made
|
||||
| onLoadDone | Function | Anonymous Function | Called after the ajax request is made. A `response` parameter is passed to the function that hold the server response.
|
||||
| onLoadFail | Function | Anonymous Function | Called if the ajax request fails. `jqXHR`, `textStatus` and `errorThrown` parameters are passed to the function.
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
##### Events
|
||||
{: .mt-4}
|
||||
|
||||
|---
|
||||
| Event Type | Description
|
||||
|-|-
|
||||
|loaded.lte.cardrefresh | Triggered after a card is refreshed.
|
||||
|overlay.added.lte.cardrefresh | Triggered after the overlay added to the card.
|
||||
|overlay.removed.lte.cardrefresh | Triggered after the overlay removed from the card.
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
Example: `$('#my-card [data-card-widget="card-refresh"]').on('loaded.lte.cardrefresh', handleLoadedEvent)`
|
||||
|
||||
|
||||
##### Methods
|
||||
{: .mt-4}
|
||||
|
||||
|---
|
||||
| Method | Description
|
||||
|-|-
|
||||
|load | Reloads the content and runs the `onLoadStart` and `onLoadDone` hooks
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
Example: `$('#my-card [data-card-widget="card-refresh"]').CardRefresh('load')`
|
||||
198
account/theme/pages/docs/javascript/card-widget.md
Normal file
198
account/theme/pages/docs/javascript/card-widget.md
Normal file
@ -0,0 +1,198 @@
|
||||
---
|
||||
layout: page
|
||||
title: Card Widget Plugin
|
||||
---
|
||||
|
||||
The card widget plugin provides the functionality for collapsing, expanding and removing a card.
|
||||
|
||||
### Usage
|
||||
|
||||
This plugin can be activated as a jQuery plugin or using the data API.
|
||||
|
||||
#### Data API
|
||||
|
||||
This plugin provides two `data-api` attributes. Any element using one of the following attributes should be placed within the `.card-tools` div, which is usually in the card header. For more information about the [card HTML structure]({% link components/cards.md %}), visit the card component documentation
|
||||
|
||||
##### `data-card-widget="collapse"`
|
||||
|
||||
This attribute, when attached to a button, allows the box to be collapsed/expanded when clicked.
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Collapsible Card Example</h3>
|
||||
<div class="card-tools">
|
||||
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-8" markdown="1">
|
||||
```html
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Collapsible Card Example</h3>
|
||||
<div class="card-tools">
|
||||
<!-- Collapse Button -->
|
||||
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
|
||||
</div>
|
||||
<!-- /.card-tools -->
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
```
|
||||
{: .max-height-300}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
##### `data-card-widget="remove"`
|
||||
|
||||
This attribute, when attached to a button, allows the box to be removed when clicked.
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Removable Card Example</h3>
|
||||
<div class="card-tools">
|
||||
<button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-8" markdown="1">
|
||||
```html
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Removable Card Example</h3>
|
||||
<div class="card-tools">
|
||||
<!-- Remove Button -->
|
||||
<button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
|
||||
</div>
|
||||
<!-- /.card-tools -->
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
```
|
||||
{: .max-height-300}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
##### `data-card-widget="maximize"`
|
||||
|
||||
This attribute, when attached to a button, allows the box to be maximize/minimize when clicked.
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Maximizable Card Example</h3>
|
||||
<div class="card-tools">
|
||||
<button type="button" class="btn btn-tool" data-card-widget="maximize"><i class="fas fa-expand"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-8" markdown="1">
|
||||
```html
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Maximizable Card Example</h3>
|
||||
<div class="card-tools">
|
||||
<!-- Maximize Button -->
|
||||
<button type="button" class="btn btn-tool" data-card-widget="maximize"><i class="fas fa-expand"></i></button>
|
||||
</div>
|
||||
<!-- /.card-tools -->
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
```
|
||||
{: .max-height-300}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
###### jQuery
|
||||
{: .text-bold }
|
||||
To activate any button using jQuery, you must provide the removeTrigger and collapseTrigger options. Otherwise, the plugin will assume the default `data-card-widget` selectors.
|
||||
|
||||
```js
|
||||
$('#my-card').CardWidget(options)
|
||||
```
|
||||
|
||||
##### Options
|
||||
{: .mt-4}
|
||||
|
||||
|---
|
||||
| Name | Type | Default | Description
|
||||
|-|-|-|-
|
||||
|animationSpeed | Number | 300 | Speed of slide down/up animation in milliseconds.
|
||||
|collapseTrigger | String | `[data-card-widget="collapse"]` | jQuery selector to the element responsible for collapsing the box.
|
||||
|removeTrigger | String | `[data-card-widget="remove"]` | jQuery selector to the element responsible for removing the box.
|
||||
|maximizeTrigger | String | `[data-card-widget="maximize"]` | jQuery selector to the element responsible for maximizing the box.
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
> ##### Tip!
|
||||
> You can use any option via the data-attributes like this.
|
||||
> ```html
|
||||
> <button type="button" class="btn btn-tool" data-card-widget="collapse" data-animation-speed="1000"><i class="fas fa-minus"></i></button>
|
||||
> ```
|
||||
{: .quote-info}
|
||||
|
||||
##### Events
|
||||
{: .mt-4}
|
||||
|
||||
|---
|
||||
| Event Type | Description
|
||||
|-|-
|
||||
|expanded.lte.cardwidget | Triggered after a card expanded.
|
||||
|collapsed.lte.cardwidget | Triggered after a card collapsed.
|
||||
|maximized.lte.cardwidget | Triggered after a card maximized.
|
||||
|minimized.lte.cardwidget | Triggered after a card minimized.
|
||||
|removed.lte.cardwidget | Triggered after a card removed.
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
Example: `$('#my-card').on('expanded.lte.cardwidget', handleExpandedEvent)`
|
||||
|
||||
|
||||
##### Methods
|
||||
{: .mt-4}
|
||||
|
||||
|---
|
||||
| Method | Description
|
||||
|-|-
|
||||
|collapse | Collapses the card
|
||||
|expand | Expands the card
|
||||
|remove | Removes the card
|
||||
|toggle | Toggles the state of the card between expanded and collapsed
|
||||
|maximize | Maximizes the card
|
||||
|minimize | Minimizes the card
|
||||
|toggleMaximize | Toggles the state of the card between maximized and minimized
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
Example: `$('#my-card-widget').CardWidget('toggle')` or `$('#my-card').CardWidget('toggle')`
|
||||
80
account/theme/pages/docs/javascript/control-sidebar.md
Normal file
80
account/theme/pages/docs/javascript/control-sidebar.md
Normal file
@ -0,0 +1,80 @@
|
||||
---
|
||||
layout: page
|
||||
title: Control Sidebar Plugin
|
||||
---
|
||||
|
||||
The control sidebar component is part of AdminLTE's layout as the right sidebar.
|
||||
|
||||
##### Usage
|
||||
This plugin can be activated as a jQuery plugin or using the data api. To activate the plugin, you must first add the HTML markup to your layout, then create the toggle button as shown below.
|
||||
|
||||
###### HTML Markup
|
||||
{: .text-bold }
|
||||
```html
|
||||
<!-- Control Sidebar -->
|
||||
<aside class="control-sidebar control-sidebar-dark">
|
||||
<!-- Control sidebar content goes here -->
|
||||
</aside>
|
||||
<!-- /.control-sidebar -->
|
||||
```
|
||||
|
||||
###### Data api
|
||||
{: .text-bold }
|
||||
Add `data-widget="control-sidebar"` to any button or a element to activate the plugin.
|
||||
|
||||
```html
|
||||
<a href="#" data-widget="control-sidebar">Toggle Control Sidebar</a>
|
||||
```
|
||||
|
||||
###### jQuery
|
||||
{: .text-bold }
|
||||
Just like all other AdminLTE plugins, you can also activate the toggle button using jQuery by running the following example.
|
||||
```js
|
||||
$("#my-toggle-button").ControlSidebar('toggle');
|
||||
```
|
||||
|
||||
##### Options
|
||||
|
||||
|---
|
||||
| Name | Type | Default | Description
|
||||
|-|-|-|-
|
||||
|controlsidebarSlide | Boolean | TRUE | Whether the sidebar should slide over the content or push the content to make space for itself.
|
||||
|scrollbarTheme | Boolean | `os-theme-light` | Scrollbar Theme used while SideBar Fixed
|
||||
|scrollbarAutoHide | Boolean | `l` | Scrollbar auto-hide trigger
|
||||
|target | String | `.control-sidebar` | Target control-sidebar to handle multiple control-sidebars.
|
||||
|animationSpeed | Boolean | `300` | Set the animation/transition speed equals to the scss transition speed.
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
> ##### Tip!
|
||||
> You can use any option via the data-attributes like this to enable auto collapse sidebar on 768 pixels width.
|
||||
> ```html
|
||||
> <a href="#" data-widget="control-sidebar" data-controlsidebar-slide="false">Toggle Control Sidebar</a>
|
||||
> ```
|
||||
{: .quote-info}
|
||||
|
||||
##### Events
|
||||
{: .mt-4}
|
||||
|
||||
|---
|
||||
| Event Type | Description
|
||||
|-|-
|
||||
|expanded.lte.controlsidebar | Triggered after a control sidebar expands.
|
||||
|collapsed.lte.controlsidebar | Triggered after a control sidebar collapses.
|
||||
|collapsed-done.lte.controlsidebar | Triggered after a control sidebar is fully collapsed.
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
Example: `$('#toggle-button').on('expanded.lte.controlsidebar', handleExpandedEvent)`
|
||||
|
||||
|
||||
##### Methods
|
||||
{: .mt-4}
|
||||
|
||||
|---
|
||||
| Method | Description
|
||||
|-|-
|
||||
|collapse | Collapses the control-sidebar
|
||||
|show | Show's the control-sidebar
|
||||
|toggle | Toggles the state of the control-sidebar expanded and collapsed
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
Example: `$('#toggle-button').ControlSidebar('toggle')`
|
||||
47
account/theme/pages/docs/javascript/direct-chat.md
Normal file
47
account/theme/pages/docs/javascript/direct-chat.md
Normal file
@ -0,0 +1,47 @@
|
||||
---
|
||||
layout: page
|
||||
title: Direct Chat Plugin
|
||||
---
|
||||
|
||||
The direct chat plugin provides simple functionality to the direct chat component.
|
||||
|
||||
##### Usage
|
||||
This plugin can be activated as a jQuery plugin or using the data api.
|
||||
|
||||
###### Data API
|
||||
{: .text-bold }
|
||||
Add `data-widget="chat-pane-toggle"` to a button to activate the plugin.
|
||||
```html
|
||||
<button class="btn btn-primary" data-widget="chat-pane-toggle">Toggle Chat Pane</button>
|
||||
```
|
||||
|
||||
###### jQuery
|
||||
{: .text-bold }
|
||||
The jQuery API provides more customizable options that allows the developer to toggle the chat contact pane.
|
||||
```js
|
||||
$('#chat-pane-toggle').DirectChat('toggle')
|
||||
```
|
||||
|
||||
|
||||
##### Methods
|
||||
{: .mt-4}
|
||||
|
||||
|---
|
||||
| Method | Description
|
||||
|-|-
|
||||
|toggle | Toggles the state of the chat pane between hidden and visible.
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
Example: `$('#chat-pane-toggle').DirectChat('toggle')`
|
||||
|
||||
|
||||
##### Events
|
||||
{: .mt-4}
|
||||
|
||||
|---
|
||||
| Event Type | Description
|
||||
|-|-
|
||||
|toggled.lte.directchat | Triggered after a direct chat contacts pane is toggled.
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
Example: `$('#toggle-button').on('toggled.lte.directchat', handleToggledEvent)`
|
||||
106
account/theme/pages/docs/javascript/expandable-tables.md
Normal file
106
account/theme/pages/docs/javascript/expandable-tables.md
Normal file
@ -0,0 +1,106 @@
|
||||
---
|
||||
layout: page
|
||||
title: Expandable Table Plugin
|
||||
---
|
||||
|
||||
The expandable table plugin provides simple functionality to create expandable tables.
|
||||
|
||||
##### Example Code
|
||||
```html
|
||||
<table class="table table-bordered table-hover">
|
||||
<tbody>
|
||||
<tr data-widget="expandable-table" aria-expanded="false">
|
||||
<td>183</td>
|
||||
</tr>
|
||||
<tr class="expandable-body">
|
||||
<td>
|
||||
<p>
|
||||
<!-- YOUR EXPANDABLE TABLE BODY HERE -->
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr data-widget="expandable-table" aria-expanded="true">
|
||||
<td>219</td>
|
||||
</tr>
|
||||
<tr class="expandable-body">
|
||||
<td>
|
||||
<p>
|
||||
<!-- YOUR EXPANDABLE TABLE BODY HERE -->
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr data-widget="expandable-table" aria-expanded="true">
|
||||
<td>657</td>
|
||||
</tr>
|
||||
<tr class="expandable-body">
|
||||
<td>
|
||||
<p>
|
||||
<!-- YOUR EXPANDABLE TABLE BODY HERE -->
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
```
|
||||
{: .max-height-300}
|
||||
|
||||
|
||||
> ##### Tip!
|
||||
> You can control the default visibility with ` aria-expanded="false"`/` aria-expanded="true"` via the expandable table header.
|
||||
{: .quote-info}
|
||||
|
||||
|
||||
##### Usage
|
||||
This plugin can be activated as a jQuery plugin or using the data api.
|
||||
|
||||
###### Data API
|
||||
{: .text-bold }
|
||||
Add `data-widget="expandable-table"` to a table row to activate the plugin and place a new table row below with the `.expandable-body`-class.
|
||||
```html
|
||||
<tr data-widget="expandable-table" aria-expanded="true">
|
||||
<td>657</td>
|
||||
</tr>
|
||||
<tr class="expandable-body">
|
||||
<td>
|
||||
<p>
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
```
|
||||
|
||||
> ##### Tip!
|
||||
> To get the correct slide up/down animation place a `div` or `p`-tag inside your expandable table body.
|
||||
{: .quote-info}
|
||||
|
||||
|
||||
###### jQuery
|
||||
{: .text-bold }
|
||||
The jQuery API provides more customizable options that allows the developer to toggle the visibilty state of one table row.
|
||||
```js
|
||||
$('#expandable-table-header-row').ExpandableTable('toggleRow')
|
||||
```
|
||||
|
||||
|
||||
##### Methods
|
||||
{: .mt-4}
|
||||
|
||||
|---
|
||||
| Method | Description
|
||||
|-|-
|
||||
|toggleRow | Toggles the state of the expandable table body between hidden and visible.
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
Example: `$('#expandable-table-header-row').ExpandableTable('toggleRow')`
|
||||
|
||||
|
||||
##### Events
|
||||
{: .mt-4}
|
||||
|
||||
|---
|
||||
| Event Type | Description
|
||||
|-|-
|
||||
|expanded.lte.expandableTable | Triggered after a expandable table body is expanded.
|
||||
|collapsed.lte.expandableTable | Triggered after a expandable table body is collapsed.
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
Example: `$('#expandable-table-header-row').on('expanded.lte.expandableTable', handleToggledEvent)`
|
||||
125
account/theme/pages/docs/javascript/iframe.md
Normal file
125
account/theme/pages/docs/javascript/iframe.md
Normal file
@ -0,0 +1,125 @@
|
||||
---
|
||||
layout: page
|
||||
title: IFrame Plugin
|
||||
---
|
||||
|
||||
The iframe plugin provides the functionality to open sidebar & navbar items in a tabbed iframe.
|
||||
|
||||
##### Required Markup
|
||||
To get the iframe 100% working you need the following content-wrapper markup:
|
||||
|
||||
```html
|
||||
<div class="content-wrapper iframe-mode" data-widget="iframe" data-loading-screen="750">
|
||||
<div class="nav navbar navbar-expand-lg navbar-white navbar-light border-bottom p-0">
|
||||
<a class="nav-link bg-danger" href="#" data-widget="iframe-close">Close</a>
|
||||
<ul class="navbar-nav" role="tablist"></ul>
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
<div class="tab-empty">
|
||||
<h2 class="display-4">No tab selected!</h2>
|
||||
</div>
|
||||
<div class="tab-loading">
|
||||
<div>
|
||||
<h2 class="display-4">Tab is loading <i class="fa fa-sync fa-spin"></i></h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
###### Markup with Default IFrame Tab
|
||||
```html
|
||||
<div class="content-wrapper iframe-mode" data-widget="iframe" data-loading-screen="750">
|
||||
<div class="nav navbar navbar-expand navbar-white navbar-light border-bottom p-0">
|
||||
<div class="nav-item dropdown">
|
||||
<a class="nav-link bg-danger dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Close</a>
|
||||
<div class="dropdown-menu mt-0">
|
||||
<a class="dropdown-item" href="#" data-widget="iframe-close" data-type="all">Close All</a>
|
||||
<a class="dropdown-item" href="#" data-widget="iframe-close" data-type="all-other">Close All Other</a>
|
||||
</div>
|
||||
</div>
|
||||
<a class="nav-link bg-light" href="#" data-widget="iframe-scrollleft"><i class="fas fa-angle-double-left"></i></a>
|
||||
<ul class="navbar-nav overflow-hidden" role="tablist"><li class="nav-item active" role="presentation"><a href="#" class="btn-iframe-close" data-widget="iframe-close" data-type="only-this"><i class="fas fa-times"></i></a><a class="nav-link active" data-toggle="row" id="tab-index-html" href="#panel-index-html" role="tab" aria-controls="panel-index-html" aria-selected="true">Dashboard v1</a></li></ul>
|
||||
<a class="nav-link bg-light" href="#" data-widget="iframe-scrollright"><i class="fas fa-angle-double-right"></i></a>
|
||||
<a class="nav-link bg-light" href="#" data-widget="iframe-fullscreen"><i class="fas fa-expand"></i></a>
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
<div class="tab-empty">
|
||||
<h2 class="display-4">No tab selected!</h2>
|
||||
</div>
|
||||
<div class="tab-loading">
|
||||
<div>
|
||||
<h2 class="display-4">Tab is loading <i class="fa fa-sync fa-spin"></i></h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="panel-index-html" role="tabpanel" aria-labelledby="tab-index-html"><iframe src="./index.html"></iframe></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
##### Usage
|
||||
This plugin can be activated as a jQuery plugin or using the data api.
|
||||
|
||||
###### Data API
|
||||
{: .text-bold }
|
||||
Activate the plugin by adding `data-widget="iframe"` to the `.content-wrapper`. If you need to provide onCheck and onUncheck methods, please use the jQuery API.
|
||||
|
||||
###### jQuery
|
||||
{: .text-bold }
|
||||
The jQuery API provides more customizable options that allows the developer to handle checking and unchecking the todo list checkbox events.
|
||||
```js
|
||||
$('.content-wrapper').IFrame({
|
||||
onTabClick(item) {
|
||||
return item
|
||||
},
|
||||
onTabChanged(item) {
|
||||
return item
|
||||
},
|
||||
onTabCreated(item) {
|
||||
return item
|
||||
},
|
||||
autoIframeMode: true,
|
||||
autoItemActive: true,
|
||||
autoShowNewTab: true,
|
||||
autoDarkMode: false,
|
||||
allowDuplicates: true,
|
||||
loadingScreen: 750,
|
||||
useNavbarItems: true
|
||||
})
|
||||
```
|
||||
|
||||
|
||||
##### Options
|
||||
{: .mt-4}
|
||||
|
||||
|---
|
||||
| Name | Type | Default | Description
|
||||
|-|-|-|-
|
||||
|onTabClick | Function | Anonymous Function | Handle tab click event.
|
||||
|onTabChanged | Function | Anonymous Function | Handle tab changed event.
|
||||
|onTabCreated | Function | Anonymous Function | Handle tab created event.
|
||||
|autoIframeMode | Boolean | true | Whether to automatically add `.iframe-mode` to `body` if page is loaded via iframe.
|
||||
|autoItemActive | Boolean | true | Whether to automatically set the sidebar menu item active based on the active iframe.
|
||||
|autoShowNewTab | Boolean | true | Whether to automatically display created tab.
|
||||
|autoDarkMode | Boolean | false | Whether to automatically enable dark-mode in iframe pages.
|
||||
|allowDuplicates | Boolean | true | Whether to allow creation of duplicate tab/iframe.
|
||||
|allowReload | Boolean | true | Whether to allow reload non duplicate tab/iframes.
|
||||
|loadingScreen | Boolean/Number | true | [Boolean] Whether to enable iframe loading screen; [Number] Set loading screen hide delay.
|
||||
|useNavbarItems | Boolean | true | Whether to open navbar menu items, instead of open only sidebar menu items.
|
||||
|---
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
|
||||
##### Methods
|
||||
{: .mt-4}
|
||||
|
||||
|---
|
||||
| Method | Description
|
||||
|-|-
|
||||
|createTab| Create tab by title, link & uniqueName. Available arguments: title `String`, link `String`, uniqueName `String`, autoOpen `Boolean/Optional`.
|
||||
|openTabSidebar| Create tab by sidebar menu item. Available arguments: item `String|jQuery Object`, autoOpen `Boolean/Optional`.
|
||||
|switchTab| Switch tab by iframe tab navbar item. Available arguments: item `String|jQuery Object`.
|
||||
|removeActiveTab| Remove active iframe tab.
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
Example: `$('.content-wrapper').IFrame('createTab', 'Home', 'index.html, 'index', true)`
|
||||
43
account/theme/pages/docs/javascript/layout.md
Normal file
43
account/theme/pages/docs/javascript/layout.md
Normal file
@ -0,0 +1,43 @@
|
||||
---
|
||||
layout: page
|
||||
title: Layout Plugin
|
||||
---
|
||||
|
||||
The layout plugin manages the layout in case of css failure to reset the height or width of the content.
|
||||
|
||||
##### Usage
|
||||
This plugin is activated automatically upon window load.
|
||||
|
||||
##### Options
|
||||
{: .mt-4}
|
||||
|
||||
|---
|
||||
| Name | Type | Default | Description
|
||||
|-|-|-|-
|
||||
|scrollbarTheme | String | `os-theme-light` | Scrollbar Theme used while SideBar Fixed
|
||||
|scrollbarAutoHide | String | `l` | Scrollbar auto-hide trigger
|
||||
|panelAutoHeight | Boolean\|Numeric | true | Panel Height Correction (`true` = default correction on load/resize; numeric = offset the correction on load/resize)
|
||||
|panelAutoHeightMode | String | `min-height` | Panel Height Mode (`min-height` = sets the `min-height`-attribute to the content-wrapper; `height` = sets `height`-attribute to the content-wrapper)
|
||||
|preloadDuration | Integer | 200 | Preloader Duration (Set in milliseconds)
|
||||
|loginRegisterAutoHeight | Boolean\|Integer | true | Login & Register Height Correction (`true` = single correction on load; integer = correction with a interval based on the interger)
|
||||
|---
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
> ##### Tip!
|
||||
> You can use any option via the data-attributes like this.
|
||||
> ```html
|
||||
> <body data-scrollbar-auto-hide="n">...</body>
|
||||
> ```
|
||||
{: .quote-info}
|
||||
|
||||
##### Methods
|
||||
{: .mt-4}
|
||||
|
||||
|---
|
||||
| Method | Description
|
||||
|-|-
|
||||
|fixLayoutHeight | Fix the content / control sidebar height and activates OverlayScrollbars for sidebar / control sidebar
|
||||
|fixLoginRegisterHeight | Fix the login & register body height
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
Example: `$('body').Layout('fixLayoutHeight')`
|
||||
95
account/theme/pages/docs/javascript/navbar-search.md
Normal file
95
account/theme/pages/docs/javascript/navbar-search.md
Normal file
@ -0,0 +1,95 @@
|
||||
---
|
||||
layout: page
|
||||
title: Navbar Search Plugin
|
||||
---
|
||||
|
||||
The navbar search plugin provides the functionality to show/hide a search input across the whole header.
|
||||
|
||||
##### Usage
|
||||
|
||||
This plugin can be activated as a jQuery plugin or using the data API.
|
||||
|
||||
###### Data API
|
||||
{: .text-bold }
|
||||
|
||||
Activate the plugin by adding the following data-attribue `data-widget="navbar-search"` to the `.navbar-search-block` inside the header. You can use the HTML Markup below for a quick start.
|
||||
|
||||
###### jQuery
|
||||
{: .text-bold }
|
||||
|
||||
The jQuery API provides more customizable options that allows the developer to pre-process the request before rendering and post-process it after rendering.
|
||||
|
||||
```js
|
||||
("[data-widget="navbar-search"]").SiteSearch(options)
|
||||
```
|
||||
|
||||
##### HTML Markup
|
||||
Place this HTML Markup after inside the header.
|
||||
```html
|
||||
<a data-widget="navbar-search" href="#" role="button">
|
||||
<i class="fas fa-search"></i>
|
||||
</a>
|
||||
<div class="navbar-search-block">
|
||||
<form class="form-inline">
|
||||
<div class="input-group input-group-sm">
|
||||
<input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-navbar" type="submit">
|
||||
<i class="fas fa-search"></i>
|
||||
</button>
|
||||
<button class="btn btn-navbar" type="button" data-widget="navbar-search">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
|
||||
Or you can place the search button inside the navbar as nav-item with this markup:
|
||||
```html
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-widget="navbar-search" href="#" role="button">
|
||||
<i class="fas fa-search"></i>
|
||||
</a>
|
||||
<div class="navbar-search-block">
|
||||
<form class="form-inline">
|
||||
<div class="input-group input-group-sm">
|
||||
<input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-navbar" type="submit">
|
||||
<i class="fas fa-search"></i>
|
||||
</button>
|
||||
<button class="btn btn-navbar" type="button" data-widget="navbar-search">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</li>
|
||||
```
|
||||
|
||||
##### Options
|
||||
{: .mt-4}
|
||||
|
||||
|---
|
||||
| Name | Type | Default | Description
|
||||
|-|-|-|-
|
||||
| resetOnClose | Boolean | false | Reset Input on Close/Hide.
|
||||
|target | String | `.navbar-search-block` | Target navbar-search-block to handle multiple navbar-search-blocks.
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
|
||||
##### Methods
|
||||
{: .mt-4}
|
||||
|
||||
|---
|
||||
| Method | Description
|
||||
|-|-
|
||||
|toggle | Toggles the search block.
|
||||
|close | Closes the search block.
|
||||
|open | Opens the search block.
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
Example: `$('[data-widget="navbar-search"]').SiteSearch('toggle')`
|
||||
69
account/theme/pages/docs/javascript/push-menu.md
Normal file
69
account/theme/pages/docs/javascript/push-menu.md
Normal file
@ -0,0 +1,69 @@
|
||||
---
|
||||
layout: page
|
||||
title: Push Menu Plugin
|
||||
---
|
||||
|
||||
The PushMenu plugin controls the toggle button of the main sidebar.
|
||||
|
||||
##### Usage
|
||||
This plugin can be activated as a jQuery plugin or using the data api.
|
||||
|
||||
###### Data API
|
||||
{: .text-bold }
|
||||
Add `data-widget="pushmenu"` to a button to activate the plugin.
|
||||
```html
|
||||
<button class="btn btn-primary" data-widget="pushmenu">Toggle Sidebar</button>
|
||||
```
|
||||
|
||||
###### jQuery
|
||||
{: .text-bold }
|
||||
```js
|
||||
$('.sidebar-toggle-btn').PushMenu(options)
|
||||
```
|
||||
|
||||
##### Options
|
||||
{: .mt-4}
|
||||
|
||||
|---
|
||||
| Name | Type | Default | Description
|
||||
|-|-|-|-
|
||||
|autoCollapseSize | Boolean/Number | FALSE | Screen width in pixels to trigger auto collapse sidebar
|
||||
|enableRemember | Boolean | FALSE | Remember sidebar state and set after page refresh.
|
||||
|noTransitionAfterReload | Boolean | TRUE | Hold Transition after page refresh.
|
||||
|animationSpeed | Boolean | `300` | Set the animation/transition speed equals to the scss transition speed.
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
> ##### Tip!
|
||||
> You can use any option via the data-attributes like this to enable auto collapse sidebar on 768 pixels width.
|
||||
> ```html
|
||||
> <button class="btn btn-primary" data-widget="pushmenu" data-auto-collapse-size="768">Toggle Sidebar</button>
|
||||
> ```
|
||||
{: .quote-info}
|
||||
|
||||
|
||||
##### Events
|
||||
{: .mt-4}
|
||||
|
||||
|---
|
||||
| Event Type | Description
|
||||
|-|-
|
||||
|collapsed.lte.pushmenu | Fired when the sidebar collapsed.
|
||||
|collapsed-done.lte.pushmenu | Fired when the sidebar is fully collapsed.
|
||||
|shown.lte.pushmenu | Fired when the sidebar shown.
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
Example: `$(document).on('shown.lte.pushmenu', handleExpandedEvent)`
|
||||
|
||||
|
||||
##### Methods
|
||||
{: .mt-4}
|
||||
|
||||
|---
|
||||
| Method | Description
|
||||
|-|-
|
||||
|toggle | Toggles the state of the menu between expanded and collapsed.
|
||||
|collapse | Collapses the sidebar menu.
|
||||
|expand | Expands the sidebar menu
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
Example: `$('[data-widget="pushmenu"]').PushMenu('toggle')`
|
||||
71
account/theme/pages/docs/javascript/sidebar-search.md
Normal file
71
account/theme/pages/docs/javascript/sidebar-search.md
Normal file
@ -0,0 +1,71 @@
|
||||
---
|
||||
layout: page
|
||||
title: Sidebar Search Plugin
|
||||
---
|
||||
|
||||
The sidebar search plugin provides the functionality to search menu items from the sidebar menu entries.
|
||||
|
||||
##### Usage
|
||||
|
||||
This plugin can be activated as a jQuery plugin or using the data API.
|
||||
|
||||
###### Data API
|
||||
{: .text-bold }
|
||||
|
||||
Activate the plugin by adding the following data-attribue `data-widget="sidebar-search"` to a input-group inside the sidebar. You can use the HTML Markup below for a quick start.
|
||||
|
||||
|
||||
###### jQuery
|
||||
{: .text-bold }
|
||||
|
||||
The jQuery API provides more customizable options that allows the developer to pre-process the request before rendering and post-process it after rendering.
|
||||
|
||||
```js
|
||||
("[data-widget="sidebar-search"]").SidebarSearch(options)
|
||||
```
|
||||
|
||||
##### HTML Markup
|
||||
Place this HTML Markup after `div.user-panel`.
|
||||
```html
|
||||
<div class="form-inline">
|
||||
<div class="input-group" data-widget="sidebar-search">
|
||||
<input class="form-control form-control-sidebar" type="search" placeholder="Search" aria-label="Search">
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-sidebar">
|
||||
<i class="fas fa-search fa-fw"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
##### Options
|
||||
{: .mt-4}
|
||||
|
||||
|---
|
||||
| Name | Type | Default | Description
|
||||
|-|-|-|-
|
||||
| arrowSign | String | '->' | Arrow Sign between the menu item path.
|
||||
| minLength | Number | 3 | Min search query length.
|
||||
| maxResults | Number | 7 | Max search results to display.
|
||||
| highlightName | Boolean | TRUE | Whether to highlight menu item name.
|
||||
| highlightPath | Boolean | FALSE | Whether to highlight menu item path.
|
||||
| highlightClass | String | 'text-light' | Hightlight class.
|
||||
| notFoundText | String | 'No element found! | Response text if no menu item found.
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
|
||||
##### Methods
|
||||
{: .mt-4}
|
||||
|
||||
|---
|
||||
| Method | Description
|
||||
|-|-
|
||||
|init | Init's the SidebarSearch Plugin and registers all visible menu items.
|
||||
|toggle | Toggles the search dropdown list.
|
||||
|close | Closes the search dropdown list.
|
||||
|open | Opens the search dropdown list.
|
||||
|search | Triggers a search.
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
Example: `$('[data-widget="sidebar-search"]').SidebarSearch('toggle')`
|
||||
71
account/theme/pages/docs/javascript/toasts.md
Normal file
71
account/theme/pages/docs/javascript/toasts.md
Normal file
@ -0,0 +1,71 @@
|
||||
---
|
||||
layout: page
|
||||
title: Toasts Plugin
|
||||
---
|
||||
|
||||
The toasts plugin provides simple functionality to create easily a bootstrap toast.
|
||||
|
||||
##### Usage
|
||||
This plugin can be activated as a jQuery plugin.
|
||||
|
||||
###### jQuery
|
||||
{: .text-bold }
|
||||
The jQuery API provides more customizable options that allows the developer to handle checking and unchecking the todo list checkbox events.
|
||||
```js
|
||||
$(document).Toasts('create', {
|
||||
title: 'Toast Title',
|
||||
body: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
|
||||
})
|
||||
```
|
||||
|
||||
|
||||
##### Options
|
||||
{: .mt-4}
|
||||
|
||||
|---
|
||||
| Name | Type | Default | Description
|
||||
|-|-|-|-
|
||||
|position | String | Position.TOP_RIGHT | Position of the toast, available options: `topRight`, `topLeft`, `bottomRight` & `bottomLeft`
|
||||
|fixed | Boolean | true | Whether to set toasts container fixed.
|
||||
|autohide | Boolean | false | Whether to auto hide toast
|
||||
|autoremove | Boolean | true | Whether to auto remove toast after closing
|
||||
|delay | Integer | 1000 | Auto Hide delay
|
||||
|fade | Boolean | true | Whether to fade toast
|
||||
|icon | String | null | Icon class (e.g. `fas fa-exclamation-triangle`)
|
||||
|image | String | null | Image url
|
||||
|imageAlt | String | null | Image alt
|
||||
|imageHeight | String | '25px' | Image size of toast
|
||||
|title | String | null | Title of toast
|
||||
|subtitle | String | null | Subtitle of toast
|
||||
|close | Boolean | true | Whether to add close button to toast
|
||||
|body | String | null | Body of toast
|
||||
|class | String | null | Additional classes for the toast
|
||||
|---
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
|
||||
##### Events
|
||||
{: .mt-4}
|
||||
All event are sent to `body`.
|
||||
|
||||
|---
|
||||
| Event Type | Description
|
||||
|-|-
|
||||
|init.lte.toasts | Fired when constructor is done
|
||||
|created.lte.toasts | Fired when the toast is created
|
||||
|removed.lte.toasts | Fired when the toast is removed
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
Example: `$('body').on('created.lte.toast', handleCreateEvent)`
|
||||
|
||||
|
||||
##### Methods
|
||||
{: .mt-4}
|
||||
|
||||
|---
|
||||
| Method | Description
|
||||
|-|-
|
||||
|create | Creates a toast
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
Example: `$(document).Toasts('create', {title: 'Toast Title'})`
|
||||
39
account/theme/pages/docs/javascript/todo-list.md
Normal file
39
account/theme/pages/docs/javascript/todo-list.md
Normal file
@ -0,0 +1,39 @@
|
||||
---
|
||||
layout: page
|
||||
title: Todo List Plugin
|
||||
---
|
||||
|
||||
The todo list plugin provides simple functionality to the todo list component.
|
||||
|
||||
##### Usage
|
||||
This plugin can be activated as a jQuery plugin or using the data api.
|
||||
|
||||
###### Data API
|
||||
{: .text-bold }
|
||||
Activate the plugin by adding `data-widget="todo-list"` to the ul element. If you need to provide onCheck and onUncheck methods, please use the jQuery API.
|
||||
|
||||
###### jQuery
|
||||
{: .text-bold }
|
||||
The jQuery API provides more customizable options that allows the developer to handle checking and unchecking the todo list checkbox events.
|
||||
```js
|
||||
$('#my-todo-list').TodoList({
|
||||
onCheck: function(checkbox) {
|
||||
// Do something when the checkbox is checked
|
||||
},
|
||||
onUnCheck: function(checkbox) {
|
||||
// Do something after the checkbox has been unchecked
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
|
||||
##### Options
|
||||
{: .mt-4}
|
||||
|
||||
|---
|
||||
| Name | Type | Default | Description
|
||||
|-|-|-|-
|
||||
|onCheck | Function | Anonymous Function | Handle checkbox onCheck event. The checkbox is passed as parameter to the function.
|
||||
|onUnCheck | Function | Anonymous Function | Handle checkbox onUnCheck event. The checkbox is passed as parameter to the function.
|
||||
|---
|
||||
{: .table .table-bordered .bg-light}
|
||||
74
account/theme/pages/docs/javascript/treeview.md
Normal file
74
account/theme/pages/docs/javascript/treeview.md
Normal file
@ -0,0 +1,74 @@
|
||||
---
|
||||
layout: page
|
||||
title: Treeview Plugin
|
||||
---
|
||||
|
||||
The Treeview plugin converts a nested list into a tree view where sub menus can be expanded.
|
||||
|
||||
##### Usage
|
||||
This plugin can be activated as a jQuery plugin or using the data api.
|
||||
|
||||
###### Data API
|
||||
{: .text-bold }
|
||||
|
||||
Add `data-widget="treeview"` to any `ul` or `ol` element to activate the plugin.
|
||||
|
||||
```html
|
||||
<ul data-widget="treeview">
|
||||
<li><a href="#">One Level</a></li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Multilevel</a>
|
||||
<ul class="nav-treeview">
|
||||
<li><a href="#">Level 2</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
###### jQuery
|
||||
{: .text-bold }
|
||||
```js
|
||||
$('ul').Treeview(options)
|
||||
```
|
||||
|
||||
##### Options
|
||||
{: .mt-4}
|
||||
|
||||
|---
|
||||
| Name | Type | Default | Description
|
||||
|-|-|-|-
|
||||
|animationSpeed | Number | 300 | Speed of slide down/up animation in milliseconds.
|
||||
|accordion | Boolean | TRUE | Whether to collapse the open menu when expanding another.
|
||||
|trigger | String | `[data-widget="treeview"] .nav-link` | Selector of the element that should respond to the click and result in expanding or collapsing it sibling sub menu.
|
||||
|expandSidebar | Boolean | FALSE | Whether to expand sidebar on open menu.
|
||||
|sidebarButtonSelector | String | `[data-widget="pushmenu"]` | Selector of the sidebar button.
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
> ##### Tip!
|
||||
> You can use any option via the data-attributes like this.
|
||||
> ```html
|
||||
> <ul data-widget="treeview" data-accordion="false">...</ul>
|
||||
> ```
|
||||
{: .quote-info}
|
||||
|
||||
> ##### IMPORTANT!
|
||||
> If you want to use a multiple treeview's beside the main-sidebar treeview,
|
||||
> then you need to add to all treeview's a ID-tag.
|
||||
> ```html
|
||||
> <ul data-widget="treeview" id="someIdNameOrSo" data-accordion="false">...</ul>
|
||||
> ```
|
||||
{: .quote-danger}
|
||||
|
||||
##### Events
|
||||
{: .mt-4}
|
||||
|
||||
|---
|
||||
| Event Type | Description
|
||||
|-|-
|
||||
|expanded.lte.treeview | Triggered after a sub menu expands.
|
||||
|collapsed.lte.treeview | Triggered after a sub menu collapses.
|
||||
|load.lte.treeview | Triggered after the plugin initialized via data api.
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
Example: `$('ul').on('expanded.lte.treeview', handleExpandedEvent)`
|
||||
|
||||
Reference in New Issue
Block a user