# Getting Started

{% hint style="danger" %}
**@swimlane/ngx-dnd latest** will not be compatible with Pages Angular. Please replace the \
"@swimlane/ngx-dnd": "^8.1.0"  to  "@swimlane/ngx-dnd": "8.1.0" in your package.json. Please do run the command "npm install". Contact <support@revox.io> for any issues
{% endhint %}

## Introduction

Pages is carefully well thought UI frame work that is built on top of Bootstrap 4 and Angular 8+, Its hand crafted components look great on all devices and works super fast even on mobile. Pages ships with builtin native angular components -

* Cards
* Sliders
* Progress bars
* Notifications
* Date picker
* Time picker
* Drag and Drop Upload
* Select / Multi dropdown
* Switch Toggle
* List View
* Parallax
* Tag Input
* Retina&#x20;
* Siderbar
* Quickview
* Views

and many more. We have included popular angular components by thirdparty authors like \
ngx-bootstrap, ngnx-datatable and echarts.

## Getting Started

Use our `getting_started/angular` project to bootstrap your new idea. All demo content are stripped down . You can follow this documentation guide to include a other various components. But you can also refer up the demo source located in `demo/angular/`&#x20;

First follow angular [documentation](https://cli.angular.io/) on building and deploying

To run development server, navigate to demo/angular folder and run the command on your command line

```bash
ng serve
```

To deploy your app for production, navigate to demo/angular folder and run the command on your command line

```
ng build --prod
```

Once your server is up and running navigate to the following URLs&#x20;

* <http://localhost:4200/condensed/>
* <http://localhost:4200/corporate/>
* [http://localhost:4200/simplywhite/](http://localhost:4200/condensed/)
* [http://localhost:4200/executive/](http://localhost:4200/simplywhite/)
* <http://localhost:4200/casual/>

## Common Issues

### Error in rxjs module

`ERROR in node_modules/rxjs/internal/types.d.ts(81,44): error TS1005: ';' expected.`

* Remove the “node\_modules” folder from your project
* Go to package.json
* Change rxjs version to “rxjs”: “6.3.3”
* Go to console and run “npm install” again
* And then run “ng serve

### Invalid or unexpected token

After running ng serve command you get this error\
Invalid or unexpected token

* Delete package-lock.json
* Go to console and run “npm install” again
* And then run “ng serve


# Layouts

Layouts in Pages help you to customize the main view of your app, this comes with pre built layout options that will be updated over time. Pages now comes with 5 Different layouts and each layout will have 7 themes.

Location : @pages/layouts\
\
All Layouts are extended from the super class rootLayout which is located in `@pages/layouts/root`

## Root Layout

### API <a href="#api" id="api"></a>

| Property         | Description            | Type    | Default | Scope  |
| ---------------- | ---------------------- | ------- | ------- | ------ |
| contentClass     | Set content div class  | string  | null    | Public |
| pageWrapperClass | Set Page Wrapper Class | string  | null    | Public |
| footer           | Show / Hide Footer     | boolean | true    | Public |

### Functions

These functions can be called in any sub class layout.

```
changeLayout(type:string);
```

Set body class layout. eg : - "menu-pinned' <br>

```
openQuickView()
```

Open Quick view<br>

```
openSearch()
```

Open Quick Search<br>

```
toggleMenuPin($e)
```

Quick function to toggle fixed sidebar menu<br>

```
toggleMenuDrawer()
```

Menu drawer in side bar. This function will close and open it.<br>

```
toggleMobileSidebar()
```

Open and Close sidebar menu on mobile only<br>

```
toggleSecondarySideBar()
```

Open and Close secondary sidebar on mobile only<br>

```
toggleHorizontalMenuMobile()
```

Open and Close Sidebar on mobile - Implemented for Horizontal app menu\ <br>

## Sub Layouts

Layouts that are implemented extending root layout

### **condensed**

One of our most popular Layouts, Pages Condensed offers a wide range of responsive space specifically for dashboards with heavy content. \
\
Location -`@pages/layouts/condensed`\
\ <br>

### **casual**

A new tone of voice – a relaxed, friendly, joyful layout that quickly makes the user experience more personal, casual and fun!. Comes with horizontal layout and sidebar option \
\
Location -`@pages/layouts/casual`\
\ <br>

### **corporate**

Corporate is a bold, cool Layout that elevates your content by utilizing a clean layout and a simple, open interface. Contains boxed version and secondary sidebar. \
\
Location -`@pages/layouts/corporate`\
\ <br>

### **simplywhite**

In a world of complexity, Simplicity defeats stress. Simply white is an open simple, minimal yet striking layout, built to combat stress. Contains boxed version and secondary sidebar. \
\
Location -`@pages/layouts/simplywhite`\
\ <br>

### **executive**

A Professional template with a timeless look, best suited to quickly create a serious organized experience. Comes with horizontal layout and sidebar option \
\
Location -`@pages/layouts/executive`<br>

## Where are the styles imported?

Styles are imported for each layout SASS file. For example executive styles are imported from `@pages/layouts/executive/executive.component.scss`

{% hint style="info" %}
Note all components are styles are imported directly. You may wish to include what you use or import it directly to the component you use
{% endhint %}


# Routing

## **Basic Routing**

Routing is a key component is a must read if you want to get a clear understanding of how layouts change from each route. All sample routes are in `src/app/app.routing.ts`. You may wish to remove all routes and add your routes. First select the what your [root layout](/angular/untitled) you want it to be. Here I will use Condensed layout

```javascript
import { Routes } from '@angular/router';
//Layouts
import { 
  CondensedComponent,
  BlankComponent,
} from './@pages/layouts';

//Single Page
import { CondensedDashboardComponent} from './dashboard/condensed/dashboard.component';

export const AppRoutes: Routes = [
  {
    path: 'home',
    component: CondensedComponent,
    children: [{
      path: 'dashboard',
      //Sub Single Page
      component: CondensedDashboardComponent
    }],
  },
]
```

CondensedComponent is your condensed layout located in @pages/layouts/condensed it contains HTML and SCSS imports required for it to work with all UI / form components scss files as well. In the first route I have used

```javascript
  {
    path: 'home',
    component: CondensedComponent,
    children: [{
      path: 'dashboard',
      component: CondensedDashboardComponent
    }],
  },
```

`component: CondensedComponent` is where the root layout is assigned and inside the children is your sub pages. So I have imported a sample sub page and assigned it<br>

```javascript
{
      path: 'dashboard',
      component: CondensedDashboardComponent
}
```

Your routing path will `home/dashboard`

###

### Nested Routing

Instead of routing to one single page you may want to route into a sub router making it a nested routing.

```javascript
  {
    path: 'home',
    component: CondensedComponent,
    children: [{
      path: 'ui',
      loadChildren: './ui/ui.module#UiModule'
    }]
  }
```

Instead of loading a single component you simply add loadChildren: './ui/ui.module#UiModule' you need to make sure that ui.module or your sub module globally assigned / imported in the app.module.ts file for the router to understand.\
\
Next in your sub module folder make routing.ts file. In the example src/app/ui/ui.routing.ts

```javascript
import { Routes } from '@angular/router';

//Sample Demo pages
import { ButtonspageComponent } from './buttonspage/buttonspage.component';

export const uiRoute: Routes = [
    {
      path: 'buttons',
      component: ButtonspageComponent
    }
]
```

This will import all the sub pages in that folder with its path and component name as show in the sample code above.

Lastly make a submodule folder so your route component can import them all at once. This sub module folder will import any dependencies required in your sub pages.

```javascript
//Angular Dependencies
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { HttpModule} from '@angular/http';
import { HttpClientModule } from '@angular/common/http';
//Requires Forms to be imported for Checkbox buttons
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

//This is your sub router
import { uiRoute } from './ui.routing';

@NgModule({
  imports: [
    CommonModule,
    SharedModule,
    HttpModule,
    HttpClientModule,
    RouterModule.forChild(uiRoute)
  ],
  declarations: [ButtonspageComponent],
  providers: []
})
export class UiModule { }
```

The above code is a sample module ts that has its own sub router `import { uiRoute } from './ui.routing';` and declarations of its own sub pages. Importing this to the main app router will help create nested routing&#x20;

###

### **Missing styles**

While your importing layouts to your main app.routing.ts. If a component has missing styles check @pages/layout/layout-name/layout-name.component.scss;

eg : @pages/layout/condensed/condensed.scss;


# Styles

Pages Angular is build using SCSS and you can find it in src/app/@pages/styles. This folder contains all modules with vendor / 3rd party plugin styles.

{% hint style="warning" %}
Its important to notice that each demo page / layout will have different modules included on runtime.
{% endhint %}

## How each page / layout has its own styles included&#x20;

Pages depend on layouts which are found in src/app/@pages/layouts. Layouts differ from the each route you have set in your main `src/app/app.routing.ts` &#x20;

example login and other session pages will not have most of the style modules included in other pages like progress bar & charts

```
{
    path: 'condensed',
    component: BlankComponent,
    children: [{
      path: 'session',
      loadChildren: './session/session.module#SessionModule'
    }]
  },
```

the layout used in this is called "BlankComponent" if you visit @pages/layout/blank/blank.component.scss imported from styles folder.

Likewise each layout will have its own .scss file having its own module.


# Header

pg-header

## Importing

First import it to your app module or any submodule as you wish

```typescript
import { HeaderComponent } from './@pages/components/header/header.component';
@NgModule({
  declarations: [HeaderComponent,...]
})
export class AppModule(){}
```

## How to use&#x20;

{% tabs %}
{% tab title="HTML" %}

```markup
<pg-header [boxed]="_boxed">
<!-- YOUR HEADER CONTENT GOES HERE -->
</pg-header>
```

{% endtab %}
{% endtabs %}

## API

| Property | Description                        | Type    | Default |
| -------- | ---------------------------------- | ------- | ------- |
| boxed    | Wraps content with a container div | boolean | false   |


# Menu Items

pg-menu-items

## Importing

First import it to your app module or any submodule as you wish

```typescript
import { SharedModule } from './@pages/components/shared.module';
@NgModule({
  imports: [SharedModule,...]
})
export class AppModule(){}
```

## How to use&#x20;

{% tabs %}
{% tab title="HTML" %}

```markup
<pg-menu-items [Items]="menuLinks">
</pg-menu-items>
```

{% endtab %}

{% tab title="Typescript" %}

```typescript
    menuLinks = [
      {
        label:"Dashboard",
        details:"12 New Updates",
        routerLink:"/",
        iconType:"pg",
        iconName:"home",
        thumbNailClass:"bg-success"
      },
      {
          label:"Email",
          details:"234 New Emails",
          routerLink:"email/list",
          iconType:"pg",
          iconName:"mail"
      },
      {
        label:"Social",
        routerLink:"social",
        iconType:"pg",
        iconName:"social"
      },
      {
          label:"Builder",
          routerLink:"builder",
          iconType:"pg",
          iconName:"layouts"
      },
      {
        label:"Layouts",
        iconType:"pg",
        iconName:"layouts2",
        toggle:"close",
        submenu:[
          {
            label:"Default",
            routerLink:"layouts/default",
            iconType:"letter",
            iconName:"dl",
          },
          {
            label:"Secondary",
            routerLink:"layouts/secondary",
            iconType:"letter",
            iconName:"sl",
          },
          {
            label:"Boxed",
            routerLink:"layouts/boxed",
            iconType:"letter",
            iconName:"bl",
          }
        ]
    },
      {
        label:"UI Elements",
        iconType:"letter",
        iconName:"Ui",
        toggle:"close",
        submenu:[
          {
            label:"Color",
            routerLink:"ui/buttons",
            iconType:"letter",
            iconName:"c",
          },
          {
            label:"Typography",
            routerLink:"ui/typography",
            iconType:"letter",
            iconName:"t",
          },
          {
            label:"Icons",
            routerLink:"ui/icons",
            iconType:"letter",
            iconName:"i",
          },
          {
            label:"Buttons",
            routerLink:"ui/buttons",
            iconType:"letter",
            iconName:"b",
          },
          {
            label:"Notifications",
            routerLink:"ui/notifications",
            iconType:"letter",
            iconName:"n",
          },
          {
            label:"Progress & Activity",
            routerLink:"ui/progress",
            iconType:"letter",
            iconName:"pa",
          },
          {
            label:"Tabs & Accordians",
            routerLink:"ui/tabs",
            iconType:"letter",
            iconName:"a",
          },
          {
            label:"Sliders",
            routerLink:"ui/sliders",
            iconType:"letter",
            iconName:"s",
          },
          {
            label:"Treeview",
            routerLink:"ui/tree",
            iconType:"letter",
            iconName:"tv",
          }
        ]
      },
      {
          label:"Forms",
          iconType:"pg",
          iconName:"form",
          toggle:"close",
          submenu:[
            {
              label:"Form Elements",
              routerLink:"forms/elements",
              iconType:"letter",
              iconName:"fe",
            },
            {
              label:"Form Layouts",
              routerLink:"forms/layouts",
              iconType:"letter",
              iconName:"fl",
            },
            {
              label:"Form Wizard",
              routerLink:"forms/wizard",
              iconType:"letter",
              iconName:"fq",
            }
          ]
      },
      {
          label:"Cards",
          routerLink:"cards",
          iconType:"pg",
          iconName:"grid"
      },
      {
          label:"Views",
          routerLink:"views",
          iconType:"pg",
          iconName:"ui"
      },
      {
          label:"Tables",
          iconType:"pg",
          iconName:"tables",
          toggle:"close",
          submenu:[
            {
              label:"Basic Tables",
              routerLink:"tables/basic",
              iconType:"letter",
              iconName:"bt",
            },
            {
              label:"Advance Tables",
              routerLink:"tables/advance",
              iconType:"letter",
              iconName:"dt",
            }
          ]
      },
      {
          label:"Maps",
          iconType:"pg",
          iconName:"map",
          toggle:"close",
          submenu:[
            {
              label:"Google Maps",
              routerLink:"tables/basic",
              iconType:"letter",
              iconName:"gm",
            },
            {
              label:"Vector Maps",
              routerLink:"tables/data",
              iconType:"letter",
              iconName:"vm",
            }
          ]
      },
      {
          label:"Charts",
          routerLink:"charts",
          iconType:"pg",
          iconName:"charts"
      },
      {
          label:"Extra",
          iconType:"pg",
          iconName:"bag",
          toggle:"close",
          submenu:[
            {
              label:"Invoice",
              routerLink:"extra/invoice",
              iconType:"letter",
              iconName:"in",
            },
            {
              label:"404 Page",
              routerLink:"tables/data",
              iconType:"letter",
              iconName:"pg",
            },
            {
              label:"500 Page",
              routerLink:"tables/data",
              iconType:"letter",
              iconName:"pg",
            },
            {
              label:"Login",
              routerLink:"session/login",
              iconType:"letter",
              iconName:"l",
            },
            {
              label:"Register",
              routerLink:"session/register",
              iconType:"letter",
              iconName:"re",
            },
            {
              label:"Lockscreen",
              routerLink:"session/lock",
              iconType:"letter",
              iconName:"ls",
            },
            {
              label:"Gallery",
              routerLink:"extra/gallery",
              iconType:"letter",
              iconName:"gl",
            },
            {
              label:"Timeline",
              routerLink:"extra/timeline",
              iconType:"letter",
              iconName:"t",
            }
          ]
      },
      {
        label:"Docs",
        routerLink:"http://pages.revox.io/dashboard/2.2.0/docs/",
        targe:"_blank",
        iconType:"pg",
        iconName:"note"
      },
      {
        label:"Changelog",
        externalLink:"http://changelog.pages.revox.io/",
        targe:"_blank",
        iconType:"letter",
        iconName:"Cl"
      },
  ];
```

{% endtab %}
{% endtabs %}

### Menu Items Structure

| Label        | Description                                                           | Type            | Example                  |
| ------------ | --------------------------------------------------------------------- | --------------- | ------------------------ |
| label        | Name of the menu item that appears                                    | string          | Dashboard                |
| details      | Sub Text that is shown below the label                                | string          | 2 Unread                 |
| routerLink   | Route link path                                                       | string          | /ui/buttons              |
| iconType     | Icon type - Font awesome, Pages Icons, Feather & also supports Letter | string          | pg, fe, letter, material |
| iconName     | The class name of the icon or abbreviation letters                    | string          | pg-user                  |
| toggle       | Sub menu close or open : "close", "open"                              | string          | close / open             |
| externalLink | Used for connecting to another URL                                    | string          | <http://example.com>     |
| target       | Used with "externalLink" to open in a new window / tab                | string          | \_blank                  |
| submenu      | Sub menu items                                                        | array\[]:string |                          |


# Sidebar

Pages Sidebar

## Importing

First import it to your app module or any submodule as you wish

```typescript
import { SidebarComponent } from './@pages/components/sidebar/sidebar.component';
import { SharedModule } from './@pages/components/shared.module';
@NgModule({
  declarations : [SidebarComponent,...]
  imports: [SharedModule,...]
})
export class AppModule(){}
```

## Example Menu

Use the appropriate regions and depends on pg-menu-items for showing the menu links

{% content-ref url="/pages/-LDVoUEnk1gjDfSTsi\_H" %}
[Menu Items](/angular/components/menu-items)
{% endcontent-ref %}

{% tabs %}
{% tab title="HTML" %}
{% code title="" %}

```markup
	<pg-sidebar>
		<ng-template #sideBarOverlay>
			<div class="row">
			<div class="col-xs-6 no-padding">
				<a href="javascript:void(0)" class="p-l-40"><img src="assets/img/demo/social_app.svg" alt="socail">
				</a>
			</div>
			<div class="col-xs-6 no-padding">
				<a href="javascript:void(0)" class="p-l-10"><img src="assets/img/demo/email_app.svg" alt="socail">
				</a>
			</div>
			</div>
			<div class="row">
			<div class="col-xs-6 m-t-20 no-padding">
				<a href="javascript:void(0)" class="p-l-40"><img src="assets/img/demo/calendar_app.svg" alt="socail">
				</a>
			</div>
			<div class="col-xs-6 m-t-20 no-padding">
				<a href="javascript:void(0)" class="p-l-10"><img src="assets/img/demo/add_more.svg" alt="socail">
				</a>
			</div>
			</div>      
		</ng-template>
		<ng-template #sideBarHeader>
			<img src="assets/img/logo_white.png" alt="logo" class="brand" pgRetina src1x="assets/img/logo_white.png" src2x="assets/img/logo_white_2x.png" width="78" height="22">
			<div class="sidebar-header-controls">
				<button type="button" class="btn btn-xs sidebar-slide-toggle btn-link m-l-20 hidden-md-down" [class.active]="_menuDrawerOpen" (click)="toggleMenuDrawer()"><i class="fa fa-angle-down fs-16"></i>
				</button>
				<button type="button" class="btn btn-link hidden-md-down" data-toggle-pin="sidebar" (click)="toggleMenuPin()"><i class="fa fs-12"></i>
				</button>
			</div>
		</ng-template>
		<ng-template #menuItems>
			<pg-menu-items [Items]="menuLinks">
			</pg-menu-items>
		</ng-template>
	</pg-sidebar>
```

{% endcode %}
{% endtab %}

{% tab title="Typescript" %}

```typescript
    menuLinks = [
      {
        label:"Dashboard",
        details:"12 New Updates",
        routerLink:"/",
        iconType:"pg",
        iconName:"home",
        thumbNailClass:"bg-success"
      },
      {
          label:"Email",
          details:"234 New Emails",
          routerLink:"email/list",
          iconType:"pg",
          iconName:"mail"
      },
      {
        label:"Social",
        routerLink:"social",
        iconType:"pg",
        iconName:"social"
      },
      {
          label:"Builder",
          routerLink:"builder",
          iconType:"pg",
          iconName:"layouts"
      },
      {
        label:"Layouts",
        iconType:"pg",
        iconName:"layouts2",
        toggle:"close",
        submenu:[
          {
            label:"Default",
            routerLink:"layouts/default",
            iconType:"letter",
            iconName:"dl",
          },
          {
            label:"Secondary",
            routerLink:"layouts/secondary",
            iconType:"letter",
            iconName:"sl",
          },
          {
            label:"Boxed",
            routerLink:"layouts/boxed",
            iconType:"letter",
            iconName:"bl",
          }
        ]
    },
      {
        label:"UI Elements",
        iconType:"letter",
        iconName:"Ui",
        toggle:"close",
        submenu:[
          {
            label:"Color",
            routerLink:"ui/buttons",
            iconType:"letter",
            iconName:"c",
          },
          {
            label:"Typography",
            routerLink:"ui/typography",
            iconType:"letter",
            iconName:"t",
          },
          {
            label:"Icons",
            routerLink:"ui/icons",
            iconType:"letter",
            iconName:"i",
          },
          {
            label:"Buttons",
            routerLink:"ui/buttons",
            iconType:"letter",
            iconName:"b",
          },
          {
            label:"Notifications",
            routerLink:"ui/notifications",
            iconType:"letter",
            iconName:"n",
          },
          {
            label:"Progress & Activity",
            routerLink:"ui/progress",
            iconType:"letter",
            iconName:"pa",
          },
          {
            label:"Tabs & Accordians",
            routerLink:"ui/tabs",
            iconType:"letter",
            iconName:"a",
          },
          {
            label:"Sliders",
            routerLink:"ui/sliders",
            iconType:"letter",
            iconName:"s",
          },
          {
            label:"Treeview",
            routerLink:"ui/tree",
            iconType:"letter",
            iconName:"tv",
          }
        ]
      },
      {
          label:"Forms",
          iconType:"pg",
          iconName:"form",
          toggle:"close",
          submenu:[
            {
              label:"Form Elements",
              routerLink:"forms/elements",
              iconType:"letter",
              iconName:"fe",
            },
            {
              label:"Form Layouts",
              routerLink:"forms/layouts",
              iconType:"letter",
              iconName:"fl",
            },
            {
              label:"Form Wizard",
              routerLink:"forms/wizard",
              iconType:"letter",
              iconName:"fq",
            }
          ]
      },
      {
          label:"Cards",
          routerLink:"cards",
          iconType:"pg",
          iconName:"grid"
      },
      {
          label:"Views",
          routerLink:"views",
          iconType:"pg",
          iconName:"ui"
      },
      {
          label:"Tables",
          iconType:"pg",
          iconName:"tables",
          toggle:"close",
          submenu:[
            {
              label:"Basic Tables",
              routerLink:"tables/basic",
              iconType:"letter",
              iconName:"bt",
            },
            {
              label:"Advance Tables",
              routerLink:"tables/advance",
              iconType:"letter",
              iconName:"dt",
            }
          ]
      },
      {
          label:"Maps",
          iconType:"pg",
          iconName:"map",
          toggle:"close",
          submenu:[
            {
              label:"Google Maps",
              routerLink:"tables/basic",
              iconType:"letter",
              iconName:"gm",
            },
            {
              label:"Vector Maps",
              routerLink:"tables/data",
              iconType:"letter",
              iconName:"vm",
            }
          ]
      },
      {
          label:"Charts",
          routerLink:"charts",
          iconType:"pg",
          iconName:"charts"
      },
      {
          label:"Extra",
          iconType:"pg",
          iconName:"bag",
          toggle:"close",
          submenu:[
            {
              label:"Invoice",
              routerLink:"extra/invoice",
              iconType:"letter",
              iconName:"in",
            },
            {
              label:"404 Page",
              routerLink:"tables/data",
              iconType:"letter",
              iconName:"pg",
            },
            {
              label:"500 Page",
              routerLink:"tables/data",
              iconType:"letter",
              iconName:"pg",
            },
            {
              label:"Login",
              routerLink:"session/login",
              iconType:"letter",
              iconName:"l",
            },
            {
              label:"Register",
              routerLink:"session/register",
              iconType:"letter",
              iconName:"re",
            },
            {
              label:"Lockscreen",
              routerLink:"session/lock",
              iconType:"letter",
              iconName:"ls",
            },
            {
              label:"Gallery",
              routerLink:"extra/gallery",
              iconType:"letter",
              iconName:"gl",
            },
            {
              label:"Timeline",
              routerLink:"extra/timeline",
              iconType:"letter",
              iconName:"t",
            }
          ]
      },
      {
        label:"Docs",
        routerLink:"http://pages.revox.io/dashboard/2.2.0/docs/",
        targe:"_blank",
        iconType:"pg",
        iconName:"note"
      },
      {
        label:"Changelog",
        externalLink:"http://changelog.pages.revox.io/",
        targe:"_blank",
        iconType:"letter",
        iconName:"Cl"
      },
  ];
```

{% endtab %}
{% endtabs %}


# Horizontal Menu

## Importing

First import it to your app module or any submodule as you wish

```typescript
import { HorizontalMenuComponent } from './@pages/components/horizontal-menu/horizontal-menu.component';
@NgModule({
  declarations : [HorizontalMenuComponent,...]
})
export class AppModule(){}
```

## Example Menu

{% tabs %}
{% tab title="HTML" %}
{% code title="" %}

```markup
    <pg-horizontal-menu [Items]="menuItems" HideExtra="4">
        <ng-template #mobileSidebarFooter>
            <a href="#" class="search-link d-flex justify-content-between align-items-center d-lg-none" (click)="openSearch($event)">Tap here to search <i class="pg pg-search float-right"></i></a>
        </ng-template>
    </pg-horizontal-menu>
```

{% endcode %}
{% endtab %}

{% tab title="Typescript" %}

```typescript
  menuItems = [
    {
      label:"Dashboard",
      details:"12 New Updates",
      routerLink:"/",
      iconType:"pg",
      iconName:"home",
    },
    {
      label:"Social",
      routerLink:"social",
      iconType:"pg",
      iconName:"social"
    },
    {
        label:"Builder",
        routerLink:"layouts/with-sidebar",
        iconType:"pg",
        iconName:"layouts"
    },
    {
      label:"UI Elements",
      iconType:"letter",
      iconName:"Ui",
      toggle:"close",
      mToggle:"close",
      submenu:[
        {
          label:"Color",
          routerLink:"ui/buttons",
          iconType:"letter",
          iconName:"c",
        },
        {
          label:"Typography",
          routerLink:"ui/typography",
          iconType:"letter",
          iconName:"t",
        },
        {
          label:"Icons",
          routerLink:"ui/icons",
          iconType:"letter",
          iconName:"i",
        },
        {
          label:"Buttons",
          routerLink:"ui/buttons",
          iconType:"letter",
          iconName:"b",
        },
        {
          label:"Notifications",
          routerLink:"ui/notifications",
          iconType:"letter",
          iconName:"n",
        },
        {
          label:"Progress & Activity",
          routerLink:"ui/progress",
          iconType:"letter",
          iconName:"pa",
        },
        {
          label:"Tabs & Accordians",
          routerLink:"ui/tabs",
          iconType:"letter",
          iconName:"a",
        },
        {
          label:"Sliders",
          routerLink:"ui/sliders",
          iconType:"letter",
          iconName:"s",
        },
        {
          label:"Treeview",
          routerLink:"ui/tree",
          iconType:"letter",
          iconName:"tv",
        }
      ]
    },
    {
        label:"Forms",
        iconType:"pg",
        iconName:"form",
        toggle:"close",
        mToggle:"close",
        submenu:[
          {
            label:"Form Elements",
            routerLink:"forms/elements",
            iconType:"letter",
            iconName:"fe",
          },
          {
            label:"Form Layouts",
            routerLink:"forms/layouts",
            iconType:"letter",
            iconName:"fl",
          },
          {
            label:"Form Wizard",
            routerLink:"forms/wizard",
            iconType:"letter",
            iconName:"fq",
          }
        ]
    },
    {
        label:"Cards",
        routerLink:"cards",
        iconType:"pg",
        iconName:"grid"
    },
    {
        label:"Views",
        routerLink:"views",
        iconType:"pg",
        iconName:"ui"
    },
    {
        label:"Tables",
        iconType:"pg",
        iconName:"tables",
        toggle:"close",
        mToggle:"close",
        submenu:[
          {
            label:"Basic Tables",
            routerLink:"tables/basic",
            iconType:"letter",
            iconName:"bt",
          },
          {
            label:"Advance Tables",
            routerLink:"tables/advance",
            iconType:"letter",
            iconName:"dt",
          }
        ]
    },
    {
        label:"Maps",
        iconType:"pg",
        iconName:"map",
        toggle:"close",
        mToggle:"close",
        submenu:[
          {
            label:"Google Maps",
            routerLink:"tables/basic",
            iconType:"letter",
            iconName:"gm",
          },
          {
            label:"Vector Maps",
            routerLink:"tables/data",
            iconType:"letter",
            iconName:"vm",
          }
        ]
    },
    {
        label:"Charts",
        routerLink:"charts",
        iconType:"pg",
        iconName:"charts"
    },
    {
        label:"Extra",
        iconType:"pg",
        iconName:"bag",
        toggle:"close",
        mToggle:"close",
        submenu:[
          {
            label:"Invoice",
            routerLink:"extra/invoice",
            iconType:"letter",
            iconName:"in",
          },
          {
            label:"404 Page",
            routerLink:"tables/data",
            iconType:"letter",
            iconName:"pg",
          },
          {
            label:"500 Page",
            routerLink:"tables/data",
            iconType:"letter",
            iconName:"pg",
          },
          {
            label:"Login",
            routerLink:"session/login",
            iconType:"letter",
            iconName:"l",
          },
          {
            label:"Register",
            routerLink:"session/register",
            iconType:"letter",
            iconName:"re",
          },
          {
            label:"Lockscreen",
            routerLink:"session/lock",
            iconType:"letter",
            iconName:"ls",
          },
          {
            label:"Gallery",
            routerLink:"extra/gallery",
            iconType:"letter",
            iconName:"gl",
          },
          {
            label:"Timeline",
            routerLink:"extra/timeline",
            iconType:"letter",
            iconName:"t",
          }
        ]
    },
    {
      label:"Docs",
      routerLink:"http://pages.revox.io/dashboard/2.2.0/docs/",
      iconType:"pg",
      iconName:"note"
    },
    {
      label:"Changelog",
      externalLink:"http://changelog.pages.revox.io/",
      iconType:"letter",
      iconName:"Cl"
    },
  ]
```

{% endtab %}
{% endtabs %}

## API

| Parameter | Instructions                                                                          | Type   | Defaults |
| --------- | ------------------------------------------------------------------------------------- | ------ | -------- |
| Items     | List of menu items in an array                                                        | array  | null     |
| HideExtra | Will force the assigned number of menu items to be hidden / wrapped in "more" section | number | null     |

## Menu Items Structure

| Label        | Description                                            | Type            | Example              |
| ------------ | ------------------------------------------------------ | --------------- | -------------------- |
| label        | Name of the menu item that appears                     | string          | Dashboard            |
| routerLink   | Route link path                                        | string          | /ui/buttons          |
| toggle       | Sub menu close or open : "close", "open"               | string          | close / open         |
| externalLink | Used for connecting to another URL                     | string          | <http://example.com> |
| target       | Used with "externalLink" to open in a new window / tab | string          | \_blank              |
| submenu      | Sub menu items                                         | array\[]:string | ​                    |


# Secondary Sidebar

pg-secondary-sidebar

## Importing

First import it to your app module or any submodule as you wish

```typescript
import { SharedModule } from './@pages/components/shared.module';
@NgModule({
  declarations : [SidebarComponent,...]
  imports: [SharedModule,...]
})
export class AppModule(){}
```

## Example

{% tabs %}
{% tab title="HTML" %}
{% code title="" %}

```markup
<pg-secondary-sidebar>
<!-- YOUR CONTENT GOES HERE -->
</pg-secondary-sidebar>
```

{% endcode %}
{% endtab %}
{% endtabs %}


# Quick View

## Importing

First import it to your app module or any submodule as you wish

```typescript
import { SharedModule } from './@pages/components/shared.module';
@NgModule({
  declarations : [SidebarComponent,...]
  imports: [SharedModule,...]
})
export class AppModule(){}
```

## Example

{% tabs %}
{% tab title="HTML" %}
{% code title="" %}

```markup
<pg-quickview></pg-quickview>
```

{% endcode %}
{% endtab %}
{% endtabs %}

## Location

This component is located in @pages/components/quickview

{% hint style="info" %}
It does not have an ngOutlet for adding content in. Use the quickview\.component.html&#x20;
{% endhint %}

## How to toggle

Include the Toggle service as mention here to any external component us wish

{% content-ref url="/pages/-LDpAgUow7zmLnxAaW0Q" %}
[Broken mention](broken://pages/-LDpAgUow7zmLnxAaW0Q)
{% endcontent-ref %}

Then use the following function to open

```
toggleQuickView()
```


# Overlay Search

## Importing

First import it to your app module or any submodule as you wish

```typescript
import { SharedModule } from './@pages/components/shared.module';
@NgModule({
  declarations : [SidebarComponent,...]
  imports: [SharedModule,...]
})
export class AppModule(){}
```

## Example

{% tabs %}
{% tab title="HTML" %}
{% code title="" %}

```markup
<pg-search-overlay></pg-search-overlay>
```

{% endcode %}
{% endtab %}
{% endtabs %}

## Location

This component is located in @pages/components/search-overlay

{% hint style="info" %}
It does not have an ngOutlet for adding content in. Use the search-overlay.component.html
{% endhint %}

## How to toggle

Include the Toggle service as mention here to any external component us wish

{% content-ref url="/pages/-LDpAgUow7zmLnxAaW0Q" %}
[Broken mention](broken://pages/-LDpAgUow7zmLnxAaW0Q)
{% endcontent-ref %}

Then use the following function to open

```
toggleSearch(true)
```


# Parallax

## Importing

First import it to your app module or any submodule as you wish

```typescript
import { SharedModule } from './@pages/components/shared.module';
@NgModule({
  imports: [SharedModule,...]
})
export class AppModule(){}
```

## Usage

Place "pg-parallax" in any div you want to get the parallax effect

{% tabs %}
{% tab title="HTML" %}

```markup
<div class="inner" pg-parallax>
</div>
```

{% endtab %}
{% endtabs %}


# Retina Image

Load Retina Images from img tag

## Importing

First import it to your app module or any submodule as you wish

```typescript
import { SharedModule } from './@pages/components/shared.module';
@NgModule({
  imports: [SharedModule,...]
})
export class AppModule(){}
```

## Usage

Place "pgRetina" in any image / img tag

{% tabs %}
{% tab title="HTML" %}

```markup
<img src="assets/img/profiles/avatar.jpg" alt="" pgRetina src1x="assets/img/profiles/avatar.jpg" src2x="assets/img/profiles/avatar_small2x.jpg" width="32" height="32">
```

{% endtab %}
{% endtabs %}

## API

| parameter | Instructions             | Types of | Defaults |
| --------- | ------------------------ | -------- | -------- |
| src1x     | Load original image path | string   | null     |
| src2x     | Load Retina image path   | string   | null     |


# Bootstrap Components

Angular Bootstrap components are powered by ngx-bootstrap. You can refer them up &#x20;

<https://valor-software.com/ngx-bootstrap/#/getting-started>

## Are all components supported by Pages?

Yes all components in ngx-bootstrap is included in Pages and styled to pages color palette. You can refer up there [documentation](https://valor-software.com/ngx-bootstrap/#/getting-started) here to read about how to include components.


# Checkbox and Radio

Get rid of native look n' feel with our very own custom checkboxes written purely in CSS. These are retina compatible and available in all Bootstrap's contextual classes (ex: `.primary`)

## Checkbox

![](/files/-M2JVzXewaBmLr7vqhCb)

```markup
<div class="form-check">
	<input type="checkbox" id="defaultCheck" checked>
	<label for="defaultCheck">
		Default checkbox
	</label>
</div>
<div class="form-check complete">
	<input type="checkbox" id="checkColorOpt1">
	<label for="checkColorOpt1">
		I agree to the terms and conditions
	</label>
</div>
<div class="form-check primary">
	<input type="checkbox" id="checkColorOpt2" checked>
	<label for="checkColorOpt2">
		Mark as read
	</label>
</div>
```

### **Shape options**

Bored with traditional boxed shape check boxes? Here is a circle one simply add the class `.checkbox-circle` to change it

![](/files/-M2Jj7XkFwl41noX9zo1)

```markup
<div class="form-check checkbox-circle danger">
	<input type="checkbox" id="checkcircleColorOpt1">
	<label for="checkcircleColorOpt1">
		Delete all personal settings
	</label>
</div>
<div class="form-check checkbox-circle complete">
	<input type="checkbox" id="checkcircleColorOpt2" checked>
	<label for="checkcircleColorOpt2">
		Keep me signed in
	</label>
</div>
```

### **State options**

These act the same way as normal HTML check boxes. Here are some states that

![](/files/-M2JjQhIOSNOitvU8aJ6)

```markup
<div class="form-check form-check-inline complete">
	<input type="checkbox" id="checkboxIndeterminate">
	<label for="checkboxIndeterminate">
		Indeterminate
	</label>
</div>
<div class="form-check form-check-inline">
	<input type="checkbox" id="disableCheck" checked disabled>
	<label for="disableCheck">
		Disabled checkbox
	</label>
</div>
```

## **Toggle controls**

Do not delete the `label` element which is placed next to each `radio`. Leave it blank if you don't want it to hold any text

![](/files/-M2JjhfHYjODyx_G20uR)

```markup
<div class="form-check">
	<input type="radio" name="texture" id="defaultradio" value="Default" checked>
	<label for="defaultradio">
		Default
	</label>
</div>
<div class="form-check complete">
	<input type="radio" name="texture" id="radio1" value="Medium">
	<label for="radio1">
		Medium textures
	</label>
</div>
<div class="form-check primary">
	<input type="radio" name="texture" id="radio2" value="Verbose">
	<label for="radio2">
		Verbose channel
	</label>
</div>
```

### **State options**

Use of different color opacity helps to distinguish between different states such as disable

![](/files/-M2JjzhQvK8URr8Kq4Rd)

```markup
<div class="form-check form-check-inline complete">
	<input type="radio" name="state" id="radioInline" value="Default" checked>
	<label for="radioInline">
		Default
	</label>
</div>
<div class="form-check form-check-inline">
	<input type="radio" name="state" id="radioDisabled" value="disabled" disabled>
	<label for="radioDisabled">
		Disabled
	</label>
</div>
```


# Form Group

Pages default form group directive.

## Importing

First import it to your app module or any submodule as you wish

```typescript
import { SharedModule } from './@pages/components/shared.module';
@NgModule({
  imports: [SharedModule,...]
})
export class AppModule(){}
```

## Usage

Place "pgFormGroupDefault" in bootstrap forum-group div

![](/files/-LEFxGciAWtrwY-h8roy)

{% tabs %}
{% tab title="HTML" %}

```markup
<div class="form-group form-group-default required " pgFormGroupDefault>
    <label>Project</label>
    <input type="email" class="form-control" required >
</div>
```

{% endtab %}
{% endtabs %}


# Input Helpers

Input helpers are powered by the plugin Text Mask. Please refer there documentation for further details and instructions here <https://github.com/text-mask/text-mask>

## Importing

First import it to your app module or any submodule as you wish

```typescript
import { TextMaskModule } from 'angular2-text-mask';
@NgModule({
  imports: [TextMaskModule,...]
})
export class AppModule(){}
```

## How to use&#x20;

{% tabs %}
{% tab title="HTML" %}

```markup
<div class="row">
    <div class="col-lg-6">
    <h5>
    Input masks
    </h5>
    <p>These assure the user will never enter invalid phone no, email or anything that has a pattern even without validations</p>
    <br>
    <div class="form-group">
        <label>Date</label>
        <span class="help">e.g. "25/12/2013"</span>
        <input [textMask]="{mask: mask.date}" type="text" id="date" class="form-control" guide="true">
    </div>
    <div class="form-group">
        <label>Telephone</label>
        <span class="help">e.g. "(324) 234-3243"</span>
        <input [textMask]="{mask: mask.telephone}" type="text" id="phone" class="form-control">
    </div>
    <div class="form-group">
        <label>Custom</label>
        <span class="help">e.g. "23-4324324"</span>
        <input [textMask]="{mask: mask.custom}" type="text" id="tin" class="form-control">
    </div>
    <div class="form-group">
        <label>Social Security Number</label>
        <span class="help">e.g. "432-43-2432"</span>
        <input [textMask]="{mask: mask.ssn}" type="text" id="ssn" class="form-control" placeholder="You can put anything here">
    </div>
    </div>
    <div class="col-lg-6">
    <h5>Input autonumeric
    </h5>
    <p>Do you forget small things? here is something that helps to automatically placed forgotten dollar signs, decimal places and even comma separates and many more!</p>
    <br>
    <div class="form-group">
        <label>Decimal place and comma separator</label>
        <span class="help">e.g. "53,000.00"</span>
        <input type="text" [textMask]="{mask: numberMask}" class="autonumeric form-control">
    </div>
    <div class="form-group">
        <label>Weird way but works</label>
        <span class="help">e.g. "45.000,00"</span>
        <input type="text" [textMask]="{mask: wierdMask}" class="autonumeric form-control">
    </div>
    <div class="form-group">
        <label>Dollar prefix</label>
        <span class="help">e.g. "$45.50"</span>
        <input type="text" [textMask]="{mask: dollarPrefix}" class="autonumeric form-control">
    </div>
    <div class="form-group">
        <label>Range</label>
        <span class="help">e.g. "0 - 9,999"</span>
        <input type="text" [textMask]="{mask: range}" class="autonumeric form-control">
    </div>
    </div>
</div>
```

{% endtab %}

{% tab title="Typescript" %}

```typescript
  //Input Examples Masks
  mask = {
    date : [/[1-9]/, /\d/,'/', /\d/, /\d/,'/', /\d/, /\d/, /\d/, /\d/],
    telephone:['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
    custom:[/[1-9]/, /\d/,'-', /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/],
    ssn:[/[1-9]/, /\d/, /\d/,'-', /\d/, /\d/,'-', /\d/, /\d/, /\d/, /\d/],
  }
  numberMask = createNumberMask({
    prefix: '$ ',
    suffix: ''
  });
  wierdMask = createNumberMask({
    prefix: '',
    suffix: '',
    thousandsSeparatorSymbol:'.',
    allowDecimal:true,
    decimalSymbol:','
  });
  dollarPrefix = createNumberMask({
    prefix: '$ ',
    suffix: '',
    allowDecimal:true
  });
  range = createNumberMask({
    prefix: '',
    suffix: '',
    integerLimit:4
  });
```

{% endtab %}
{% endtabs %}


# Switch Toggle

Pages iOS like switch Toggle

Pages comes with native CSS toggle, no third party bulky JS includes just simple HTML checkboxes

![](/files/-M2JkVe-Q5xwFjOQj0zd)

```markup
<div>
	<div class="form-check form-check-inline switch">
		<input type="checkbox" id="pagesSwitch" checked>
		<label for="pagesSwitch">Default switch</label>
	</div>
	<div class="form-check form-check-inline switch">
		<input type="checkbox" id="switchDisabled" disabled>
		<label for="switchDisabled"> disabled </label>
	</div>
</div>
<div>
	<div class="form-check form-check-inline switch switch-lg complete">
		<input type="checkbox" id="switch-lg">
		<label for="switch-lg">Auto-brightness</label>
	</div>
	<div class="form-check form-check-inline switch switch-lg success">
		<input type="checkbox" id="switchColorOpt">
		<label for="switchColorOpt">wifi </label>
	</div>
</div>
```


# Select

pgSelect is a fork of[ NG-ZORRO](https://github.com/NG-ZORRO/ng-zorro-antd) implementation of select dropdown. Initial credits go to the author

## Importing

First import it to your app module or any submodule as you wish

```typescript
import { pgSelectModule} from '../@pages/components/select/select.module';
@NgModule({
  imports: [pgSelectModule,...]
})
export class AppModule(){}
```

## How to use&#x20;

Basic Select with Search

{% tabs %}
{% tab title="HTML" %}

```markup
<pg-select style="width: 100%;" [(ngModel)]="selectedOption" [PlaceHolder]="'Select Option'" AllowClear ShowSearch>
    <pg-option
    *ngFor="let option of options"
    [Label]="option.label"
    [Value]="option"
    [Disabled]="option.disabled">
    </pg-option>
</pg-select>
```

{% endtab %}

{% tab title="Typescript" %}

```typescript
selectedOption;
options = [
{ value: 'jack', label: 'Jacks' },
{ value: 'lucy', label: 'Lucy' },
{ value: 'disabled', label: 'Disabled', disabled: true }
];
```

{% endtab %}
{% endtabs %}

## API

| parameter         | Instructions                                                                                                                                     | Types of             | Defaults    |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------- | ----------- |
| SearchChange      | Search content change callback function, parameter search content                                                                                | Func                 | no          |
| Mode              | Set the Select mode                                                                                                                              | 'multiple' \| 'tags' | -           |
| OpenChange        | Drop-down menu opens close callback function                                                                                                     | Func                 | no          |
| Filter            | Whether according to input filter options                                                                                                        | Boolean              | true        |
| KeepUnListOptions | When this attribute is added, data that is not in the current selection box but has been selected will remain valid only for multiple selections | attribute            | -           |
| AllowClear        | When this attribute is added, it supports clearing, and the radio mode is valid.                                                                 | attribute            | -           |
| ScrollToBottom    | The drop-down menu scrolls to the bottom callback, which can be used as a trigger for dynamic loading                                            | -                    | -           |
| PlaceHolder       | Select box default text                                                                                                                          | String               | no          |
| ShowSearch        | Whether to enable the search box                                                                                                                 | Boolean              | false       |
| NotFoundContent   | What to display when the drop-down list is empty                                                                                                 | String               | 'Not Found' |

## Options API

| parameter       | Instructions                                                  | Types of    | Defaults |
| --------------- | ------------------------------------------------------------- | ----------- | -------- |
| Label           | Display option content for display                            | String      |          |
| #OptionTemplate | Used to customize the display of the drop-down section option | of-template |          |
| Disabled        | Is it disabled                                                | Boolean     | false    |


# Select FX

## Importing

First import it to your app module or any submodule as you wish

```typescript
import { pgSelectfx } from '../@pages/components/cs-select/select.module';
@NgModule({
  imports: [pgSelectfx,...]
})
export class AppModule(){}
```

## How to use&#x20;

Basic Select with Search

{% tabs %}
{% tab title="HTML" %}

```markup
<pg-select-fx style="width: 110px" [(ngModel)]="selectedOptionCS" [PlaceHolder]="'Select'" AllowClear>
    <pg-selectfx-option
    *ngFor="let option of csoptions"
    [Label]="option.label"
    [Value]="option"
    [Disabled]="option.disabled">
    </pg-selectfx-option>
</pg-select-fx>
```

{% endtab %}

{% tab title="Typescript" %}

```typescript
csoptions = [
    { value: 'Web-safe', label: 'Web-safe' },
    { value: 'Helvetica', label: 'Helvetica' },
    { value: 'SegeoUI', label: 'SegeoUI' }
];
selectedOptionCS;
```

{% endtab %}
{% endtabs %}

## API

| parameter   | Instructions                                                                     | Types of  | Defaults |
| ----------- | -------------------------------------------------------------------------------- | --------- | -------- |
| AllowClear  | When this attribute is added, it supports clearing, and the radio mode is valid. | attribute | -        |
| PlaceHolder | Select box default text                                                          | String    | no       |

## Options API

| parameter       | Instructions                                                  | Types of    | Defaults |
| --------------- | ------------------------------------------------------------- | ----------- | -------- |
| Label           | Display option content for display                            | String      |          |
| #OptionTemplate | Used to customize the display of the drop-down section option | of-template |          |
| Disabled        | Is it disabled                                                | Boolean     | false    |


# Typeahead

Typeahead is powered by the plugin ngx-bootstrap. Please refer there documentation for further details and instructions here <https://valor-software.com/ngx-bootstrap/#/typeahead>

## Importing

First import it to your app module or any submodule as you wish

```typescript
import { TypeaheadModule } from 'ngx-bootstrap';
@NgModule({
  imports: [TypeaheadModule,...]
})
export class AppModule(){}
```

## How to use&#x20;

{% tabs %}
{% tab title="HTML" %}

```markup
<div class="form-group typehead">
    <input placeholder="States of USA" [(ngModel)]="selectedState" [typeahead]="states"  [typeaheadScrollable]="true" [typeaheadOptionsInScrollableView]="5" class="form-control">
</div>
```

{% endtab %}

{% tab title="Typescript" %}

```typescript
  selectedState;
  states: string[] = [
    'Alabama',
    'Alaska',
    'Arizona',
    'Arkansas',
    'California',
    'Colorado',
    'Connecticut',
    'Delaware',
    'Florida',
    'Georgia',
    'Hawaii',
    'Idaho',
    'Illinois',
    'Indiana',
    'Iowa',
    'Kansas',
    'Kentucky',
    'Louisiana',
    'Maine',
    'Maryland',
    'Massachusetts',
    'Michigan',
    'Minnesota',
    'Mississippi',
    'Missouri',
    'Montana',
    'Nebraska',
    'Nevada',
    'New Hampshire',
    'New Jersey',
    'New Mexico',
    'New York',
    'North Dakota',
    'North Carolina',
    'Ohio',
    'Oklahoma',
    'Oregon',
    'Pennsylvania',
    'Rhode Island',
    'South Carolina',
    'South Dakota',
    'Tennessee',
    'Texas',
    'Utah',
    'Vermont',
    'Virginia',
    'Washington',
    'West Virginia',
    'Wisconsin',
    'Wyoming'
  ];
```

{% endtab %}
{% endtabs %}


# Date Picker

pg-datepicker is a fork of[ NG-ZORRO](https://github.com/NG-ZORRO/ng-zorro-antd) implementation of Date / Date Range Picker Initial credits go to the author

## Importing

First import it to your app module or any submodule as you wish

```typescript
import { pgDatePickerModule } from '@pages/components/datepicker/datepicker.module';
@NgModule({
  imports: [pgDatePickerModule,...]
})
export class AppModule(){}
```

## How to use&#x20;

Basic Select with Search

{% tabs %}
{% tab title="HTML" %}

```markup
<div class="input-group date col-md-8 p-l-0">
  <pg-datepicker></pg-datepicker>
  <div class="input-group-append">
      <span class="input-group-text">
        <i class="fa fa-calendar"></i>
      </span>
  </div>
</div>
```

{% endtab %}
{% endtabs %}

## API

The date class component includes the following three forms.

* pg-datepicker
* pg-datepicker \[Mode='month']
* pg-rangepicker

#### Common API

| parameter    | Instructions                                                                                                              | Types of                            | Defaults     |
| ------------ | ------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- | ------------ |
| Format       | Display date format, configuration reference [Moment.js documentation](http://momentjs.cn/docs/#/parsing/string-formats/) | String                              | "YYYY-MM-DD" |
| Disabled     | Disabled                                                                                                                  | boolean                             | false        |
| AllowClear   | Whether to show clear button                                                                                              | boolean                             | true         |
| ShowTime     | Time options, see nz-timepicker parameter                                                                                 | boolean \| TimePickerInnerComponent | null         |
| DisabledDate | A callback function to disable the date, returning true to disable this date                                              | (Date) => boolean                   |              |

#### pg-datepicker

| parameter   | Instructions                                                   | Types of | Defaults     |
| ----------- | -------------------------------------------------------------- | -------- | ------------ |
| Model       | Display date                                                   | Date     | Current date |
| Placeholder | Input box prompt text                                          | String   |              |
| Mode        | Selector mode, `month`select only to month, `day`select to day | String   | "day"        |

#### pg-rangepicker

| parameter   | Instructions          | Types of          | Defaults     |
| ----------- | --------------------- | ----------------- | ------------ |
| Model       | Display date          | \[Date, Date]     | Current date |
| Placeholder | Input box prompt text | \[String, String] |              |


# Time Picker

pg-timepicker is a fork of[ NG-ZORRO](https://github.com/NG-ZORRO/ng-zorro-antd) implementation of Time Picker Initial credits go to the author

## Importing

First import it to your app module or any submodule as you wish

```typescript
import { pgTimePickerModule } from '@pages/components/time-picker/timepicker.module';
@NgModule({
  imports: [pgTimePickerModule,...]
})
export class AppModule(){}
```

## How to use&#x20;

Basic Select with Search

{% tabs %}
{% tab title="HTML" %}

```markup
<pg-timepicker [(ngModel)]="_date"></pg-timepicker>
```

{% endtab %}
{% endtabs %}

## API

| parameter           | Instructions                                 | Types of                               | Defaults             |
| ------------------- | -------------------------------------------- | -------------------------------------- | -------------------- |
| of the Model        | Default time                                 | string or Date                         | no                   |
| PlaceHolder         | The content displayed when there is no value | String                                 | "Please select time" |
| Format              | Displayed time format                        | String                                 | "HH:mm:ss","HH:mm"   |
| Disabled            | Disable all actions                          | Boolean                                | false                |
| DisabledHours       | Prohibit selection of partial hours option   | function()                             | no                   |
| DisabledMinutes     | Do not select partial minutes option         | function(selectedHour)                 | no                   |
| DisabledSeconds     | Disable selection of partial seconds         | function(selectedHour, selectedMinute) | no                   |
| HideDisabledOptions | Add this property to hide forbidden options  | attribute                              | -                    |


# Quill Editor

We have added the support for the famous Quill editor for Pages angular. Please refer there documentation here <https://github.com/KillerCodeMonkey/ngx-quill>

## Importing

First import it to your app module or any submodule as you wish

```typescript
import { QuillModule } from 'ngx-quill'
@NgModule({
  imports: [QuillModule,...]
})
export class AppModule(){}
```

## How to use&#x20;

Basic Select with Search

{% tabs %}
{% tab title="HTML" %}

```markup
<quill-editor [style]="{height: '350px'}" placeholder="" ></quill-editor>
```

{% endtab %}
{% endtabs %}


# File Uploader

Pages Drag and Drop File Uploader

pg-upload is a fork of [NG-ZORRO](https://github.com/NG-ZORRO/ng-zorro-antd) implementation of Dropzone Initial credits go to the author

## Importing

First import it to your app module or any submodule as you wish

```typescript
import { pgUploadModule } from '../@pages/components/upload/upload.module';
@NgModule({
  imports: [pgUploadModule,...]
})
export class AppModule(){}
```

## How to use&#x20;

Basic Select with Search

{% tabs %}
{% tab title="HTML" %}

```markup
<pg-upload
    Type="drag"
    [Multiple]="true"
    [Limit]="2"
    Action="https://jsonplaceholder.typicode.com/posts/"
    (Change)="handleChange($event)"
    extraClass="dropzone"
    progressType="circle"
    >
    <div class="d-flex flex-column align-items-center">
    <h4 class="semi-bold no-margin">Drop files to Upload</h4>
    <p>or click here</p>
    </div>
</pg-upload>
```

{% endtab %}

{% tab title="Typescript" %}

```typescript
 //Fileupload HandleChange 

 handleChange(event){ }
```

{% endtab %}
{% endtabs %}

## API

{% hint style="info" %}
The server upload interface implementation can refer to [jQuery-File-Upload](https://github.com/blueimp/jQuery-File-Upload/wiki) .
{% endhint %}

| parameter       | Instructions                                                                                                                                                                                                  | Types of                                                           | Defaults |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | -------- |
| Accept          | Accepted upload file types, see [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept)                                                                         | string                                                             | no       |
| Action          | Required parameters, uploaded address                                                                                                                                                                         | string                                                             | no       |
| BeforeUpload    | Before uploading files hooks, parameters for the uploaded files, if returned to`false`stop uploading. Note: **IE9** does not support this method. Note: Be sure what `=>`the definition of treatment.         | (file, fileList) => `boolean \| Observable<boolean>`               | no       |
| CustomRequest   | By overriding the default upload behavior, you can customize your own upload implementation. Note: Be sure what `=>`the definition of treatment.                                                              | (item) => `Subscription`                                           | no       |
| Data            | Upload the required parameters or return upload methods. Note: Be sure what`=>`the definition of treatment.                                                                                                   | Object \| ((file: UploadFile) => Object)                           | no       |
| Disabled        | Is it disabled                                                                                                                                                                                                | boolean                                                            | false    |
| FileList        | File list, two-way binding                                                                                                                                                                                    | UploadFile\[]                                                      | no       |
| Limit           | Limit the maximum number of single uploads, `Multiple`valid when opened;`0`unlimited                                                                                                                          | number                                                             | 0        |
| FileType        | Limit the file type, for example:`image/png,image/jpeg,image/gif,image/bmp`                                                                                                                                   | string                                                             | no       |
| Filter          | Custom filter                                                                                                                                                                                                 | UploadFilter\[]                                                    | no       |
| Headers         | Set upload request header, above IE10                                                                                                                                                                         | object                                                             | no       |
| ListType        | Upload list of built-in styles, support three basic styles `text`,`picture`and`picture-card`                                                                                                                  | string                                                             | 'text'   |
| Multiple        | Whether to support multiple-choice files, `IE10+`support. After opening, hold down ctrl to select multiple files.                                                                                             | boolean                                                            | false    |
| Name            | File parameter names sent to the background                                                                                                                                                                   | string                                                             | 'file'   |
| ShowUploadList  | Whether to display the list, can be set as an object for individually setting showPreviewIcon and showRemoveIcon                                                                                              | Boolean or { showPreviewIcon?: boolean, showRemoveIcon?: boolean } | true     |
| ShowButton      | Whether to display the upload button                                                                                                                                                                          | boolean                                                            | true     |
| WithCredentials | Whether to carry a cookie when uploading a request                                                                                                                                                            | boolean                                                            | false    |
| Preview         | Clickback when clicking on a file link or preview icon. Note: Be sure what `=>`the definition of treatment.                                                                                                   | (file: UploadFile) => void                                         | no       |
| Remove          | Click on the callback when the file is removed. If the return value is false, it will not be removed. Support for returning Observable\<boolean> objects. Note: Be sure what `=>`the definition of treatment. | (file: UploadFile) => boolean \| Observable\<boolean>              | no       |
| (Change)        | Callback when upload file status changes                                                                                                                                                                      | EventEmitter                                                       |          |


# Progress Bar

Pages Progress bar / circular

## Importing

First import it to your app module or any submodule as you wish

```typescript
import { ProgressModule } from '../@pages/components/progress/progress.module';
@NgModule({
  imports: [ProgressModule,...]
})
export class AppModule(){}
```

## Usage

{% tabs %}
{% tab title="HTML" %}

```markup
<pg-progress type="bar" color="primary" value="35" thick="true"></pg-progress>

<pg-progress type="bar" indeterminate="true" thick="true"></pg-progress>

<pg-progress type="circle" color="complete" value="75" ></pg-progress>

<pg-progress type="circle" value="75" thick="true"></pg-progress>
```

{% endtab %}
{% endtabs %}

## API

| parameter     | Instructions                   | Types of | Defaults              |
| ------------- | ------------------------------ | -------- | --------------------- |
| type          | Type of progress               | string   | bar / circle          |
| color         | Bootstrap primary colors       | string   | primary, success, etc |
| value         | Percentage of progress         | integer  | 0                     |
| indeterminate | When progress value is unknown | boolean  | false                 |
| thick         | Will increase the thickness    | boolean  | true                  |


# List View

Pages List View

## Importing

First import it to your app module or any submodule as you wish

```typescript
import { pgListViewModule} from './@pages/components/list-view/list-view.module';
@NgModule({
  imports: [pgListViewModule,...]
})
export class AppModule(){}
```

## How to use&#x20;

Basic Select with Search

{% tabs %}
{% tab title="HTML" %}

```markup
<pg-list-view-container class="scrollable full-height" [perfectScrollbar]="config">
    <pg-list-item *ngFor="let group of userList">
        <ng-template #ItemHeading>
            {{group.group}}
        </ng-template>
      <li class="chat-user-list clearfix"  *ngFor="let user of group.users">
        <a pg-view-trigger parentView="chat" animationType="push-parrallax">
            <span class="thumbnail-wrapper d32 circular bg-success">
                <img width="34" height="34" alt="" src="{{user.img}}" class="col-top">
            </span>
            <p class="p-l-10 ">
              <span class="text-master">{{user.username}}</span>
              <span class="block text-master hint-text fs-12">{{user.lastMessage}}</span>
            </p>
          </a>
        </li>
    </pg-list-item>
</pg-list-view-container>
```

{% endtab %}

{% tab title="Typescript" %}

```typescript
userList = [];
```

{% endtab %}
{% endtabs %}

##


# Cards

Pages cards

## Importing

First import it to your app module or any submodule as you wish

```typescript
import { pgCardModule} from './@pages/components/card/card.module';
@NgModule({
  imports: [pgCardModule,...]
})
export class AppModule(){}
```

## How to use&#x20;

{% tabs %}
{% tab title="HTML" %}

```markup
<pgcard (onRefresh)="sampleRefresh()" [Loading]="isLoading" [ShowMessage]="errorMessage" [Message]="message">
    <ng-template #CardTitle>Sample</ng-template>
    <ng-template #CardExtraControls>                
    <li>
        <div class="dropdown" dropdown>
            <a href="javascript:void(0);" dropdownToggle role="button" aria-expanded="false">
            <i class="card-icon card-icon-settings "></i>
            </a>
            <div class="dropdown-menu dropdown-menu-right" *dropdownMenu  role="menu" aria-labelledby="card-settings">
            <a href="javascript:void(0);" class="dropdown-item">API</a>
            <a href="javascript:void(0);" class="dropdown-item">Preferences</a>
            <a href="javascript:void(0);" class="dropdown-item">About</a>
            </div>
        </div>
    </li>
    </ng-template>
    <h3>
    <span class="semi-bold">Advance</span> Tools</h3>
    <p>We have crafted Pages Cards to suit any use case. Add a maximize button <i class="pg-fullscreen"></i> into your Cards controls bar to make the Cards go full-screen. This will come handy if you want to show lot of content inside a Cards and want to give the content some room to breath</p>
    <br>
    <div>
        <div class="profile-img-wrapper m-t-5 inline">
        <img width="35" height="35" src2x="assets/img/profiles/avatar_small2x.jpg" pgRetina src1x="assets/img/profiles/avatar_small.jpg" alt="" src="assets/img/profiles/avatar_small2x.jpg">
        <div class="chat-status available">
        </div>
        </div>
        <div class="inline m-l-10">
        <p class="small hint-text m-t-5">VIA senior product manage
            <br>for UI/UX at REVOX</p>
        </div>
    </div>             
</pgcard>
```

{% endtab %}

{% tab title="Typescript" %}

```typescript
  constructor() { }

  ngOnInit() {
  }
  isLoading:boolean=false;
  errorMessage:boolean=false;
  message:string = "Something went terribly wrong. Just keep calm and carry on!";
  
  sampleRefresh(){
    this.isLoading = true;
    this.errorMessage = false;
    setTimeout(()=>{
          this.isLoading = false;
          this.errorMessage = true;
    },3000);
  }
```

{% endtab %}
{% endtabs %}

## API

| Property      | Description                                          | Type    | Default                              |
| ------------- | ---------------------------------------------------- | ------- | ------------------------------------ |
| Loading       | To show loading Progress Bar with overlay            | boolean | false                                |
| ShowMessage   | Show message once load is failed                     | boolean | false                                |
| Message       | Error message you want to show                       | string  | null                                 |
| Maximize      | Show Maximize button                                 | boolean | true                                 |
| Refresh       | Show Refresh button                                  | boolean | true                                 |
| Toggle        | Show Collapse toggle button                          | boolean | true                                 |
| Maximize      | Show maximize button                                 | boolean | true                                 |
| ProgressType  | Type of progress bar - circle , bar                  | boolean | circle                               |
| ProgressColor | Color of the progress bar                            | string  | success, danger, warning and primary |
| MinimalHeader | No controls. A simple circular refresh button        | boolean | false                                |
| HeaderClass   | Add extra header class to the card                   | string  | null                                 |
| Type          | Class of card, transparent, default or with bg-color | string  | default                              |

## Callbacks

| Method      | Description                      |
| ----------- | -------------------------------- |
| onRefresh() | When Refresh button is triggered |


# Social Cards

Reusable card layouts to use in Social Feeds

## Importing

First import it to your app module or any submodule as you wish

```typescript
import { pgCardSocialModule } from '../@pages/components/card-social/card-social.module';
@NgModule({
  imports: [pgCardSocialModule,...]
})
export class AppModule(){}
```

## How to use&#x20;

Basic social card with text content&#x20;

{% tabs %}
{% tab title="HTML" %}

```markup
<pgcardsocial 
    Type="text"
    AdditionalClasses="col1"
    Source="{{item.post.caption}}"
    Timestamp="{{item.post.timestamp}}"
    Author="{{item.author.name}}"
    Activity="{{item.post.activity}}"
    Location="{{item.post.location}}">
    <ng-template #AuthorAvatar>
        <img alt="Avatar" width="33" height="33" pgRetina src2x="{{item.author.avatar2x}}" src1x="{{item.author.avatar}}" src="{{item.author.avatar2x}}">
    </ng-template>
    <ng-template #CustomBody>
        <p>{{item.post.body}}</p>
    </ng-template>
</pgcardsocial>
```

{% endtab %}

{% tab title="Typescript" %}

```typescript
item = { 
    "author": { 
        "name" : "Jeff Curtis", 
        "avatar": "assets/img/profiles/8.jpg", 
        "avatar2x": "assets/img/profiles/8x.jpg" 
    }, 
    "post" : { 
        "type": "text", 
        "location": "SF, California", 
        "activity": "Shared a Tweet",
        "body": "What you think, you become. What you feel, you attract. What you imagine, you create - Buddha. #quote", 
        "caption" : "via Twitter", 
        "image": "", 
        "timestamp": "few seconds ago", 
        "likes": "34", "comments": "456" 
    } 
}
```

{% endtab %}
{% endtabs %}

## Options&#x20;

| Option                | Description                                                                                                        | Types  | Defaults        |
| --------------------- | ------------------------------------------------------------------------------------------------------------------ | ------ | --------------- |
| **Activity**          | Use this to indicate activity that created the post. ex: 'Shared a photo'                                          | String | null            |
| **AdditionalClasses** | Pass any additional sibling classes that need to be appended with '.card'                                          | String | null            |
| **Author**            | Author of the post                                                                                                 | String | null            |
| **Body**              | Plain text body of the post                                                                                        | String | null            |
| **Comments**          | Comments count                                                                                                     | String | null            |
| **Image**             | Image path                                                                                                         | String | null            |
| **Likes**             | Likes count                                                                                                        | String | null            |
| **Location**          | Location from where the post got shared                                                                            | String | null            |
| **Source**            | Source of the post originated from a different source                                                              | String | null            |
| **Timestamp**         | Any pre-formatted time string                                                                                      | String | null            |
| **Title**             | To be used only with cards having `Type="widget"`                                                                  | String | null            |
| **TitleClass**        | Any title formatting classes. (ex: `text-success`, `text-danger`)To be used only with cards having `Type="widget"` | String | `text-complete` |
| **Type**              | Defines the layout of the card. Available options are `widget`, `text`, `image` and `status`                       | String | `text`          |

## Templates&#x20;

| Option            | Description                                          | Defaults |
| ----------------- | ---------------------------------------------------- | -------- |
| **#CustomBody**   | Pass any custom HTML elements.                       | null     |
| **#AuthorAvatar** | Pass any image that should be used as profile image. | null     |


# Collapse

## Importing

First import it to your app module or any submodule as you wish

```typescript
import { pgCardModule} from './@pages/components/card/card.module';
@NgModule({
  imports: [pgCardModule,...]
})
export class AppModule(){}
```

## How to use&#x20;

{% tabs %}
{% tab title="HTML" %}

```markup
<pg-collapseset>
    <pg-collapse [pgTitle]="'Collapsible Group Item'">
    Click headers to expand/collapse content that is broken into logical sections, much like tabs. Optionally, toggle sections open/closed on mouseover.
    </pg-collapse>
    <pg-collapse [pgTitle]="'Typography Variables'">
    <h1 class="light">
        go explore the <span class="semi-bold">world</span>
    </h1>
    <h4>
        small things in life matters the most
    </h4>
    <h2>
        Big Heading <span class="semi-bold">Body</span>,
        <i>Variations</i>
    </h2>
    <h4>
        <span class="semi-bold">Open Me</span>, Light , <span class=
        "semi-bold">Bold</span>, <i>Everything</i>
    </h4>
    <p>
        is the art and technique of arranging type in order to make language visible. The arrangement of type involves the selection of typefaces, point size, line length, leading (line spacing), adjusting the spaces between groups of letters (tracking)
    </p>
    <p>
        and adjusting the Case space between pairs of letters (kerning). Type design is a closely related craft, which some consider distinct and others a part of typography
    </p>
    </pg-collapse>
    <pg-collapse [pgTitle]="'Easy Edit'">
    Click headers to expand/collapse content that is broken into logical sections, much like tabs. Optionally, toggle sections open/closed on mouseover.
    </pg-collapse>
</pg-collapseset>
```

{% endtab %}

{% tab title="Typescript" %}

```typescript
  constructor() { }

  ngOnInit() {
  }
  isLoading:boolean=false;
  errorMessage:boolean=false;
  message:string = "Something went terribly wrong. Just keep calm and carry on!";
  
  sampleRefresh(){
    this.isLoading = true;
    this.errorMessage = false;
    setTimeout(()=>{
          this.isLoading = false;
          this.errorMessage = true;
    },3000);
  }
```

{% endtab %}
{% endtabs %}

## API

| Property | Description                       | Type   | Default |
| -------- | --------------------------------- | ------ | ------- |
| Title    | Set title to a collapse component | string | null    |


# Tabs

pg-tabs is a fork of [NG-ZORRO](https://github.com/NG-ZORRO/ng-zorro-antd) implementation of Tabs Initial credits go to the author.

## Importing

First import it to your app module or any submodule as you wish

```typescript
import { pgTabsModule } from '../@pages/components/tabs/tabs.module';
@NgModule({
  imports: [pgTabsModule,...]
})
export class AppModule(){}
```

## How to use&#x20;

### Basic Tabs

Base on Bootstrap tabs, Pages Angular tab components come with different styles, orientation and animations

{% tabs %}
{% tab title="HTML" %}

```markup
<pg-tabset tabAnimation="slide-left" Type="simple" ShowPagination="true">
    <pg-tab>
    <ng-template #TabHeading>
        Hello World
    </ng-template>
    <div class="row column-seperation">
        <div class="col-lg-6">
            <h3>
            <span class="semi-bold">Sometimes</span> Small things in life means the most
            </h3>
        </div>
        <div class="col-lg-6">
            <h3 class="semi-bold">great tabs</h3>
            <p>Native boostrap tabs customized to Pages look and feel, simply changing class name you can change color as well as its animations</p>
        </div>
        </div>
    </pg-tab>
    <pg-tab>
    <ng-template #TabHeading>
        Hello Two
    </ng-template>
    <div class="row">
        <div class="col-lg-12">
            <h3>“ Nothing is
            <span class="semi-bold">impossible</span>, the word itself says 'I'm
            <span class="semi-bold">possible</span>'! ”
            </h3>
            <p>A style represents visual customizations on top of a layout. By editing a style, you can use Squarespace's visual interface to customize your...</p>
            <br>
            <p class="pull-right">
            <button type="button" class="btn btn-default btn-cons">White</button>
            <button type="button" class="btn btn-success btn-cons">Success</button>
            </p>
        </div>
    </div>
    </pg-tab>
    <pg-tab>
        <ng-template #TabHeading>
            Hello Three
        </ng-template>
        <div class="row">
            <div class="col-lg-12">
            <h3>Follow us &amp; get updated!</h3>
            <p>Instantly connect to what's most important to you. Follow your friends, experts, favorite celebrities, and breaking news.</p>
            <br>
            </div>
        </div>
    </pg-tab>
</pg-tabset>
```

{% endtab %}
{% endtabs %}

### Orientations

You can change the "TabPosition" parameter to left or right

{% tabs %}
{% tab title="HTML" %}

```markup
<pg-tabset tabAnimation="slide-left" Type="simple" TabPosition="left" extraTabClass="bg-white">
    <pg-tab>
    <ng-template #TabHeading>
        Hello World
    </ng-template>
    <div class="row column-seperation">
        <div class="col-lg-6">
            <h3>
            <span class="semi-bold">Sometimes</span> Small things in life means the most
            </h3>
        </div>
        <div class="col-lg-6">
            <h3 class="semi-bold">great tabs</h3>
            <p>Native boostrap tabs customized to Pages look and feel, simply changing class name you can change color as well as its animations</p>
        </div>
        </div>
    </pg-tab>
    <pg-tab>
    <ng-template #TabHeading>
        Hello Two
    </ng-template>
    <div class="row">
        <div class="col-lg-12">
            <h3>“ Nothing is
            <span class="semi-bold">impossible</span>, the word itself says 'I'm
            <span class="semi-bold">possible</span>'! ”
            </h3>
            <p>A style represents visual customizations on top of a layout. By editing a style, you can use Squarespace's visual interface to customize your...</p>
            <br>
            <p class="pull-right">
            <button type="button" class="btn btn-default btn-cons">White</button>
            <button type="button" class="btn btn-success btn-cons">Success</button>
            </p>
        </div>
    </div>
    </pg-tab>
</pg-tabset>
```

{% endtab %}
{% endtabs %}

### Different Styles

#### Triangle Tabs

```markup
<pg-tabset tabAnimation="slide-left" Type="linetriangle" extraTabContentClass="bg-white">
    <pg-tab>
        <ng-template #TabHeading>
        Hello World
        </ng-template>
        <div class="row column-seperation">
            <div class="col-lg-6">
            <h3>
                <span class="semi-bold">Sometimes</span> Small things in life means the most
            </h3>
            </div>
            <div class="col-lg-6">
            <h3 class="semi-bold">great tabs</h3>
            <p>Native boostrap tabs customized to Pages look and feel, simply changing class name you can change color as well as its animations</p>
            </div>
        </div>
    </pg-tab>
    <pg-tab>
        <ng-template #TabHeading>
            Hello Two
        </ng-template>
        <div class="row">
            <div class="col-lg-12">
            <h3>“ Nothing is
                <span class="semi-bold">impossible</span>, the word itself says 'I'm
                <span class="semi-bold">possible</span>'! ”
            </h3>
            <p>A style represents visual customizations on top of a layout. By editing a style, you can use Squarespace's visual interface to customize your...</p>
            <br>
            <p class="pull-right">
                <button type="button" class="btn btn-default btn-cons">White</button>
                <button type="button" class="btn btn-success btn-cons">Success</button>
            </p>
            </div>
        </div>
    </pg-tab>
    <pg-tab>
        <ng-template #TabHeading>
            Hello Three
        </ng-template>
        <div class="row">
            <div class="col-lg-12">
                <h3>Follow us &amp; get updated!</h3>
                <p>Instantly connect to what's most important to you. Follow your friends, experts, favorite celebrities, and breaking news.</p>
                <br>
            </div>
            </div>
        </pg-tab>
</pg-tabset>
```

#### Fill In Tabs

```markup
<pg-tabset tabAnimation="slide-left" Type="fillup" extraTabContentClass="bg-white">
    <pg-tab>
    <ng-template #TabHeading>
        <span>Hello World</span>
    </ng-template>
    <div class="row column-seperation">
        <div class="col-lg-6">
            <h3>
            <span class="semi-bold">Sometimes</span> Small things in life means the most
            </h3>
        </div>
        <div class="col-lg-6">
            <h3 class="semi-bold">great tabs</h3>
            <p>Native boostrap tabs customized to Pages look and feel, simply changing class name you can change color as well as its animations</p>
        </div>
        </div>
    </pg-tab>
    <pg-tab>
    <ng-template #TabHeading>
        <span>Hello Two</span>
    </ng-template>
    <div class="row">
        <div class="col-lg-12">
            <h3>“ Nothing is
            <span class="semi-bold">impossible</span>, the word itself says 'I'm
            <span class="semi-bold">possible</span>'! ”
            </h3>
            <p>A style represents visual customizations on top of a layout. By editing a style, you can use Squarespace's visual interface to customize your...</p>
            <br>
            <p class="pull-right">
            <button type="button" class="btn btn-default btn-cons">White</button>
            <button type="button" class="btn btn-success btn-cons">Success</button>
            </p>
        </div>
        </div>
    </pg-tab>
    <pg-tab>
        <ng-template #TabHeading>
        <span>Hello Three</span>
        </ng-template>
        <div class="row">
            <div class="col-lg-12">
            <h3>Follow us &amp; get updated!</h3>
            <p>Instantly connect to what's most important to you. Follow your friends, experts, favorite celebrities, and breaking news.</p>
            <br>
            </div>
        </div>
    </pg-tab>
</pg-tabset>
```

## API

| Property      | Description                                      | Type   | Default |
| ------------- | ------------------------------------------------ | ------ | ------- |
| tabAnimation  | Animation type. Only supports "slide-left"       | string | null    |
| Type          | Style Type - "fillup" , "linetriangle", "simple" | string | null    |
| TabPosition   | Orientation - "left" , "right"                   | string | null    |
| extraTabClass | Add extra class for tabs wrapper                 | string | null    |


# Tree View

Tree view plugin is powered by a third party plugin. Please refer there documentation for further celebrations. <https://angular2-tree.readme.io/docs>

## Importing

First import it to your app module or any submodule as you wish

```typescript
import { TreeModule } from 'angular-tree-component';
@NgModule({
  imports: [TreeModule,...]
})
export class AppModule(){}
```

## How to use&#x20;

Basic Select with Search

{% tabs %}
{% tab title="HTML" %}

```markup
<tree-root [nodes]="simpleNodes" [options]="options" class="tree-wrapper bold-node-text level1-document-icon-only m-b-20"></tree-root>
```

{% endtab %}

{% tab title="Typescript" %}

```typescript
simpleNodes = [
    {
        id: 1,
        name: 'item1 with key and tooltip'
    },
    {
        id: 2,
        name: 'item2'
    },
    {
        id: 3,
        name: 'Folder with some children',
        children: [
        { id: 4, name: 'Sub-item 3.1',
            children:[
            {id: 5, name: 'Sub-item 3.1.1'},
            {id: 6, name: 'Sub-item 3.1.2'}
            ]
        },
        { id: 7, name: 'Sub-item 3.2',
            children:[
            {id: 8, name: 'Sub-item 3.2.1'},
            {id: 9, name: 'Sub-item 3.2.2'}
            ]
        }
        ]
    },
    {
        id: 10,
        name: 'Document with some children (expanded on init)',
        isExpanded:true,
        children: [
        { id: 11, name: 'Sub-item 4.1  (active and focus on init)',
        isFocused:true
        }
        ]
    },
];

options = {
    animateExpand:true,
};
```

{% endtab %}
{% endtabs %}


# Sliders

pgSliders is a fork of[ NG-ZORRO](https://github.com/NG-ZORRO/ng-zorro-antd) implementation of drag slider. Initial credits go to the author

## Importing

First import it to your app module or any submodule as you wish

```typescript
import { pgSliderModule } from '../@pages/components/slider/slider.module';
@NgModule({
  imports: [pgSliderModule,...]
})
export class AppModule(){}
```

## How to use&#x20;

Basic Slider with tooltip

{% tabs %}
{% tab title="HTML" %}

```markup
<pg-slider [DefaultValue]="30" Tooltip="true" TooltipForceVisiblity="true"></pg-slider>
```

{% endtab %}
{% endtabs %}

## API

| parameter     | Description                                                                                                                                                                                                       | Types of                | Defaults                                                                       |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | ------------------------------------------------------------------------------ |
| Range         | Start the double slider mode when adding this property                                                                                                                                                            | attribute               | -                                                                              |
| Min           | Minimum value                                                                                                                                                                                                     | Number                  | 0                                                                              |
| Max           | Maximum                                                                                                                                                                                                           | Number                  | 100                                                                            |
| Step          | Step size. The value must be greater than 0 and can be divisible by (max - min). When `marks`when the object is not empty, can be set `step`to `null`use this option only marks Slider values marked out portion. | Number                  | 1                                                                              |
| Marks         | Tick ​​mark. key must be of type `number`and value in the closed interval \[min, max] within, each tab may be provided separately style.                                                                          | object                  | { number: string\|HTML } or { number: { style: object, label: string\|HTML } } |
| Dots          | Whether it can only be dragged onto the scale                                                                                                                                                                     | Boolean                 | false                                                                          |
| of the Model  | Set/get the current value. When `range`is `false`, the use `number`, or use`[number, number]`                                                                                                                     | number\|number\[]       |                                                                                |
| DefaultValue  | Set the initial value. When `range`is `false`, the use `number`, or use`[number, number]`                                                                                                                         | number\|number\[]       | 0 or \[0, 0]                                                                   |
| Included      | Whether it is included. `marks`Valid when not empty, when the value is true, the value is inclusive, and false is juxtaposed.                                                                                     | Boolean                 | true                                                                           |
| Disabled      | Whether to disable. Value `true`, the slider is disabled                                                                                                                                                          | Boolean                 | false                                                                          |
| Vertical      | Display vertically. When this property is added, the Slider is in the vertical direction.                                                                                                                         | attribute               | -                                                                              |
| OnAfterChange | And `onmouseup`consistent with the timing of the trigger, the current value as an argument.                                                                                                                       | Function(value)         | no                                                                             |
| TipFormatter  | Slider will pass the current value `TipFormatter`, and `Tooltip`display `TipFormatter`the return value, if it is `null`, is hidden `Tooltip`.                                                                     | Function(value) \| null | (value) => value                                                               |


# Notifications

Pages Notification service that can be invoked from any page or component

## Importing

First import it to your app module or any submodule as you wish

```typescript
import { MessageModule } from '../@pages/components/message/message.module';
import { MessageService } from '../@pages/components/message/message.service';
@NgModule({
  imports: [MessageModule,...],
  providers: [MessageService,...]
})
export class AppModule(){}
```

## How to use&#x20;

{% tabs %}
{% tab title="Typescript" %}

```typescript
import { Component, OnInit } from '@angular/core';
import { MessageService } from '../../@pages/components/message/message.service';

@Component({
  selector: 'app-notificationspage',
  templateUrl: './notificationspage.component.html',
  styleUrls: ['./notificationspage.component.scss'],
})
export class mySamplePage implements OnInit {

  constructor(private _notification: MessageService) { 
  }

  ngAfterViewInit() {
      this._notification.create(
          "primary",
          "Hello World",
          {
          Position:"top",
          Style:"bar",
          Duration:0
          }
      );
  }

}

```

{% endtab %}
{% endtabs %}

## API

**Global configuration (Config)**

| parameter    | Types of | Defaults | Instructions                                                                 |
| ------------ | -------- | -------- | ---------------------------------------------------------------------------- |
| Duration     | Number   | 0        | Duration, does not disappear when set to 0                                   |
| Position     | String   | top      | also supports bottom \| bottom-left \| bottom-right \| top-left \| top-right |
| Style        | String   | bar      | bar  \| circle \| simple                                                     |
| MaxStack     | Number   | 8        | The maximum number of prompts that can be displayed                          |
| PauseOnHover | Boolean  | true     | Pause countdown when mouse is over                                           |

\
**MessageService service**

| method | parameter                                           | Instructions                                                       |
| ------ | --------------------------------------------------- | ------------------------------------------------------------------ |
| create | `(type: string, content: string, options?: Object)` | Provide type attribute, can be passed in options such as 'success' |
| html   | `(html: string, options?: Object)`                  | HTML content can be used to render content                         |
| remove | `(id?: string)`                                     | Remove specific id message, remove all messages when id is empty   |


# Tables / Datatables

Tables and Datatables are powered by the famous ngx-datatable plugin. Please refer there documentation for more details. <https://github.com/swimlane/ngx-datatable>

## Importing

First import it to your app module or any submodule as you wish

```typescript
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
@NgModule({
  imports: [NgxDatatableModule,...]
})
export class AppModule(){}
```

## How to use&#x20;

Simple table example.&#x20;

{% hint style="info" %}
More examples can be found in `angular/src/app/tables/advance` and  `angular/src/app/tables/simple` pages
{% endhint %}

{% tabs %}
{% tab title="HTML" %}

```markup
<ngx-datatable
class='table table-hover'
[rows]="basic_table_data"
[columnMode]="'force'"
[headerHeight]="43"
[footerHeight]="50"
[rowHeight]="'auto'"
[limit]="5"
[selected]="selected"
[selectionType]="'checkbox'"
(activate)="onActivate($event)"
(select)='onSelect($event)'>
<ngx-datatable-column [width]="30" [sortable]="false" [canAutoResize]="false" [draggable]="false" [resizeable]="false" cellClass="d-flex align-items-center">
    <ng-template ngx-datatable-header-template let-value="value" let-allRowsSelected="allRowsSelected" let-selectFn="selectFn">
        <button class="btn btn-link"><i class="pg pg-trash"></i>
        </button>
    </ng-template>
    <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-row="row" let-value="value" let-isSelected="isSelected" let-onCheckboxChangeFn="onCheckboxChangeFn">
    <div class="checkbox d-flex align-items-center">
        <input type="checkbox" value="1" id="checkbox_1{{rowIndex}}"  [checked]="isSelected" (change)="onCheckboxChangeFn($event)">
        <label for="checkbox_1{{rowIndex}}"></label>
    </div>
    </ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Title" cellClass="d-flex align-items-center"></ngx-datatable-column>
<ngx-datatable-column name="Place" cellClass="d-flex align-items-center">
    <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
        <a href="javascript:;" *ngFor="let value of row.places" class="btn btn-tag">{{value}}</a>
    </ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Activities" cellClass="d-flex align-items-center"></ngx-datatable-column>
<ngx-datatable-column name="Status" cellClass="d-flex align-items-center"></ngx-datatable-column>
<ngx-datatable-column name="Last Update" cellClass="d-flex align-items-center"></ngx-datatable-column>
</ngx-datatable>
```

{% endtab %}

{% tab title="Typescript" %}

```typescript
import { Component, OnInit,ViewChild } from '@angular/core';

@Component({
  selector: 'app-basic',
  templateUrl: './basic.component.html',
  styleUrls: ['./basic.component.scss']
})
export class BasicComponent implements OnInit {

  basic_table_data;
  
  constructor() {
    this.fetch((data) => {
      this.basic_table_data = data;
    });
   }

  ngOnInit() {
  }

  fetch(cb) {
    const req = new XMLHttpRequest();
    req.open('GET', `assets/data/table.json`);

    req.onload = () => {
      cb(JSON.parse(req.response));
    };

    req.send();
  }

}

```

{% endtab %}
{% endtabs %}


# Maps

Maps in Pages will only support Google maps. The premium plugin "Mapplic" will not be included in the angular package as it only supports jQuery. However you could still use it from the HTML version and import it to Angular package.&#x20;

{% hint style="warning" %}
Note that using jQuery will cause unwanted increase in package size and will be a bad practice for templating causing unwanted issues.&#x20;
{% endhint %}

{% embed url="<https://github.com/ng2-ui/map>" %}

## Importing

First import it to your app module or any submodule as you wish

```typescript
import { NguiMapModule} from '@ngui/map';
@NgModule({
  imports: [NguiMapModule.forRoot({apiUrl: 'https://maps.google.com/maps/api/js?key=YOUR_KEY_HERE'}),...]
})
export class AppModule(){}
```

## How to use&#x20;

{% tabs %}
{% tab title="HTML" %}

```markup
<ngui-map  [zoom]="zoomLevel" [styles]="styles" [center]="center" [disableDefaultUI]="disableDefaultUI"></ngui-map>
```

{% endtab %}

{% tab title="Typescript" %}

```typescript
import { Component, OnInit } from '@angular/core';
import { pagesToggleService } from '../../@pages/services/toggler.service'
import { Subscriber } from 'rxjs/Subscriber'

@Component({
  selector: 'google-map-page',
  templateUrl: './google.component.html',
  styleUrls: ['./google.component.scss']
})
export class GoogleMapPage implements OnInit {
  zoomLevel = 11;
  center  = {lat: 40.6700, lng: -73.9400};
  disableDefaultUI = true;
  styles = [{
    featureType: 'water',
    elementType: 'all',
        stylers: [{
            hue: '#e9ebed'
        }, {
            saturation: -78
        }, {
            lightness: 67
        }, {
            visibility: 'simplified'
        }]
    }, {
        featureType: 'landscape',
        elementType: 'all',
        stylers: [{
            hue: '#ffffff'
        }, {
            saturation: -100
        }, {
            lightness: 100
        }, {
            visibility: 'simplified'
        }]
    }, {
        featureType: 'road',
        elementType: 'geometry',
        stylers: [{
            hue: '#bbc0c4'
        }, {
            saturation: -93
        }, {
            lightness: 31
        }, {
            visibility: 'simplified'
        }]
    }, {
        featureType: 'poi',
        elementType: 'all',
        stylers: [{
            hue: '#ffffff'
        }, {
            saturation: -100
        }, {
            lightness: 100
        }, {
            visibility: 'off'
        }]
    }, {
        featureType: 'road.local',
        elementType: 'geometry',
        stylers: [{
            hue: '#e9ebed'
        }, {
            saturation: -90
        }, {
            lightness: -8
        }, {
            visibility: 'simplified'
        }]
    }, {
        featureType: 'transit',
        elementType: 'all',
        stylers: [{
            hue: '#e9ebed'
        }, {
            saturation: 10
        }, {
            lightness: 69
        }, {
            visibility: 'on'
        }]
    }, {
        featureType: 'administrative.locality',
        elementType: 'all',
        stylers: [{
            hue: '#2c2e33'
        }, {
            saturation: 7
        }, {
            lightness: 19
        }, {
            visibility: 'on'
        }]
    }, {
        featureType: 'road',
        elementType: 'labels',
        stylers: [{
            hue: '#bbc0c4'
        }, {
            saturation: -93
        }, {
            lightness: 31
        }, {
            visibility: 'on'
        }]
    }, {
        featureType: 'road.arterial',
        elementType: 'labels',
        stylers: [{
            hue: '#bbc0c4'
        }, {
            saturation: -93
        }, {
            lightness: -2
        }, {
            visibility: 'simplified'
        }]
    }];
  
  constructor(private toggler:pagesToggleService) { }

  ngOnInit() {
    this.toggler.setBodyLayoutClass("no-header");
    this.toggler.toggleFooter(false);
    this.toggler.setPageContainer("full-height");
    this.toggler.setContent("full-width full-height overlay-footer");
    this.toggler.setHeaderClass("transparent");
  }

  zoomIn(){
      this.zoomLevel++;
  }

  zoomOut(){
    this.zoomLevel--;
  }

}
```

{% endtab %}
{% endtabs %}


# Session and other pages

Pages ship with a few session pages like login, register, & lock screen.

Session pages are found under the module sessionModule which can be located in `src/app/session` folder. There is no[ root component / Layout](/angular/untitled) assigned from these components. Each page / session page [layout](/angular/untitled) is [assigned](/angular/untitled) from the router.&#x20;

{% tabs %}
{% tab title="Typescript" %}
{% code title="app.routing.ts" %}

```javascript
import { Routes } from '@angular/router';
//Layouts
import { 
  CondensedComponent,
  BlankComponent,
} from './@pages/layouts';

export const AppRoutes: Routes = [

  {
    path: '',
    //Your root layout
    component: BlankComponent,
    children: [{
      path: 'session',
      loadChildren: './session/session.module#SessionModule'
    }]
  }
];

```

{% endcode %}
{% endtab %}

{% tab title="Second Tab" %}

{% endtab %}
{% endtabs %}

In the sample router note that `BlankComponent` is imported from `@pages` - located in the folder @pages/layouts. And this import is used in the `component:BlankComponent` of the sample code above. Note that in BlankComponent we have only loaded styles relevantly needed for that module. You can see it in `@pages/layouts/blank/blank.component.scss` <br>

### Can we used the condensedLayout for sessionModules / Session Pages

Yes you can, make sure you have imported CondensedLayout from

`import { CondensedComponent} from './@pages/layouts';`

Then you need to make sure the styles are imported to your `@pages/layouts/condensed/condensed.component.scss`

**Styles that are required for Session Pages**

```css
//Login
@import "modules/login.scss";

//Lock screen
@import "modules/lock_screen.scss";

//Error
@import "modules/_error.scss";
```

*You can try this with any layout you like in @pages/layouts*


# Dashboards

Each [sub-layout](/angular/untitled#root-layout) has its own Dashboard page and these can be found under `app/dashboard`.  The `dashboard.module.ts`exposes the [widget components](/angular/widgets) that are shared between dashboard pages. As a result any widget can be added to a dashboard just by including the particular selector. &#x20;


# Widgets

Pre-built widget components that you can integrate with your dashboards or social feeds.

Pages comes with 24 pre-built widget components that you can easily integrate with your dashboards in no time. These can be found in `dashboard/widgets`folder and each widget folder is named after its `@Component`'s `selector.`Widgets are based off [pgcard component](/angular/ui-components/cards)&#x20;

## Importing

Widgets are available throughout all the pre-built dashboards via `dashboard.module.ts`. But if you are planning use them outside you will have to import them as below.&#x20;

```typescript
// Using ImageWidgetComponent as an example. Same steps apply to other widgets
import { ImageWidgetComponent } from './widgets/image-widget/image-widget.component';
@NgModule({
  declarations: [ImageWidgetComponent,...]
})
export class AppModule(){}
```

## bar-tile-widget

Features a stacked bar chart made with `echarts` component:

```http
<bar-tile-widget></bar-tile-widget>
```

![](/files/-LE3uGedgx6zvYsP8O9b)

## graph-live-widget

Features a looping vertical slider with stock market updates.&#x20;

```http
<graph-live-widget></graph-live-widget>
```

![](/files/-LE3vDFOtSKNb5F35Hhl)

## graph-options-widget

Features a line chart with toggle buttons.&#x20;

```http
<graph-options-widget></graph-options-widget>
```

![](/files/-LE3vnTkbom6QcNf6Ecw)

## graph-tile-flat-widget

Features a line chart with sales stats.&#x20;

```http
<graph-tile-flat-widget></graph-tile-flat-widget>
```

![](/files/-LE3w4iwxriJBIKJ4i0l)

## graph-tile-widget

Features a line chart with area filled in.&#x20;

```http
<graph-tile-widget></graph-tile-widget>
```

![](/files/-LE3wNQ-4KkuQrYG4qq0)

## graph-widget

Features a line chart with multiple series of data.

```http
<graph-widget></graph-widget>
```

| **Property** | **Description**                                                    | **Type** | **Default** |
| ------------ | ------------------------------------------------------------------ | -------- | ----------- |
| `IsAlt`      | Toggles three boxes with stock trading highlights and a search bar | boolean  | false       |

![](/files/-LE4-cHaZbbDniGBzGtd)

![Default view](/files/-LE3wlZ2eNYaDo0JWEHl)

## image-widget

Features a background image and an text overlay.&#x20;

```http
<image-widget></image-widget>
```

![](/files/-LE4-uEH1uS_3WhL2KSq)

## image-widget-basic

Features a background image and a text overlay. Intended to use for showing minimal content.&#x20;

```http
<image-widget-basic></image-widget-basic>
```

![](/files/-LE40V9OhOCczAacGHj0)

## plain-live-widget

Features a rotating text

```http
<plain-live-widget></plain-live-widget>
```

![](/files/-LE42d6qaKCdfQI-Ci5h)

## plain-widget

Features quick weather info&#x20;

```http
<plain-widget></plain-widget>
```

![](/files/-LE4392656_RO_Z0nnCa)

## progress-tile-flat-widget

Features a large title text and a progress bar

```http
<progress-tile-flat-widget></progress-tile-flat-widget>
```

![](/files/-LE43_2511WoO02WXshT)

## project-progress-widget

Features multiple progress bars in a tab view.&#x20;

```http
<project-progress-widget></project-progress-widget>
```

![](/files/-LE4410oBd5ns0WWU07A)

## quick-stats-widget

Features quick stats in extra large text and a progress bar.

```http
<quick-stats-widget></quick-stats-widget>
```

![](/files/-LE413n52t_6g3110ssV)

## realtime-widget

Designed to show live streaming data in a line chart. Demo widget represents sample data updated using a timer.&#x20;

```http
<realtime-widget></realtime-widget>
```

![](/files/-LE50ftWQX1uFCpnt8is)

## social-image-tile-widget

Shows an image in the style of a social feed post.&#x20;

```http
<social-image-tile-widget></social-image-tile-widget>
```

![](/files/-LE53pZCnCMTtnSP6Ps2)

## social-post-tile-widget

Shows a social post with text and an image.&#x20;

```http
<social-post-tile-widget></social-post-tile-widget>
```

![](/files/-LE56a1Bd4hq64aqYVOl)

## stacked-bar-widget

Features a [pg-tabset](/angular/ui-components/tabs) component with stacked bar charts representing multiple data sources for quick comparison. &#x20;

```http
<stacked-bar-widget></stacked-bar-widget>
```

![](/files/-LE59wBp9Q1k3JugSNxc)

## stat-tile-widget

This is also another mini widget similar to `quick-stats-widget` and `progress-tile-flat widget`. Sample widget illustrates stock trading stats &#x20;

```http
<stat-tile-widget></stat-tile-widget>
```

![](/files/-LE5A_cd_XLKlXN3Kb7g)

## table-basic-widget

Features a basic table layout. &#x20;

```http
<table-basic-widget></table-basic-widget>
```

![](/files/-LE5BBHKKVOwLqkJA7zB)

## table-widget

This is another variation of `table-basic-widget.`&#x20;

```http
<table-widget></table-widget>
```

![](/files/-LE5BqRWcuvyVhO9_YCg)

## todo-list-widget

Show todo-list items with checkboxes.&#x20;

```http
<todo-list-widget></todo-list-widget>
```

![](/files/-LE5CTIHanA-vaLC7hOJ)

## weather-widget

Shows weekly weather data together with animated weather icons from [Skycons](https://github.com/darkskyapp/skycons).&#x20;

```http
<todo-list-widget></todo-list-widget>
```

| **Property** | **Description**                                                                                                                                       | **Type** | **Default** |
| ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ----------- |
| `Type`       | By default weather widget shows two highlighted columns with weather data to the right in extra large screens. Set this to "compact" to disable them. | string   | undefined   |

![With Type option set to "compact"](/files/-LE5Da6gvkCLRN6uR7Xg)

![Default widget](/files/-LE5EQNsAOMaldOa5PSd)

## weekly-sales-widget

This is also another mini widget showing weekly sales data. &#x20;

```http
<weekly-sales-widget></weekly-sales-widget>
```

![](/files/-LE5F5gv91BAtCZzmwbI)


# Charts

Charts are powered by nvd3 and echarts please refer there guid for further documentation

{% embed url="<https://ecomfe.github.io/echarts-doc/public/en/option.html>" %}

## Importing

First import it to your app module or any submodule as you wish

```typescript
import { NgxEchartsModule } from 'ngx-echarts';
import { NvD3Module } from 'ngx-nvd3';
@NgModule({
  imports: [NvD3Module,NgxEchartsModule,...]
})
export class AppModule(){}
```

## How to use&#x20;

{% tabs %}
{% tab title="HTML" %}

```markup
<div echarts [options]="optionsLineStack" [initOpts]="initOptionsLineStack" class="demo-chart"></div>
```

{% endtab %}

{% tab title="Typescript" %}

```typescript
    initOptionsLineStack = {
      renderer: 'svg',
      width: 460,
      height: 300
    };
  
    optionsLineStack = {
      tooltip : {
        trigger: 'axis',
        backgroundColor:'#fff',
        padding:10,
        textStyle:{
            color:pg.getColor('master'),
            fontSize:12,
            fontFamily:"Arial",
        },
        axisPointer:{
          type:"line",
          lineStyle:{
              opacity:0.6
          }
        },
        extraCssText:"box-shadow: 0 0 6px rgba(0,0,0,.1);"
      },
      grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
      },
      xAxis : [
          {
              type : 'category',
              boundaryGap : false,
              data : [10, 10, 25, 29, 20, 22, 20, 22],
                          axisLine:{
                  show:false
              },
              axisTick:{
                  show:false
              },
              axisLabel:{
                  show:false
              }
          }
      ],
      yAxis : [
          {
              type : 'value',
              axisLine:{
                  show:false
              },
              axisLabel:{
                  show:false
              },
              axisTick:{
                  show:false
              },
              splitLine:{
                  show:false
              },
              backgroundColor:"#fff"
          }
      ],
      series : [
          {
              name:'Visitors',
              type:'line',
              stack: '',
              areaStyle: {
                opacity:0.4
              },
              data:[10, 10, 25, 29, 20, 22, 20, 22],
              clipOverflow:'start',
              itemStyle:{
                color:pg.getColor('warning')
              },
              lineStyle:{
                width:0
              }
          },
          {
              name:'New Visitors',
              type:'line',
              stack: '',
              areaStyle: {
                opacity:0.4
              },
              data:[0, 10, 8, 20, 15, 10, 15, 5],
              clipOverflow:'start',
              itemStyle:{
                color:pg.getColor('danger')
              },
              lineStyle:{
                width:0
              }
          }
      ]
    } 
```

{% endtab %}
{% endtabs %}


# Change log

### 4.1.0

#### Release

* \[Updated] Angular 6 Native Support
* \[Upgrade] Angular @pages styles support new update
* \[Fixed] \[Angular] Modal z-index issues

### 4.0.0

#### Release

* \[Added] Angular 5 Native Support
* \[Upgrade] Bootstrap v4.1
* \[Upgrade] JQuery 3.2.1
* \[Removed] MeteroJS Support
* \[Fixed] Minor Issues on HTML version
* \[Fixed] SASS fixes and LESS optimization

### 3.0.0

#### Release

* \[Upgrade] Bootstrap v4
* \[Added] 5 Different Layouts
* \[Added] 2 New themes
* \[Removed] IE9 support
* \[Removed] Angular 1.x Support
* \[Upgrade] CalendarJS compatibility with npm
* \[Fixed] Bugs in IE10
* \[Upgrade] MeteroJS support to v1.5
* \[Fixed] SASS fixes and LESS optimization

### v2.3.0

#### Release

* \[Upgrade] Bootstrap to v3.3.7
* \[Upgrade] Fontawesome to v4.7.0
* \[Fixed] \[Calendar] pagescalendar('getEvents',option);
* \[Fixed] \[Calendar] pagescalender(“rebuild”)
* \[Fixed] \[Calendar] Setting startOfTheWeek and endOfTheWeek breaks
* \[Fixed] \[Calendar] Scroll to first event is not working properly
* \[Fixed] \[Calendar] Calendar.settings.header.visible not applying properly
* \[Fixed] Prevent scroll propagation on sidebar menu
* \[Fixed] \[Calendar] Uncaught TypeError: Cannot read property 'pageX' of undefined

### v2.2.0

#### Release

* \[Add] Pending Comments Widget&#x20;
* \[Add] Map Sales Widget
* \[Upgrade] Select2 to v4.0.3
* \[Upgrade] UIselect to v0.19.3 - Angular \*BETA
* \[Removed] Select2 v3.x
* \[Fixed] [\[Calendar\] weekends: false makes Mondays be empty](https://github.com/revoxltd/pages/issues/397)
* \[Fixed] [\[Calendar\] this.checkOptionsAndBuild()](https://github.com/revoxltd/pages/issues/417)
* \[Fixed] [\[Calendar\] onTimeSlotDblClick not working on mobile](https://github.com/revoxltd/pages/issues/424)
* \[Fixed] [\[Calendar\] scroll to first Event](https://github.com/revoxltd/pages/issues/423)
* \[Fixed] [\[Calendar\] overlapping events more than 2 causes wrong length](https://github.com/revoxltd/pages/issues/422)
* \[Fixed] csSelect for angular

### v2.1.6

#### Release

* \[Add] Minimal Weekly Stats Widget
* \[Add] Project Progress Widget
* \[Add] Stat Cards Widget
* \[Fixed] Angular Email Compose Unwanted width
* \[Remove] duplicate code
* \[Add] "context" parameter to init functions - Pages.js
* \[Add] Better way to get selected option
* \[Remove] unused variable (padding) - Pages.js

### v2.1.5

#### Release

* Full Compatibility with SASS / SCSS
* Compatibility with LibSass
* Misspelled bootstrap diretory in assets folder
* Remove console.log calls in pages.js

### v2.1.4

#### Release

* Full Compatibility with SASS / SCSS
* Compatibility with LibSass
* Misspelled bootstrap directory in assets folder

### v2.1.3

#### Release

* Fixes for sass/scss
* \[Calendar] eventOverlap should be set to false by default and changing does not disable events to overlap
* \[Calendar] eventBubble attribute not working as expected
* \[Calendar] ui visible option change doesn't effect anything
* \[Calendar] local variable/attribute change doesn't effect anything
* \[Notification] In mobile when menu is open it overlaps with the sidebar
* &#x20;\[Calendar] MonthView onMonth change&#x20;

### v2.1.2

#### Release

* Weekly Widget #2 - Table Widget
* Weekly Widget #3 - Pie Chart Widget
* Fixed : Datatable Pagination Styles
* Fixed : Using Boostrap dropdowns in tables
* Fixed : Calendar date selectiong gets slower with each selection
* Fixed : Force load all fonts via HTTP breaks SSL
* Fixed : Jquery in Rails
* Fixed : Datatable sorting\_disabled css


# Getting Started

## Introduction

Pages is carefully well thought UI frame work that is built on top of Bootstrap 4 and Angular 8+. Currently you are viewing the HTML and JQuery version with Bootstrap 4.

## Getting Started

This part of the doc will help you to quickly start your project and will you a basic idea about how pages work. Pages HTML version comes with 5 Layouts and 9 themes. <br>

Select the layout you want

{% content-ref url="/pages/-LDC2HxOSX6DIHvxviyq" %}
[Layouts](/introduction/layouts)
{% endcontent-ref %}

Select the theme you want

{% content-ref url="/pages/-LDCBElQiwpNDV55XiZX" %}
[Themes](/introduction/themes)
{% endcontent-ref %}


# Layouts

To start your project we have created fresh versions of each layout without any unwanted JS, CSS and demo content. All these files are located in getting\_started directory

## **Condensed**

One of our most popular Layouts, Pages Condensed offers a wide range of responsive space specifically for dashboards with heavy content. \
\
**File location**\
Quick start -`getting_started/html/condensed_layout.html`\
Demo Files -`demo/html/consended/`

![Starter Template](/files/-M4OroFMsu3ZpslcQLFZ)

## &#x20;**Casual**

A new tone of voice – a relaxed, friendly, joyful layout that quickly makes the user experience more personal, casual and fun!. Comes with horizontal layout and sidebar option \
\
Quick start -`getting_started/html/casual_default.html`\
Demo Files -`demo/html/casual/`

![](/files/-M4OsFKTDVaG3Ij7-Of1)

## **Corporate**

Corporate is a bold, cool Layout that elevates your content by utilizing a clean layout and a simple, open interface. Contains boxed version and secondary sidebar. \
\
Quick start -`getting_started/html/corporate.html`\
Demo Files -`demo/html/corporate/`

![Starter Template](/files/-M4OtizUKP5CB2W0poDb)

## **Simply White**

In a world of complexity, Simplicity defeats stress. Simply white is an open simple, minimal yet striking layout, built to combat stress. Contains boxed version and secondary sidebar. \
\
Quick start -`getting_started/html/simply_white.html`\
Demo Files -`demo/html/simply_white/`

![Starter Template](/files/-M4OuGS6oSt5Iey2PBE8)

## **Executive**

A Professional template with a timeless look, best suited to quickly create a serious organized experience. Comes with horizontal layout and sidebar option \
\
Quick start -`getting_started/html/executive_default.html`\
Demo Files -`demo/html/executive/`

![Starter Template](/files/-M4Ox__QAZkauAd-T7Hg)

Once you decided the layout you wish to you use, copy all the folders and the layout html file (eg:executive\_default.html) to your project folder and work from there. The folders include

* pages
* assets

Next select the theme you want to use

{% content-ref url="/pages/-LDCBElQiwpNDV55XiZX" %}
[Themes](/introduction/themes)
{% endcontent-ref %}


# Themes

Once you have selected the layout you wish to use in the previous article. You should decide to whether to use CSS or SCSS. Pages support both options. Next Pages comes with 9 color themes to select. See below how to change or use them.<br>

## **Using CSS**

We have included 9 pre-made themes found inside `pages/css/themes/` To switch theme locate the link tag with class="main-stylesheet" in your head tag. Replace href or entire link stylesheet tag with the below ones.

1. Default

   ```markup
   <link class="main-stylesheet" href="pages/css/pages.css" rel="stylesheet" type="text/css" />
   ```
2. Corporate

   ```markup
   <link class="main-stylesheet" href="pages/css/themes/corporate.css" rel="stylesheet" type="text/css" />
   ```
3. Light

   ```markup
   <link class="main-stylesheet" href="pages/css/themes/light.css" rel="stylesheet" type="text/css" />
   ```
4. Retro

   ```markup
   <link class="main-stylesheet" href="pages/css/themes/retro.css" rel="stylesheet" type="text/css" />
   ```
5. Simple

   ```markup
   <link class="main-stylesheet" href="pages/css/themes/simple.css" rel="stylesheet" type="text/css" />
   ```
6. Mordern

   ```markup
   <link class="main-stylesheet" href="pages/css/themes/mordern.css" rel="stylesheet" type="text/css" />
   ```
7. Vibes

   ```markup
   <link class="main-stylesheet" href="pages/css/themes/vibes.css" rel="stylesheet" type="text/css" />
   ```
8. Unlax

   ```markup
   <link class="main-stylesheet" href="pages/css/themes/unlax.css" rel="stylesheet" type="text/css" />
   ```
9. Abstract

   ```markup
   <link class="main-stylesheet" href="pages/css/themes/abstract.css" rel="stylesheet" type="text/css" />
   ```

## **Using SCSS**

SCSS works much easier where you can switch the theme by simply changing the import path to the variable file.\
\
The import is located at `pages/scss/pages.scss`&#x20;

#### Default

```css
// Import Vars
@import "var";
```

#### Change to&#x20;

```css
// Import Vars
@import "themes/abstract/var";
```

you can change it to any the in the pages/scss/themes folder

## **Creating your own theme**

The themes will be found under `pages/scss/theme/` folder

**Step One**

Create a new folder under the `scss/theme/my_theme`

**Step Two**

Create a new file name called `theme.scss` under the `scss/theme/my_theme` and add the following code

```
@import "var";
```

**Step Three**

Create a new file name called `var.scss` under the `scss/theme/my_theme` and import the code of`scss/theme/abstract/var.scss` to it and change the following variables \
\
**Main Base color**&#x20;

```css
$color-contrast-lowest: #fff; 
$color-contrast-higher: #121212;
```

#### Primary Color

```css
$color-primary: #6462e6;
$color-complete: #2979fb; 
$color-success: #00cea0; 
$color-warning: #fece40; 
$color-danger: #f13d5b; 
$color-info: #363c52; 
$color-menu: #3b3a48;
```

**Step Four**

Change the variable `$theme-name` to your theme name in `scss/pages.scss`


# Sass

Sass is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions. Pages support Sass and is purely built on top of Sass

Sass Files are found under `pages/src/sass`

* sass
  * modules
  * themes
  * mixin.scss
  * color.scss
  * modules.scss
  * pages.scss
  * responsive.scss
  * var.scss

## **Modules**

The separation of modules help you to remove what's not necessary and build your own custom pages CSS. You can specify which module you need and do not need in modules.scss file.

| NAME                      | DESCRIPTION                                                     |
| ------------------------- | --------------------------------------------------------------- |
| layout.scss               | The core layout styles for pages                                |
| headers.scss              | Top Navigation bar                                              |
| respnsive.scss            | The responsive handlers                                         |
| cards.scss                | Bootstrap cards over-written classes                            |
| chat.scss                 | Contains classes for the right hand sidebar chat                |
| typography.scss           | Contains all typo related styles included bg-color              |
| button.scss               | Bootstrap button over-written classes and pages dropdown        |
| alerts.scss               | Bootstrap alert messages over-written classes                   |
| breadcrumb.scss           | Bootstrap breadcrumb classes                                    |
| notifications.scss        | Pages notifications, bootstrap badges, popovers                 |
| checkbox.scss             | Pages checkboxes                                                |
| radio.scss                | Pages radio element                                             |
| horizontal\_layout.scss   | Pages horizontal layout classes for executive and casual layout |
| horizontal\_menu.scss     | Horizontal dropdown menu                                        |
| icons.scss                | Pages icons                                                     |
| list.scss                 | iOS style listview in chat and email                            |
| progress\_indicators.scss | Pages progress bars, bootstrap native progress                  |
| modals.scss               | Bootstrap Modal Classes                                         |
| tabs\_accordian.scss      | Bootstrap tabs and accordains                                   |
| sliders.scss              | Class for sliders                                               |
| treeview\.scss            | Class for treeview                                              |
| nestables.scss            | Class for nestables                                             |
| form\_elements.scss       | All form related class including layouts & validations          |
| tables.scss               | Classes for bootstrap tables and datatables                     |
| tables.scss               | Classes for bootstrap tables and datatables                     |
| vector\_map.scss          | Classes for mapplic plugin                                      |
| charts.scss               | All chart related classes                                       |
| print.scss                | Print media query for invoice                                   |
| overlay-search.scss       | Pages quick search classes                                      |
| quick-view\.scss          | Pages right hand-side quick drawer                              |
| lockscreen.scss           | Class for lockscreen                                            |
| page-loader.scss          | PaceJS classes for page loading bar                             |
| calendar.scss             | Pages Calendar plugin                                           |
| social.scss               | Pages Social                                                    |
| email.scss                | Pages email                                                     |
| login.scss                | Login page                                                      |
| misc.scss                 | All other utilities and helper classes                          |
| gallery.scss              | Image gallery                                                   |
| z-index.scss              | To maintain heierachchy and order for layers                    |

## **Variables**

Variables help to generate themes, you can custom build your very own theme. The variables will be included inside a specific theme e.g: scss/themes/default/var.scss by changing the few 5 main color variables you can create your color palette<br>

## **Creating your own Color Pallets**

By simply changing the following variables the entire color palette mention here will change Color Palette \
\
**Main Base color** \
`$color-contrast-lower`\
`$color-contrast-higher`

&#x20;\
**Primary Colors** \
`$color-success` \
`$color-complete` \
`$color-primary` \
`$color-warning` \
`$color-danger` \
`$color-info`<br>

**Mixins**

We have made a wide variety of mixins that can be used in scss, \
mixins can be found under `pages/src/scss/mixin.scss`<br>


# Content

Contents are referred to as inner layout structure. We have pre-build different inner content structures that are widely used for different web apps or even mobiles apps<br>

Layouts:

* Plain
* Coverpage with parallax
* Full height coverpage with parallax
* Page title parallax
* Column view 3:9
* Column view 9:3
* Column view 6:6

## **Plain**

```markup
<!-- START PAGE CONTENT -->
<div class="content">
    <!-- START PAGE COVER -->
    <div class="container-fluid container-fixed-lg ">
        <ul class="breadcrumb">
            <li>
                <p>home</p>
            </li>
            <li><a href="#" class="active">Plain template</a> 
            </li>
        </ul>
        <!-- END BREADCRUMB -->
        <h3 class="page-title">Page Title</h3>
    </div>

    <div class="container-fluid container-fixed-lg">

          <!-- CONTENT GOES HERE-->

    </div>
</div>
<!-- END PAGE CONTENT -->
```

## **Coverpage with parallax**

```markup
<div class="content">
  <!-- START JUMBOTRON -->
  <div class="jumbotron page-cover" data-pages="parallax">
    <div class="container-fluid container-fixed-lg">
      <div class="inner">
        <!-- START BREADCRUMB -->
        <ul class="breadcrumb">
          <li>
            <p>Home</p>
          </li>
          <li>
            <a class="active" href="#">Parrallax</a>
          </li>
        </ul><!-- END BREADCRUMB -->
        <div class="container-md-height m-b-20">
          <div class="row row-md-height">
            <div class="col-lg-7 col-md-6 col-md-height col-middle bg-white">
              <!-- START PANEL -->

              <div class="full-height">
                <div class="panel-body text-center">
                
                </div>
              </div><!-- END PANEL -->
            </div>

            <div class="col-lg-5 col-md-height col-md-6 col-top">
              <!-- START PANEL -->

              <div class="panel panel-transparent">
                <div class="panel-heading">
                  <div class="panel-title">
                    Getting started
                  </div>
                </div>

                <div class="panel-body">

                </div>
              </div><!-- END PANEL -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div><!-- END JUMBOTRON -->

  <div class="container-fluid container-fixed-lg ">

  </div>
</div><!-- END PAGE CONTENT -->
```

## **Full height coverpage with parallax**

```markup
<div class="page-content-wrapper content-builder full-height">
  <!-- START PAGE CONTENT -->
  <div class="content full-height">
    <!-- START JUMBOTRON -->
    <div class="jumbotron full-height no-padding" data-pages="parallax">
      <div class="container-fluid container-fixed-lg sm-p-l-20 sm-p-r-20 full-height">
        <div class="inner full-height">
          <div class="container-xs-height full-height">
            <div class="col-xs-height col-middle text-center">
              <div class="col-md-6 col-md-offset-3 text-center">
                <h2 class="text-center"><img alt="logo" src="assets/img/logo.png"> makes it super-easy to create your
                dashboard Without a designer.</h2><button class="btn btn-success btn-rounded">Live Preview</button>
                <button class="btn btn-link text-white">Watch Video</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div><!-- END JUMBOTRON -->

    <div class="container-fluid container-fixed-lg">
    
    </div>
  </div>
</div><!-- END PAGE CONTENT -->
```

## **Page title parallax**

```markup
<div class="content">
  <!-- START JUMBOTRON -->
  <div class="jumbotron no-margin" data-pages="parallax">
    <div class="container-fluid container-fixed-lg sm-p-l-20 sm-p-r-20">
      <div class="inner">
        <h3 class="">Page Title</h3>
      </div>
    </div>
  </div><!-- END JUMBOTRON -->
  <div class="container-fluid container-fixed-lg demo-container">
    <!-- START BREADCRUMB -->
    <ul class="breadcrumb">
      <li>
        <p>home</p>
      </li>
      <li>
        <a class="active" href="#">Parallax for page title</a>
      </li>
    </ul><!-- END BREADCRUMB -->
    
  </div>
</div><!-- END PAGE CONTENT -->
```

## **Column view 3:9**

```markup
<!-- START PAGE CONTENT WRAPPER -->
<div class="page-content-wrapper content-builder full-height">  
    <!-- START PAGE CONTENT -->
    <div class="content full-height">
        <div class="container-fluid full-height no-padding">
            <div class="row full-height no-margin">
                <div class="col-md-3 no-padding b-r b-grey sm-b-b full-height">
                    <div class="bg-white full-height">
                    <!-- YOU CAN REMOVE FULL-HEIGHT IN ALL PARENT ELEMENTS TO EXPEND TO CONTENT HEIGHT
                       YOU CAN ALSO CHANGE THE BACKGROUND COLOR BY ADDING THE BG CLASSES
                       EXAMPLE : bg-success
                     -->
                    </div>
                </div>
                <div class="col-md-9 no-padding full-height">
                    <div class="placeholder full-height">
                    <!-- YOU CAN REMOVE FULL-HEIGHT IN ALL PARENT ELEMENTS TO EXPEND TO CONTENT HEIGHT
                       YOU CAN ALSO CHANGE THE BACKGROUND COLOR BY ADDING THE BG CLASSES
                       EXAMPLE : bg-success
                     -->
                    </div>
                </div>
            </div>
            </div>
    </div>
    <!-- END PAGE CONTENT -->
</div>
<!-- END PAGE CONTENT WRAPPER -->
```

**Column view 9:3**

```markup
<!-- START PAGE CONTENT WRAPPER -->
<div class="page-content-wrapper content-builder full-height">  
    <!-- START PAGE CONTENT -->
    <div class="content full-height">
        <div class="container-fluid full-height no-padding">
            <div class="row full-height no-margin">
                <div class="col-md-9 no-padding b-r b-grey sm-b-b full-height">
                    <div class="bg-white full-height">
                    <!-- YOU CAN REMOVE FULL-HEIGHT IN ALL PARENT ELEMENTS TO EXPEND TO CONTENT HEIGHT
                       YOU CAN ALSO CHANGE THE BACKGROUND COLOR BY ADDING THE BG CLASSES
                       EXAMPLE : bg-success
                     -->
                    </div>
                </div>
                <div class="col-md-3 no-padding full-height">
                    <div class="placeholder full-height">
                    <!-- YOU CAN REMOVE FULL-HEIGHT IN ALL PARENT ELEMENTS TO EXPEND TO CONTENT HEIGHT
                       YOU CAN ALSO CHANGE THE BACKGROUND COLOR BY ADDING THE BG CLASSES
                       EXAMPLE : bg-success
                     -->
                    </div>
                </div>
            </div>
            </div>
    </div>
    <!-- END PAGE CONTENT -->
</div>
<!-- END PAGE CONTENT WRAPPER -->
```

**Column view 6:6**

```markup
<!-- START PAGE CONTENT WRAPPER -->
<div class="page-content-wrapper content-builder full-height">  
    <!-- START PAGE CONTENT -->
    <div class="content full-height">
        <div class="container-fluid full-height no-padding">
            <div class="row full-height no-margin">
                <div class="col-md-6 no-padding b-r b-grey sm-b-b full-height">
                    <div class="bg-white full-height">
                    <!-- YOU CAN REMOVE FULL-HEIGHT IN ALL PARENT ELEMENTS TO EXPEND TO CONTENT HEIGHT
                       YOU CAN ALSO CHANGE THE BACKGROUND COLOR BY ADDING THE BG CLASSES
                       EXAMPLE : bg-success
                     -->
                    </div>
                </div>
                <div class="col-md-6 no-padding full-height">
                    <div class="placeholder full-height">
                    <!-- YOU CAN REMOVE FULL-HEIGHT IN ALL PARENT ELEMENTS TO EXPEND TO CONTENT HEIGHT
                       YOU CAN ALSO CHANGE THE BACKGROUND COLOR BY ADDING THE BG CLASSES
                       EXAMPLE : bg-success
                     -->
                    </div>
                </div>
            </div>
            </div>
    </div>
    <!-- END PAGE CONTENT -->
</div>
<!-- END PAGE CONTENT WRAPPER -->
```


# Calendar

Pages calendar plugin is exclusive only on pages and is not a third party plugin. The horizontal scrolling helps it to fit easily on to small screens and user experience is seamless across all platforms. It supports many features including **multiple languages and timezones**

## How to Setup

### **Dependencies**

```markup
<script src="assets/plugins/interactjs/interact.min.js" type="text/javascript"></script>
<script src="assets/plugins/moment/moment-with-locales.min.js"></script>
```

### **Pages Calendar Lib**

```markup
<script src="pages/js/pages.calendar.min.js"></script>
```

### **HTML Source**

Inlcude the following HTML source to your file, you can remove the compontents you do not need to have

```markup
<div id="myCalendar" class="full-height"></div>
```

### **Initialize Pages Calendar**

To initialize pages calendar with default setting use the following code

```javascript
$('#myCalendar').pagescalendar();
```

### **Calendar Settings and Callbacks**

```javascript
 $('body').pagescalendar({
    ui: {
        //Year Selector
        year: {
            visible: true,
            format: 'YYYY',
            startYear: '2000',
            endYear: moment().add(10, 'year').format('YYYY'),
            eventBubble: true
        },
        //Month Selector
        month: {
            visible: true,
            format: 'MMM',
            eventBubble: true
        },
        dateHeader: {
            format: 'MMMM YYYY, D dddd',
            visible: true,
        },
        //Mini Week Day Selector
        week: {
            day: {
                format: 'D'
            },
            header: {
                format: 'dd'
            },
            eventBubble: true,
            startOfTheWeek: '0',
            endOfTheWeek:'6'
        },
        //Week view Grid Options
        grid: {
            dateFormat: 'D dddd',
            timeFormat: 'h A',
            eventBubble: true,
            scrollToFirstEvent:false,
            scrollToAnimationSpeed:300,
            scrollToGap:20
        }
    },
    eventObj: {
        editable: true
    },
    view:'week',
    now: null,
    locale: 'en',
    //Event display time format
    timeFormat: 'h:mm a',
    minTime:0,
    maxTime:24,
    dateFormat: 'MMMM Do YYYY',
    slotDuration: '30', //In Mins : supports 15, 30 and 60
    events: [],
    eventOverlap: false,
    weekends:true,
    disableDates:[],
    //Event CallBacks
    onViewRenderComplete: function() {},
    onEventDblClick: function() {},
    onEventClick: function(event) {},
    onEventRender: function() {},
    onEventDragComplete: function(event) {},
    onEventResizeComplete: function(event) {},
    onTimeSlotDblClick: function(timeSlot) {},
    onDateChange:function(range){}
})
```

**Sample JSON Event Object**

```javascript
[
    {
        "title": "Call Dave",
        "class": "bg-success-lighter",
        "start": "2014-10-07T06:00:00",
        "end": "2014-10-07T08:00:24",
        "other": {}
    },
    {
        "title": "Meeting Roundup",
        "class": "bg-success-lighter",
        "start": "2014-11-07T06:00:00"
    },
    {
        "title": "Double click Any where",
        "class": "bg-complete-lighter",
        "start": "2014-11-07T01:00:00",
        "end": "2014-11-07T02:00:00",
        "other": {
            "note": "test"
        }
    }
]
```

## **Public Methods**

```javascript
$('#my_calendar_elment').pagescalendar('rebuild');
```

Rebuild your calendar<br>

```javascript
$('#my_calendar_elment').pagescalendar('today');
```

Set date to current date<br>

```javascript
$('#my_calendar_elment').pagescalendar('next');
```

Next Month<br>

```javascript
$('#my_calendar_elment').pagescalendar('prev');
```

Previous Month<br>

```javascript
$('#my_calendar_elment').pagescalendar('setDate',value);
```

Parse in the date string to set a date to the calendar, it will accept any standard date formate<br>

```javascript
$('body').pagescalendar('getDate',formate);
```

You can get the current date of the calendar and also pass in the required date formate to get the the desire formate output \
\
**example :** `$('#my_calendar_elment').pagescalendar('getDate','dd/mm/yyyy');` \
It will accept any date formate string <br>

```javascript
$('#my_calendar_elment').pagescalendar('render');
```

To render the calendar<br>

```javascript
$('#my_calendar_elment').pagescalendar('setLocale','fr');
```

Change langues<br>

```javascript
$('#my_calendar_elment').pagescalendar('reloadEvent');
```

Reload and draw events for the particular view.<br>

```javascript
$('#my_calendar_elment').pagescalendar('addEvent',eventObject);
```

Adding an event to the calendar using the even object varriable, demostrated in demos/assets/js/calendar.js<br>

```javascript
$('#my_calendar_elment').pagescalendar('addEvent',eventArray);
```

Add a batch of events at once.<br>

```javascript
$('#my_calendar_elment').pagescalendar('removeEvent',index);
```

Removing an event also demonstrated in : demos/assets/js/calendar.js<br>

```javascript
$('#my_calendar_elment').pagescalendar('removeAllEvents');
```

This method will remove all events in your array<br>

```javascript
$('#my_calendar_elment').pagescalendar('updateEvent',eventObject);
```

Editing an event to the calendar using the even object variable, demonstrated in `demos/assets/js/calendar.js`<br>

```javascript
$('#my_calendar_elment').pagescalendar('getEvents',option);
```

Will get you all the events in your calendar array<br>

```javascript
$('#my_calendar_elment').pagescalendar('view',option);
```

You can set the view / You can change your view to : "month" & " week"<br>

```javascript
$('#my_calendar_elment').pagescalendar('getView');
```

Display the view type that is currently loaded : "month" or " week"<br>

```javascript
$('#my_calendar_elment').pagescalendar('getDateRangeInView');
```

Will display start and end date of the current view<br>

```javascript
$('#my_calendar_elment').pagescalendar('getDateRangeInView');
```

Will display start and end date of the current view<br>

```javascript
$('#my_calendar_elment').pagescalendar('setState',state);
```

You can set state mannually when you need to, there are two states "loading" and "loaded", This will help you to show a progressbar for lazy event fetching<br>

```javascript
$('#my_calendar_elment').pagescalendar('error',msg);
```

You can display an error message on your calendar by passing in a string<br>

```javascript
$('#my_calendar_elment').pagescalendar('scrollToFirstEvent')
```

Scroll to the first even on week and day view \
**Settings**<br>

```javascript
grid: {
    dateFormat: 'D dddd',
    timeFormat: 'h A',
    eventBubble: true,
    scrollToFirstEvent:false,
    scrollToAnimationSpeed:300,
    scrollToGap:20
}
```

## **Callbacks**

You can see a list of call back demonstrated in `demo/assets/calendar.js` file

`onViewRenderComplete()`

On Render Complete<br>

`onEventDblClick()`

Event Double Click<br>

`onEventClick(event)`

Event click call back returns the clicked event details into an array, you can `console.log(event)` to see all event attributes<br>

`onEventRender()`

After Events are rendered to the view<br>

`onEventDragComplete()`

After user drag event is completed<br>

`onEventResizeComplete()`

After user resize event is completed<br>

`onTimeSlotDblClick(timeSlot)`

Double click time slot on the grid, returns the date and time of the particular timeslot<br>

`onDateChange(range)`

When ever the calendar's date is change, this call back will return a range, i.e: range.start and range.end both are dates\ <br>

## **Supported Languages**

Use the language code and set it to `locale`

| LANGUAGE              | CODE     |
| --------------------- | -------- |
| Afrikaans             | af       |
| Albanian              | sq       |
| Armenian              | hy-am    |
| Azerbaijani           | az       |
| Bahasa Indonesia      | id       |
| Bahasa Malayu         | ms-my    |
| Basque                | eu       |
| Belarusian            | be       |
| Bengali               | bn       |
| Bosnian               | bs       |
| Breton                | br       |
| Bulgarian             | bg       |
| Catalan               | ca       |
| Chinese               | zh-cn    |
| Chinese (Traditional) | zh-tw    |
| Chuvash               | cv       |
| Croatian              | hr       |
| Czech                 | cs       |
| Danish                | da       |
| Dutch                 | nl       |
| English               | en       |
| English (Australia)   | en-au    |
| English (Canada)      | en-ca    |
| English (England)     | en-gb    |
| Esperanto             | eo       |
| Estonian              | et       |
| Farose                | fo       |
| Finnish               | fi       |
| French                | fr       |
| French (Canada)       | fr-ca    |
| Galician              | gl       |
| Georgian              | ka       |
| German                | de       |
| German (Austria)      | de-at    |
| Greek                 | el       |
| Hebrew                | he       |
| Hungarian             | hu       |
| Icelandic             | is       |
| Italian               | it       |
| Japanese              | ja       |
| Khmer (Cambodia)      | km       |
| Korean                | ko       |
| Latvian               | lv       |
| Lithuanian            | lt       |
| Luxembourgish         | lb       |
| Macedonian            | mk       |
| Malayalam             | ml       |
| Norwegian             | nb       |
| Norwegian Nynorsk     | nn       |
| Polish                | pl       |
| Portuguese            | pt       |
| Portuguese (Brazil)   | pt-br    |
| Romanian              | ro       |
| Russian               | ru       |
| Serbian               | sr       |
| Serbian Cyrillic      | sr-cyrl  |
| Slovak                | sk       |
| Slovenian             | sl       |
| Spanish               | es       |
| Swedish               | sv       |
| Tagalog (Filipino)    | tl-ph    |
| Tamaziɣt              | tzm      |
| Tamaziɣt Latin        | tzm-latn |
| Tamil                 | ta       |
| Thai                  | th       |
| Turkish               | tr       |
| Ukrainian             | uk       |
| Uzbek                 | uz       |
| Vietnamese            | vi       |
| Welsh                 | cy       |

For help and bug report please contact <support@revox.io><br>


# Social

Pages Social presents a Pinterest-like card layout that you can use for any social feed/timeline. It is also responsive and works flawlessly in mobile devices.

## **Include the dependencies**

Pages Social depends on the following jQuery plugins. Make sure you include them before calling the library functions.&#x20;

* [Isotope](http://isotope.metafizzy.co/)
* [Classie](https://github.com/desandro/classie)
* [StepsForm](https://github.com/codrops/MinimalForm)

```markup
<!-- Waits for the images to be loaded before applying the Isotope plugin -->
<script src="assets/plugins/imagesloaded/imagesloaded.pkgd.min.js"></script>
<!-- Isotope plugin arranges the card layout -->
<script src="assets/plugins/jquery-isotope/isotope.pkgd.min.js" type="text/javascript"></script>
<!-- Required for stepsForm plugin -->
<script src="assets/plugins/classie/classie.js" type="text/javascript"></script>
<!-- Creates the multi-step status update form -->
<script src="assets/plugins/codrops-stepsform/js/stepsForm.js" type="text/javascript"></script>
```

## **Include Pages Social Lib**

Include `pages.social.min.js` below `pages.js`

```markup
<script src="pages/js/pages.social.min.js"></script>
```

**Include Stylesheet**

We recommend that you use the 'simple' theme instead of pages default theme (pages.css) together with Social for better experience.

```markup
<link href="pages/css/themes/simple.css" rel="stylesheet" type="text/css" />
```

## **HTML Source**

The following shows the basic markup structure you have to follow when setting up the Social page. Components mentioned inside \*\*\* are further explained below. You may change the content inside each component without changing the main structure below.

```markup
<!-- START SOCIAL WRAPPER -->
<div class="social-wrapper">
    <!-- START SOCIAL -->
    <div class="social " data-pages="social">
        <!--
            *** SOCIAL COVER GOES HERE ***
        -->
        <div class="container-fluid container-fixed-lg sm-p-l-20 sm-p-r-20">
            <div class="feed">
                <!-- START DAY -->
                <div class="day" data-social="day">
                    <!--
                        *** POSTS GO HERE ***
                    -->
                </div>
                <!-- END DAY -->
            </div>
            <!-- END FEED -->
        </div>
        <!-- END CONTAINER FLUID -->
    </div>
    <!-- END SOCIAL -->
</div>
<!-- END SOCIAL WRAPPER -->
```

### **Markup for cover**

```markup
<!-- START SOCIAL COVER -->
<div class="jumbotron" data-pages="parallax" data-social="cover">
    <!-- START COVER PHOTO -->
    <div class="cover-photo">
        <img alt="Cover photo" src="assets/img/social/cover.png" />
    </div>
    <!-- END COVER PHOTO -->
    <!-- START COVER PHOTO INNER -->
    <div class="container-fluid container-fixed-lg sm-p-l-20 sm-p-r-20">
        <div class="inner">
            <div class="pull-bottom bottom-left m-b-40">
                <h5 class="text-white no-margin">welcome to pages social</h5>
                <h1 class="text-white no-margin"><span class="semi-bold">social</span> cover</h1>
            </div>
        </div>
    </div>
    <!-- END COVER PHOTO INNER -->
</div>
<!-- END SOCIAL COVER -->
```

### **Markup for posts**

{% code title="social.html" %}

```markup
<!-- START PROFILE OVERVIEW -->
<div class="card no-border bg-transparent full-width" data-social="item">

    <!--
        SHOW ANY PROFILE OWNER DATA IN THE FIRST FULL-WIDTH ISOTOPE ITEM
        EX: NAME, CURRENT STATUS, LOCATION, ABOUT SECTION AND FRIENDS
    -->
    <!-- START CONTAINER FLUID -->
    <div class="container-fluid p-t-30 p-b-30 ">
        <div class="row">
            <div class="col-md-4">
                <div class="container-xs-height">
                    <div class="row-xs-height">
                        <!-- START USER PROFILE PICTURE -->
                        <div class="social-user-profile col-xs-height text-center col-top">
                            <div class="thumbnail-wrapper d48 circular bordered b-white">
                                <img alt="Avatar" width="55" height="55" data-src-retina="assets/img/profiles/avatar_small2x.jpg" data-src="assets/img/profiles/avatar.jpg" src="assets/img/profiles/avatar.jpg">
                            </div>
                            <br>
                            <i class="fa fa-check-circle text-success fs-16 m-t-10"></i>
                        </div>
                        <!-- END USER PROFILE PICTURE -->
                        <!-- START USER NAME -->
                        <div class="col-xs-height p-l-20">
                            <h3 class="no-margin">David Nester</h3>
                            <p class="no-margin fs-16">is excited about the new pages design framework</p>
                            <p class="hint-text m-t-5 small">San Fransisco Bay | CEO at Pages.inc</p>
                        </div>
                        <!-- END USER NAME -->
                    </div>
                </div>
            </div>
            <!-- START USER BIO -->
            <div class="col-md-4">
                <p class="no-margin fs-16">Hi My Name is David Nester, &amp; heres my new pages user profile page</p>
                <p class="hint-text m-t-5 small">I love reading people's about page especially those who are in the same industry as me.</p>
            </div>
            <!-- END USER BIO -->
            <!-- START USER'S FRIENDS -->
            <div class="col-md-4">
                <p class="m-b-5 small">1,435 Mutual Friends</p>
                <ul class="list-unstyled ">
                    <li class="m-r-10">
                        <div class="thumbnail-wrapper d32 circular b-white m-r-5 b-a b-white">
                            <img width="35" height="35" data-src-retina="assets/img/profiles/1x.jpg" data-src="assets/img/profiles/1.jpg" alt="Profile Image" src="assets/img/profiles/1.jpg">
                        </div>
                    </li>
                    <li>
                        <div class="thumbnail-wrapper d32 circular b-white m-r-5 b-a b-white">
                            <img width="35" height="35" data-src-retina="assets/img/profiles/2x.jpg" data-src="assets/img/profiles/2.jpg" alt="Profile Image" src="assets/img/profiles/2.jpg">
                        </div>
                    </li>
                    ...
                    <li>
                        <div class="thumbnail-wrapper d32 circular b-white">
                            <div class="bg-master text-center text-white"><span>+34</span>
                            </div>
                        </div>
                    </li>
                </ul>
                <br>
                <p class="m-t-5 small">More friends</p>
            </div>
            <!-- END USER'S FRIENDS -->
        </div>
    </div>
    <!-- END CONTAINER FLUID -->
</div>
<!-- END PROFILE OVERVIEW -->

<!-- START STATUS UPDATE FORM -->
<!-- 
    USE 'col1, col2, col3' TO SPECIFY CARD WIDTH 
    data-social="item" AUTO INIT THE CARD
-->
<div class="card col2 padding-20" data-social="item">
    <!-- 
        MULTI-STEP STATUS UPDATE FORM IS MADE POSSIBLE USING 'stepsForm' PLUGIN 
    -->
    <form class="simform no-margin" autocomplete="off" data-social="status">
        <div class="status-form-inner">
            <!-- START QUESTIONS -->
            <ol class="questions">
                <li>
                    <span>
                       <label for="status-q1">What's on your mind?</label>
                    </span>
                    <input id="status-q1" name="q1" type="text" />
                </li>
                <li>
                    <span>
                        <label for="status-q2">What are you feeling?</label>
                    </span>
                    <input id="status-q2" name="q2" type="text" />
                </li>
                <li>
                    <span>
                        <label for="status-q3">What's your location?</label>
                    </span>
                    <input id="status-q3" name="q3" type="text" />
                </li>
                <li>
                    <span>
                        <label for="status-q4">Who are you with?</label>
                    </span>
                    <input id="status-q4" name="q4" type="text" />
                </li>
            </ol>
            <!--END QUESTIONS -->
            <button class="submit" type="submit">Send answers</button>
            <!-- FORM CONTROLS. DO NOT REMOVE -->
            <div class="controls">
                <button class="next"></button>
                <div class="progress"></div>
                <span class="number">
                    <span class="number-current"></span>
                    <span class="number-total"></span>
                </span>
                <span class="error-message"></span>
            </div>
        </div>
        <!-- MESSAGE TO BE DISPLAYED AT THE END -->
        <span class="final-message"></span>
    </form>
</div>
<!-- END STATUS UPDATE FORM -->
<!-- START POST TYPE-1 -->
<div class="card status col2" data-social="item">
    <div class="circle" data-toggle="tooltip" title="Label">
    </div>
    <h5>David Nester updated his status
                            <span class="hint-text">few seconds ago</span></h5>
    <h2>Earned my first salary bonus for the best design of the year award.</h2>
    <ul class="reactions">
        <li><a href="#">5,345 <i class="fa fa-comment-o"></i></a>
        </li>
        <li><a href="#">23K <i class="fa fa-heart-o"></i></a>
        </li>
    </ul>
</div>
<!-- END POST TYPE-1 -->
<!-- START POST TYPE-2 -->
<div class="card share share-self col1" data-social="item">
    <div class="circle" data-toggle="tooltip" title="Label">
    </div>
    <div class="card-header clearfix">
        <div class="user-pic">
            <img alt="Profile Image" width="33" height="33" data-src-retina="assets/img/profiles/5x.jpg" data-src="assets/img/profiles/5.jpg" src="assets/img/profiles/5x.jpg">
        </div>
        <h5>Shannon Williams</h5>
        <h6>Shared a photo
           <span class="location semi-bold"><i class="fa fa-map-marker"></i> NYC, New York</span>
        </h6>
    </div>
    <div class="card-description">
        <p>Inspired by : good design is obvious, great design is transparent</p>
        <div class="via">via themeforest</div>
    </div>
    <div class="card-content">
        <ul class="buttons ">
            <li>
                <a href="#"><i class="fa fa-expand"></i>
                                    </a>
            </li>
            <li>
                <a href="#"><i class="fa fa-heart-o"></i>
                                    </a>
            </li>
        </ul>
        <img alt="Social post" src="assets/img/social-post-image.png">
    </div>
    <div class="card-footer clearfix">
        <div class="time">few seconds ago</div>
        <ul class="reactions">
            <li><a href="#">5,345 <i class="fa fa-comment-o"></i></a>
            </li>
            <li><a href="#">23K <i class="fa fa-heart-o"></i></a>
            </li>
        </ul>
    </div>
</div>
<!-- END POST TYPE-2 -->
<!-- START POST TYPE-3 -->
<div class="card share share-self col1" data-social="item">
    <div class="circle" data-toggle="tooltip" title="Label">
    </div>
    <div class="card-header clearfix">
        <div class="user-pic">
            <img alt="Profile Image" width="33" height="33" data-src-retina="assets/img/profiles/8x.jpg" data-src="assets/img/profiles/8.jpg" src="assets/img/profiles/8x.jpg">
        </div>
        <h5>Jeff Curtis</h5>
        <h6>Shared a Tweet
                                <span class="location semi-bold"><i class="fa fa-map-marker"></i> SF, California</span>
                            </h6>
    </div>
    <div class="card-description">
        <p>What you think, you become. What you feel, you attract. What you imagine, you create - Buddha. <a href="#">#quote</a> </p>
        <div class="via">via Twitter</div>
    </div>
</div>
<!-- END POST TYPE-3 -->
<!-- START POST TYPE-4 -->
<div class="card share share-other col1" data-social="item">
    <div class="circle" data-toggle="tooltip" title="Label">
    </div>
    <div class="card-content">
        <ul class="buttons ">
            <li>
                <a href="#"><i class="fa fa-expand"></i>
                                    </a>
            </li>
            <li>
                <a href="#"><i class="fa fa-heart-o"></i>
                                    </a>
            </li>
        </ul>
        <img alt="Quote" src="assets/img/social/quote.jpg">
    </div>
    <div class="card-description">
        <p>Like if you agree</p>
    </div>
    <div class="card-footer clearfix">
        <div class="time">few seconds ago</div>
        <ul class="reactions">
            <li><a href="#">5,345 <i class="fa fa-comment-o"></i></a>
            </li>
            <li><a href="#">23K <i class="fa fa-heart-o"></i></a>
            </li>
        </ul>
    </div>
    <div class="card-header clearfix">
        <div class="user-pic">
            <img alt="Profile Image" width="33" height="33" data-src-retina="assets/img/profiles/7x.jpg" data-src="assets/img/profiles/7.jpg" src="assets/img/profiles/7x.jpg">
        </div>
        <h5>Tracy Brooks</h5>
        <h6>Shared a photo on your wall</h6>
    </div>
</div>
<!-- END POST TYPE-4 -->
<!-- START POST TYPE-5 -->
<div class="card share share-self col1" data-social="item">
    <div class="card-header ">
        <h5 class="text-complete pull-left fs-12">News <i class="fa fa-circle text-complete fs-11"></i></h5>
        <div class="pull-right small hint-text">
            5,345 <i class="fa fa-comment-o"></i>
        </div>
        <div class="clearfix"></div>
    </div>
    <div class="card-description">
        <h3>Ebola outbreak: Clinical drug trials to start next month as death toll mounts</h3>
    </div>
    <div class="card-footer clearfix">
        <div class="pull-left">via <span class="text-complete">CNN</span>
        </div>
        <div class="pull-right hint-text">
            Apr 23
        </div>
        <div class="clearfix"></div>
    </div>
</div>
<!-- END POST TYPE-5 -->
```

{% endcode %}

## **Initializing Pages Social**

Pages will auto-initialize Social if elements with following data-properties are found in the DOM. The following shows the default settings object for Social

```javascript
$.fn.social.defaults = {
        cover: '[data-social="cover"]',
        day: '[data-social="day"]',
        status: '[data-social="status"]',
        item: '[data-social="item"]',
        colWidth: 300
    }
```

If you wish to make the initialization programmatically, refrain from using the above data properties in the DOM. Set the classes/ids you defined in the DOM in `$.fn.social.defaults` object and then call the initialization script.

{% hint style="info" %}
The minimum column width for Social is `300` pixels. If you wish to change it, you may have edit the `.col1`,`.col2` and `.col3` in the CSS accordingly. ex: If `colWidth` is `400`, `.col1`,`.col2` and `.col3` will get `400px`, `820px`and `1220px` (Note the extra 20px reserved for gutter width)
{% endhint %}

```javascript
$(document).ready(function() {
    $.fn.social.defaults = {
        cover: '.cover', // Cover element
        day: '.day', // Day element
        status: '.status', // Status update box element
        item: '.item', // Post item
        colWidth: 300 // minimum column width for cards
    }
    $('#social').social();
});
```


# Email

Pages Email app is a web-based email client designed and developed exclusively for Pages framework. It has a responsive design to work flawlessly across many devices. Please note that current version only includes the Inbox and Compose views. This is a work in progress and we're hoping to make this a complete jQuery plugin soon

## **Dependencies**

Include the stylesheets of the libraries

```markup
<link href="assets/plugins/jquery-menuclipper/jquery.menuclipper.css" rel="stylesheet" type="text/css" />
```

Include the scripts

```markup
<script src="assets/plugins/quill/quill.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-menuclipper/jquery.menuclipper.js"></script>
```

Pages Email Lib

In `pages.email.js` please replace the URL “<http://pages.revox.io/json/emails.json”> (Line #54) with your own end point URL which can return a JSON having a structure mentioned below. Then include the updated file below `pages.js`.

```markup
<script src="pages/js/pages.email.js"></script>
```

{% hint style="info" %}
Use the following formate for emails
{% endhint %}

* emails - (Array) List of all emails categorized by date
  * group - Date category
  * list - list of emails received for the day
    * id - unique ID to represent each email, should be an unique integer
    * subject - Subject line of the email
    * to - (Array) Recipients name list
    * body - Email body. HTML is allowed
    * time - Time email was sent
    * datetime - Date and time combined
    * from - Sender name
    * dp - Display picture of the sender
    * dpRetina - Retina version of the display picture of the sender

## Sample JSON output

```javascript
{
    "emails": [
        {
            "group": "Today April 23",
            "list": [{
                "id": 1,
                "subject": "Pages - Multi-Purpose Admin Template Revolution Begins here!",
                "to": ["David Nester", "Jane Smith"],
                "body": "<p>First email body</p> ",
                "time": "5 Mins ago",
                "datetime": "Today at 1:33pm",
                "from": "David Nester",
                "dp": "assets/img/profiles/avatar.jpg",
                "dpRetina": "assets/img/profiles/avatar2x.jpg"
            }, {
                "id": 2,
                "subject": "Your site has some very imaginative animation /movement! ",
                "to": ["Anne Simons"],
                "body": "<p>Second email body</p> ",
                "time": "45 mins ago",
                "datetime": "Today at 1:33pm",
                "from": "Anne Simons",
                "dp": "assets/img/profiles/5.jpg",
                "dpRetina": "assets/img/profiles/5x.jpg"
            }]
        }, {
            "group": "Yesterday April 22",
            "list": [{
                "id": 3,
                "subject": "Good design is obvious. Great design is transparent",
                "to": ["John Doe", "Anne Simons"],
                "body": "<p>Third email body</p> ",
                "time": "1:33pm",
                "datetime": "Today at 1:33pm",
                "from": "David Nester",
                "dp": "assets/img/profiles/b.jpg",
                "dpRetina": "assets/img/profiles/b2x.jpg"
            }]
        }
    ]
}
```

## **Markup**

Inlcude the following HTML source in your file

### **Inbox view**

```markup
<!-- START EMAIL -->
<div class="email-wrapper">
    <!-- START EMAIL SIDEBAR MENU-->
    <nav class="email-sidebar padding-30">
        <a href="email_compose.html" class="btn btn-complete btn-block btn-compose m-b-30">Compose</a>
        <p class="menu-title">BROWSE</p>
        <ul class="main-menu">
            <li class="active">
                <a href="#">
                    <span class="title"><i class="pg-inbox"></i> Inbox</span>
                    <span class="badge pull-right">5</span>
                </a>
            </li>
            <li class="">
                <a href="#">
                    <span class="title"><i class="pg-folder"></i> All mail</span>
                </a>
                <ul class="sub-menu no-padding">
                    <li>
                        <a href="#">
                            <span class="title">Important</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="title">Labeled</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <span class="title"><i class="pg-sent"></i> Sent</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="title"><i class="pg-spam"></i> Spam</span>
                    <span class="badge pull-right">10</span>
                </a>
            </li>
        </ul>
        <p class="menu-title m-t-20 all-caps">Quick view</p>
        <ul class="sub-menu no-padding">
            <li>
                <a href="#">
                    <span class="title">Documents</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="title">Flagged</span>
                    <span class="badge pull-right">5</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="title">Images</span>
                </a>
            </li>
        </ul>
    </nav>
    <!-- END EMAL SIDEBAR MENU -->
    <!-- START EMAILS LIST -->
    <div class="email-list b-r b-grey"> <a class="email-refresh" href="#"><i class="fa fa-refresh"></i></a>
        <div id="emailList">
            <!-- START EMAIL LIST SORTED BY DATE -->
            <!-- END EMAIL LIST SORTED BY DATE -->
        </div>
    </div>
    <!-- END EMAILS LIST -->
    <!-- START OPENED EMAIL -->
    <div class="email-opened">
        <div class="no-email">
            <h1>No email has been selected</h1>
        </div>
        <div class="email-content-wrapper">
            <div class="actions-wrapper menuclipper bg-master-lightest">
                <ul class="actions menuclipper-menu no-margin p-l-20 ">
                    <li class="visible-sm-inline-block visible-xs-inline-block">
                        <a href="#" class="email-list-toggle"><i class="fa fa-angle-left"></i> All Inboxes
                                </a>
                    </li>
                    <li class="no-padding "><a href="#" class="text-info">Reply</a>
                    </li>
                    <li class="no-padding "><a href="#">Reply all</a>
                    </li>
                    <li class="no-padding "><a href="#">Forward</a>
                    </li>
                    <li class="no-padding "><a href="#">Mark as read</a>
                    </li>
                    <li class="no-padding "><a href="#" class="text-danger">Delete</a>
                    </li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <div class="email-content">
                <div class="email-content-header">
                    <div class="thumbnail-wrapper d48 circular bordered">
                        <img width="40" height="40" alt="" data-src-retina="assets/img/profiles/avatar2x.jpg" data-src="assets/img/profiles/avatar.jpg" src="assets/img/profiles/avatar2x.jpg">
                    </div>
                    <div class="sender inline m-l-10">
                        <p class="name no-margin bold">
                        </p>
                        <p class="datetime no-margin"></p>
                    </div>
                    <div class="clearfix"></div>
                    <div class="subject m-t-20 m-b-20 semi-bold">
                    </div>
                    <div class="fromto">
                        <div class="pull-left">
                            <div class="btn-group dropdown-default">
                                <a class="btn dropdown-toggle btn-small btn-rounded" data-toggle="dropdown" href="#">
                                        David Nester
                                        <span class="caret"></span>
                                        </a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Action</a>
                                    </li>
                                    <li><a href="#">Friend</a>
                                    </li>
                                    <li><a href="#">Report</a>
                                    </li>
                                </ul>
                            </div>
                            <label class="inline">
                                <span class="muted">&nbsp;&nbsp;to</span>
                                <span class=" small-text">johnsmith@skyace.com</span>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="clearfix"></div>
                <div class="email-content-body m-t-20">
                </div>
                <div class="wysiwyg5-wrapper b-a b-grey m-t-30">
                    <textarea class="email-reply" placeholder="Reply"></textarea>
                </div>
            </div>
        </div>
    </div>
    <!-- END OPENED EMAIL -->
    <!-- START COMPOSE BUTTON FOR TABS -->
    <div class="compose-wrapper visible-xs">
        <a class="compose-email text-info pull-right m-r-10 m-t-10" href="email_compose.html"><i class="fa fa-pencil-square-o"></i></a>
    </div>
    <!-- END COMPOSE BUTTON -->
</div>
<!-- END EMAIL -->
```

### **Compose view**

Replace `<div class="email-opened">...</div>` with the following for the compose view

```markup
<!-- START COMPOSE EMAIL -->
<div class="email-composer container-fluid">
    <div class="row">
        <div class="col-sm-12 no-padding">
            <div class="wysiwyg5-wrapper email-toolbar-wrapper">
            </div>
            <form id="form-project" role="form" autocomplete="off">
                <div class="form-group-attached">
                    <div class="row clearfix">
                        <div class="col-sm-6">
                            <div class="form-group form-group-default">
                                <label>TO:</label>
                                <input name="to" data-role="tagsinput" class="form-control tagsinput" type="text" value="John Smith" />
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group form-group-default">
                                <label>CC:</label>
                                <input type="text" class="form-control" name="cc" placeholder="Add Carbon Copy">
                            </div>
                        </div>
                    </div>
                    <div class="form-group form-group-default">
                        <label>Subject</label>
                        <input type="text" class="form-control" name="subject">
                    </div>
                </div>
            </form>
            <div class="wysiwyg5-wrapper email-body-wrapper">
                <textarea class="wysiwyg email-body" style="height:350px"></textarea>
            </div>
        </div>
    </div>
    <div class="row p-b-20">
        <div class="col-sm-11">
            <button class="btn btn-white btn-cons">Cancel</button>
            <button class="btn btn-complete btn-cons m-l-10">Send</button>
            <div class="checkbox inline m-l-20">
                <input type="checkbox" value="1" id="sendCC">
                <label for="sendCC" class="hint-text hidden-xs">Send a <span class="text-complete">Carbon Copy</span> CC to my Primary email address.</label>
                <label for="sendCC" class="hint-text visible-xs-inline">Send me a CC</label>
            </div>
        </div>
        <div class="col-sm-1">
            <button class="btn btn-complete pull-right">
                <i class="pg-save"></i>
            </button>
        </div>
    </div>
</div>
<!-- END COMPOSE EMAIL -->
```


# API Reference

```markup
<!-- Initialize Pages core objects -->
<script type="text/javascript" src="pages/js/pages.min.js">
```

## **Environment variables**

Pages will detect the user OS and add it as a class name (ex: 'windows', 'mac', 'unix', 'linux') into `body`.It will also detect if it's mobile device or desktop and add either 'mobile' and 'desktop' into the same tag.

## **Auto-initialized jQuery Plugins**

The following table shows which plugins are auto-initialized and their default configuration.

| PLUGIN                                                            | JQUERY                                                                                                                                                                                                                                                              |
| ----------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Bootstrap Tooltip](http://getbootstrap.com/javascript/#tooltips) | Set `[data-toggle="tooltip"]` to any button or anchor tag.                                                                                                                                                                                                          |
|                                                                   | `<a href="#" data-toggle="tooltip" data-placement="bottom" title="Print"><i class="fa fa-print"></i></a>`                                                                                                                                                           |
| [Select2](http://ivaynberg.github.io/select2/)                    | Set `[data-init-plugin="select2"]`                                                                                                                                                                                                                                  |
| [Scrollbar](http://gromo.github.io/jquery.scrollbar/)             | Set `class="scrollbar"`\<div style="height:200px" class="scrollbar">  ...\</div>                                                                                                                                                                                    |
| SelectFx                                                          | Set `[data-init-plugin="cs-select"]`\<select class="cs-select cs-skin-slide" data-init-plugin="cs-select">    \<option value="Websafe">Web-safe\</option>    \<option value="Helvetica">Helvetica\</option>    \<option value="SegeoUI">SegeoUI\</option>\</select> |
| [Unveil](http://luis-almeida.github.io/unveil/)                   | Applied to any `img`                                                                                                                                                                                                                                                |

## **Utility functions**

$.Pages.isVisibleXs()

Returns true if the current viewport is an extra small device. ex: Phones (<768px)<br>

$.Pages.isVisibleSm()

Returns true if the current viewport is a small device. ex: Tablets (≥768px)<br>

$.Pages.isVisibleMd()

Returns true if the current viewport is a medium device. ex: Desktops (≥992px)<br>

$.Pages.isVisibleLg()

Returns true if the current viewport is a large device. ex: Desktops (≥1200px)<br>

$.Pages.getUserAgent()

Reads the pre-set user-agent class from `body` and returns either 'mobile' or 'desktop'<br>

$.Pages.setFullScreen(element)

Makes the given element to go full-screen mode. ex: `$.Pages.setFullScreen(document.querySelector('html'));`<br>

$.Pages.getColor(color,opacity)

Returns the `rgba` value for a given [Pages contextual color](http://pages.revox.io/dashboard/latest/html/condensed/color.html) and opacity.

## How to auto re-initialize Pages plugins

Pages JS has initialize third-party plugins like select2, selectfx etc using data attributes. Sometimes you want to reinitialize these plugins after AJAX or DOM change.\
\
Use the following link of code :

`$.Pages.init();`


# Color

Every color used throughout the theme has been generated by using the following eight base colors, which are defined in the`var.scss`file. This makes theme customisation a matter of changing few SCSS variables.

Please refer for more on theme customisation

{% content-ref url="/pages/-LDCBElQiwpNDV55XiZX" %}
[Themes](/introduction/themes)
{% endcontent-ref %}

![](/files/-LE9Rlsl_l4R-3A5Yusl)

## **Monochrome color shades**

![](/files/-M2KaYpM0MvohLRngCp2)

## **Primary color shades**

![](/files/-LE9S4qMG6x84QJN73_z)

## **Complete color shades**

![](/files/-LE9Si20NBj2iuuRlLZk)

## **Success color shades**

![](/files/-LE9SnoF2KBzNBmdlQU3)

## **Warning color shades**

![](/files/-LE9SvvvsibwSDYiUsP7)

## **Danger color shades**

![](/files/-LE9T0-y2Hl3kx-M7Xsu)

## **Info color shades**

![](/files/-LE9T5C0_VwitCYbuwL9)

## **Menu color shades**

![](/files/-LE9TEAydXtDbSLnk3s1)

## **Other colors**

![](/files/-LE9TVmHjLa7hPYRJ2RO)


# Typopgrahy

Font rendering will differ from browser to browser and even platform to platform and sometimes it will look good on a Mac and would look horrible on Windows, this is something we see in most of the websites, We took web framework to whole new level where it looks good in all devices! no matter what platform browser or device you will you use it will look great

We used a method that will automatically select which font is best rendered as for your operating system. This is how it the render performance looks like

## **Heading Fonts**

| `PLATFORM`     | `BASE FONT`    | `FALL BACK` |
| -------------- | -------------- | ----------- |
| Mac OSX        | Helvetica Neue | Arial       |
| Windows        | SegeoUI        | Arial       |
| Linux          | Ubuntu         | Arial       |
| iOS            | Helvetica Neue | Arial       |
| Android        | Helvetica Neue | Arial       |
| Windows Mobile | SegeoUI        | Arial       |

### **Base Font**

**Arial**, The best Universal Multi-purpose. 98% Rendering rate \
The Arial® typeface : <http://www.fonts.com/font/monotype/arial><br>

### **Other Fonts**

MONTSERRAT \
The Montserrat® typeface : <http://www.google.com/> fonts/specimen/Montserrat

## **Font Color Classes**

You can add these classes to any element and its color of the font will change

eg :

![](/files/-LE9gy5IK_oNK0KjJm60)

```markup
<!-- In Paragraph -->
<p class="text-primary">Font Colour Changes! </p>

<!-- In any other tag -->
<div class="text-success">Font Colour Changes! </div>
```

### **Font Size Classes**

If you wish to change the default font size, then you can apply the following classes

eg :

![](/files/-LE9hJnKhJ39YE_WkNVf)

```markup
<!-- In Font Size 12 -->
<p class="fs-12">Font Size 12px </p>

<!-- In Font Size 13 -->
<p class="fs-13">Font Size 13px </p>

<!-- In Font Size 14 -->
<p class="fs-14">Font Size 14px </p>

<!-- In Font Size 15 -->
<p class="fs-15">Font Size 15px </p>

<!-- In Font Size 16 -->
<p class="fs-16">Font Size 16px </p>
```

### **Font Weights**

Try out different font weights, this can be applied if the font supports it only, works partial support for Arial - Paragraphs Full support for Headings

eg :

![](/files/-LE9jP4YMIKgI2pKcrnH)

```markup
<!-- Heading Light Weight -->
<h5 class="light">Thinnest</h5>

<!-- Heading Semi-bold Weight -->
<h5 class="semi-bold">Semi-bold</h5>

<!-- Heading bold Weight -->
<h5 class="bold">Most Boldest</h5>
```

### **Font Face Switching**

Apply heading font to paragraph or apply paragraph font to heading, you can switch it either way

eg :

![](/files/-LE9jR0wmhnwiLu4Ynbe)

```markup
<!-- Heading with Arial font -->
<h5 class="font-arial">Im now Arial</h5>

<!-- Paragraph with heading font -->
<p class="font-montserrat">I look different now</p>
```


# Icons

Pages come with its very own pixel perfect font icons that is made specially for pages, this has over 100 icons to choose from. \
We have also include the popular Google [Material Icon](https://material.io/resources/icons/) Currently it will scale up over Over 600 icons

## **Pages Icons**

Us the tag`<i></i>` with the class `pg-icon`. And enter the name of the icon you want in between the tag as shown in the example. To view all classes in pages icon go to our [cheat sheet](http://pages.revox.io/dashboard/cheatsheet/)

EXAMPLE :

```markup
<i class="pg-icon">home</i>
```

## **Material Icons**

Follow these steps to include an icon on to your page

### **Step one**

Check if the following Style sheet is already added inside the `<head>` tag

```markup
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
```

### **Step two**

Use a \<i> tag with the class "material-icons". You can find the list of all icons [here](https://material.io/resources/icons/?style=baseline)

EXAMPLE :

```markup
<i class="material-icons">
accessibility
</i>
```


# Buttons

## **Colors**

Pages buttons use the same contextual classes introduced in Bootstrap

![](/files/-M2K-ZXFjhXDOqtem2jk)

```markup
<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-complete">Complete</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>
```

## **Button animation**

Content inside a button can be animate on hover. Simply include the classes `.btn-animated` together with `.from-top` or `.from-left` to specify the animation direction, You can wish to have any icon you want in side the "hidden-block" div

![](/files/-M2K-qK7mZPHkewMShMJ)

```markup
<button
  aria-label=""
  type="button"
  class="btn btn-primary btn-cons btn-animated from-left"
>
  <span>Follow us</span>
  <span class="hidden-block">
    <i class="pg-icon">mail</i>
  </span>
</button>
<button
  aria-label=""
  type="button"
  class="btn btn-primary btn-cons btn-animated from-top"
>
  <span>Download</span>
  <span class="hidden-block">
    <i class="pg-icon">cloud</i>
  </span>
</button>
```

## **Default Dropdown**

Tired of seeing the standard Bootstrap dropdown? Wrap your dropdown toggle button and dropdown menu within `.dropdown-default` to get a modern and clean feel

![](/files/-M2K0MaRIva8277NCJAB)

```markup
<div class="btn-group dropdown-default">
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown <span class="caret"></span> </a>
    <ul class="dropdown-menu ">
        <li><a href="#">Arial</a>
        </li>
        <li><a href="#">Helvetica</a>
        </li>
        <li><a href="#">SegeoUI</a>
        </li>
    </ul>
</div>
<!-- Upside dropdown -->
<div class="btn-group dropdown-default dropup">
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown <span class="caret"></span> </a>
    <ul class="dropdown-menu ">
        <li><a href="#">Arial</a>
        </li>
        <li><a href="#">Helvetica</a>
        </li>
        <li><a href="#">SegeoUI</a>
        </li>
    </ul>
</div>
```

## **Tag Options**

Add `.btn-tag` followed by `.btn-tag-light` or `.btn-tag-dark` to have tag options with color variations for buttons. Additionally, rounded tags can be achieved by adding `.btn-tag-rounded`

![](/files/-M2K0VqrG04AmSTJVwRu)

```markup
<!-- Tag with a light background -->
<button class="btn btn-tag  btn-tag-light m-r-20">Link me</button>
<!-- Tag with a dark background -->
<button class="btn btn-tag  btn-tag-dark">Link me</button>
<!-- Rounded tag with a light background -->
<button class="btn btn-tag   btn-tag-light btn-tag-rounded m-r-20">Link me</button>
<!-- Rounded tag with a dark background -->
<button class="btn btn-tag   btn-tag-dark btn-tag-rounded">Link me</button>
```

## **Rounded buttons**

Any button can be made to have rounded corners by adding `.btn-rounded`

![](/files/-M2K0Z4H8g0J34UugbQM)

```markup
<!-- Large rounded button -->
<button class="btn btn-lg btn-rounded">Large rounded</button>

<!-- Regular rounded button -->
<button class="btn btn-rounded">Regular</button>

<!-- Small rounded button -->
<button class="btn btn-sm btn-rounded">Small</button>
```


# Notifications

Use Pages Notification plugin that has been custom-made to suit overall theme, to add unique notifications of various styles

Show a sliding bar from top or bottom that fits the screen width

```markup
<script>
$(document).ready(function() {
    // Apply the plugin to the body 
   $('body').pgNotification(options).show();
});
</script>
```

## **Options**

| `NAME`    | `TYPE`   | `DEFAULT`   | `DESCRIPTION`                                                                                                                                                                                                                                                                                                                                               |
| --------- | -------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| style     | string   | 'simple'    | Sets the style of the notification. Styles available are 'bar', 'flip', 'circle', 'simple'                                                                                                                                                                                                                                                                  |
| message   | string   | null        | Message to be displayed inside the notification.                                                                                                                                                                                                                                                                                                            |
| position  | string   | 'top-right' | Where to place the notification. Positions available are:topbottomtop-righttop-leftbottom-rightbottom-leftNote: Use 'top' and 'bottom' only for positioning 'bar' notification                                                                                                                                                                              |
| type      | string   | 'info'      | Sets the type of the notification - 'info', 'warning', 'success', 'danger'.Changing the type will change the background color and font color of the notification                                                                                                                                                                                            |
| showClose | boolean  | true        | Show/Hide the close button                                                                                                                                                                                                                                                                                                                                  |
| timeout   | number   | 4000        | Decides for how long the notification should be visible on the screen in miliseconds. Setting timeout `0` will keep notification forever.                                                                                                                                                                                                                   |
| onShown   | function | null        | Callback function fired after the notification is shown                                                                                                                                                                                                                                                                                                     |
| onClose   | function | null        | Callback function fired after the notification is closed                                                                                                                                                                                                                                                                                                    |
| title     | string   | null        | Only available for style 'circle'. Sets the title of the notification                                                                                                                                                                                                                                                                                       |
| thumbnail | string   | null        | Only available for style 'circle'. Shows a thumbnail image together with the messageAny `img` can be passed. The following structure is recommended`<img width="40" height="40" style="display: inline-block;" src="assets/img/profiles/avatar2x.jpg" data-src="assets/img/profiles/avatar.jpg" data-src-retina="assets/img/profiles/avatar2x.jpg" alt="">` |


# Modals

Modals are created using Bootstrap Native Modals, they will work as the same way how it works in bootstrap, but it is styled to pages color scheme. To add a modal to pages please refer following guidelines

{% embed url="<https://getbootstrap.com/docs/4.1/components/modal/>" %}
Bootstrap Documentation
{% endembed %}

## **Modal Types**

We have added new options to bootstrap modals and made even awesome, by simply changing a class name you can get the following. There 3 different modals to choose from with 3 different size options for each, varying upt 9 modals<br>

### **Slide Up**

Simply add the class `slide-up` to main `modal` DIV & wrap `modal-content` with `modal-content-wrapper`, Your HTML tag structure should look like this. You can change the `id` attribute of the modal to anything you want.

```markup
<!-- Modal -->
<div class="modal fade slide-up disable-scroll" id="modalSlideUp" tabindex="-1" role="dialog" aria-labelledby="modalSlideUpLabel" aria-hidden="false">
    <div class="modal-dialog ">
        <div class="modal-content-wrapper">
        <div class="modal-content">
            <div class="modal-header clearfix text-left">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                  <i class="pg-close fs-14"></i>
                </button>
                <h5>Heading <span class="semi-bold">here</span></h5>
            </div>
            <div class="modal-body">
                Add Your Content here
            </div>
        </div>
        </div>
        <!-- /.modal-content -->
    </div>
</div>
<!-- /.modal-dialog -->
```

### **Stick Up**

Simply add the class `stick-up` to main `modal` DIV. You can change the `id` attribute of the modal to anything you want.

```markup
<!-- MODAL STICK UP  -->
<div class="modal fade stick-up" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header clearfix text-left">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                <i class="pg-close fs-14"></i>
                </button>
                <h5>Payment <span class="semi-bold">Information</span></h5>
                <p>We need payment information inorder to process your order</p>
            </div>
            <div class="modal-body">
                <form class="form-default" role="form">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label>Company Name</label>
                                <input type="email" class="form-control" >
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-8">
                            <div class="form-group">
                                <label>Card Number</label>
                                <input type="text" class="form-control" >
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label>Card Holder</label>
                                <input type="text" class="form-control" >
                            </div>
                        </div>
                    </div>
                </form>
                <div class="row">
                    <div class="col-sm-9">
                        <div class="b-a b-grey b-rad-sm clearfix p-l-10 p-r-10">
                            <div class="pull-left">
                                <h5 class="semi-bold">TOTAL</h5>
                            </div>
                            <div class="pull-right">
                                <h5 class="light">$20.00</h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <button type="button" class="btn btn-primary btn-lg btn-large btn-block" data-dismiss="modal">
                        PAY
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- END MODAL STICK UP  -->
```

### **Slide Right**

Simply add the class `slide-right` to main `modal` DIV & wrap `modal-content` with `modal-content-wrapper`, Your HTML tag structure should look like this. You can change the `id` attribute of the modal to anything you want.

```markup
<div class="modal fade slide-right" id="modalSlideLeft" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
    <div class="modal-content-wrapper">
        <div class="modal-content table-block">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="pg-close fs-14"></i></button>
            <div class="modal-body v-align-middle text-center   ">
                <h5 class="text-primary ">Before you <span class="semi-bold">proceed</span>, you have to login to make the necessary changes</h5>
                <br>
                <button type="button" class="btn btn-primary btn-block" data-dismiss="modal">Continue</button>
                <button type="button" class="btn btn-default btn-block" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
    <!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
```

### **Fill In**

Simply add the class `fill-in` to main `modal` DIV. You can change the `id` attribute of the modal to anything you want.

```markup
<div class="modal fade fill-in" id="modalFillIn" tabindex="-1" role="dialog" aria-labelledby="modalFillInLabel" aria-hidden="true">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
    <i class="pg-close"></i>
</button>
<div class="modal-dialog ">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="text-left p-b-5"><span class="semi-bold">News letter</span> signup</h5>
        </div>
        <div class="modal-body">
            <div class="row">
                <div class="col-md-9">
                    <input type="text" placeholder="Your email address here" class="form-control input-lg" id="icon-filter" name="icon-filter">
                </div>
                <div class="col-md-3 text-center">
                    <button type="button" class="btn btn-primary btn-lg btn-large fs-15">Sign up</button>
                </div>
            </div>
            <p class="text-right hinted-text p-t-10 p-r-10">What is it ? Terms and conditions</p>
        </div>
        <div class="modal-footer">

        </div>
    </div>
    <!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
```

## **How to Open Bootstrap Modal**

One method is to create a Link or Button with the following attributes `data-toggle="modal" data-target="#myModal"` \*Make sure the data-target value to be the ID of your Modal

eg :

```markup
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>
```


# Progressbar

## **Linear Progress**

### **Indeterminate progress**

Indicates a running process where the progress is unknown using an animated svg. ex: AJAX form submission. Simply wrap `.progress-bar-indeterminate` with Bootstrap's `.progress`. The progress bar will automatically expand to get the width of its parent `<div>`

![Animation in progress](/files/-LE9sLEuGgjuN8f0ac1x)

```markup
<div style="width:50%">
    <div class="progress">
        <div class="progress-bar-indeterminate"></div>
    </div>
    </div>
</div>
```

#### **Color options**

In addition to Bootstrap's contextual progress bar classes, Pages has introduced two new classes, `.progress-bar-success`and `.progress-bar-complete` if you want to add more color to your project

![](/files/-LE9sS1r4Y_dLIJksVf3)

```markup
<div style="width:50%">
    <div class="progress">
        <div class="progress-bar progress-bar-primary" style="width: 35%;"></div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-complete" style="width: 45%;"></div>
    </div>
</div>
```

**Size options**

Append `.progress-small` to `.progress` to make the progress bars thinner than the usual height

![](/files/-LE9sixoXPCE5vsNoT0T)

```markup
<div style="width:50%">
    <!-- Thinner progress bar -->
    <div class="progress progress-small">
        <div style="width: 45%;" class="progress-bar progress-bar-success"></div>
    </div>
    <!-- Default height -->
    <div class="progress">
        <div style="width: 45%;" class="progress-bar progress-bar-success"></div>
    </div>
</div>
```

## **Circular Progress**

Don't like the linear style? Try circular progress indicators instead. These also come with determinate and inderminate options

### **Indeterminate progress**

![Animation in progress](/files/-LE9smaJyepFirbNnXlE)

```markup
<div class="progress-circle-indeterminate"></div>
```

### **Determinate progress**

A determinate circular progress indicator can be initialized without writing a single line of Javascript code by simply including markup below. Pass any percentage value (0-100) into the `value` field to set the progress

![](/files/-LE9ssa1tJmvlhKU2phc)

```markup
<!-- Show 75% of progress -->
<input class="progress-circle" data-pages-progress="circle" value="75" type="hidden" data-color="complete">
```

**Color options**

Color options can be set using the `data-color` attribute. Any contextual color can be included.<br>

![](/files/-LE9szZWEiPauzxbzGMe)

```markup
<input class="progress-circle" data-pages-progress="circle" value="45" type="hidden" data-color="complete">
<input class="progress-circle" data-pages-progress="circle" value="65" type="hidden" data-color="primary">
<input class="progress-circle" data-pages-progress="circle" value="75" type="hidden" data-color="success">
```

**Size options**

Stroke of the circle can be made thicker by setting `data-thick="true"`

![](/files/-LE9t0JoLivEQx5NBqJv)

```markup
<input class="progress-circle" data-pages-progress="circle" value="75" type="hidden" data-thick="true">
```


# Collapse

Collapse are created using [Bootstrap Native ](https://getbootstrap.com/docs/4.1/components/collapse/)Collapse, they will work as the same way how it works in bootstrap, but it is styled to pages color scheme.To add a modal to pages please refer following guidelines

[Bootstrap Collapse Guideline ](https://getbootstrap.com/docs/4.1/components/collapse/)

Place this HTML code in any Pages html file

```markup
<div class="panel panel-group panel-transparent" data-toggle="collapse" id=
"accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="collapsed" data-parent="#accordion" data-toggle=
        "collapse" href="#collapseOne">Collapsible Group Item</a>
      </h4>
    </div>
    <div class="panel-collapse collapse" id="collapseOne">
      <div class="panel-body">
        Content Goes here
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="" data-parent="#accordion" data-toggle="collapse" href=
        "#collapseTwo">Typography Variables</a>
      </h4>
    </div>
    <div class="panel-collapse collapse in" id="collapseTwo">
      <div class="panel-body">
        <h4>Try Something neat</h4>
        Content Goes here
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="collapsed" data-parent="#accordion" data-toggle=
        "collapse" href="#collapseThree">Easy Edit</a>
      </h4>
    </div>
    <div class="panel-collapse collapse" id="collapseThree">
      <div class="panel-body">
        Content Goes here
      </div>
    </div>
  </div>
</div>
```


# Tabs

Tabs are created using Bootstrap Native Tabs, they will work as the same way how it works in bootstrap, but it is styled to pages color scheme.To add a Tabs to pages please refer following guidelines

{% embed url="<https://getbootstrap.com/docs/4.1/components/navs/#tabs>" %}
Bootstrap Documentation
{% endembed %}

## **Creating a Tab**

Place this HTML code in any "Pages" html file&#x20;

{% hint style="info" %}
**Tip : Tabs** \
Make sure you keep the tab pane ID's unique
{% endhint %}

```markup
<div class="panel">
  <ul class="nav nav-tabs nav-tabs-simple">
    <li class="active">
      <a data-toggle="tab" href="#tab2hellowWorld">Hello World</a>
    </li>
    <li>
      <a data-toggle="tab" href="#tab2FollowUs">Hello Two</a>
    </li>
    <li>
      <a data-toggle="tab" href="#tab2Inspire">Hello Three</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab2hellowWorld">
      <div class="row column-seperation">
        <div class="col-md-6">
          <h3>
            <span class="semi-bold">Sometimes</span> Small things in life means
            the most
          </h3>
        </div>
        <div class="col-md-6">
          <h3 class="semi-bold">
            great tabs
          </h3>
          <p>
            Native boostrap tabs customized to Pages look and feel, simply
            changing class name you can change color as well as its animations
          </p>
        </div>
      </div>
    </div>
    <div class="tab-pane" id="tab2FollowUs">
      <div class="row">
        <div class="col-md-12">
          <h3>
            “ Nothing is <span class="semi-bold">impossible</span>, the word
            itself says 'I'm <span class="semi-bold">possible</span>'! ”
          </h3>
          <p>
            A style represents visual customizations on top of a layout. By
            editing a style, you can use Squarespace's visual interface to
            customize your...
          </p><br>
          <p class="pull-right">
            <button class="btn btn-white btn-cons" type="button">White</button>
            <button class="btn btn-success btn-cons" type=
            "button">Success</button>
          </p>
        </div>
      </div>
    </div>
    <div class="tab-pane" id="tab2Inspire">
      <div class="row">
        <div class="col-md-12">
          <h3>
            Follow us &amp; get updated!
          </h3>
          <p>
            Instantly connect to what's most important to you. Follow your
            friends, experts, favorite celebrities, and breaking news.
          </p><br>
        </div>
      </div>
    </div>
  </div>
</div>
```

## **Tab Orientation**

To change tab orientation, create a tab like before using the above code, add the class `nav-tabs-left` or `nav-tabs-left`to `nav nav-tabs` UL element

```markup
<!-- LEFT ORIENTATION -->
<div class="panel">
  <ul class="nav nav-tabs nav-tabs-left nav-tabs-simple">
  ....
  </ul>
  <div class="tab-content">
  ....
  </div>
</div>

<!-- RIGHT ORIENTATION -->
<div class="panel">
  <ul class="nav nav-tabs nav-tabs-right nav-tabs-simple">
  ....
  </ul>
  <div class="tab-content">
  ....
  </div>
</div>
```

## **Tab Styles**

To change tab styles, create a tab like before using the first code in **Create Tab section**, add the class `nav-tabs-linetriangle` or `nav-tabs-fillup` to `nav nav-tabs` UL element&#x20;

{% hint style="info" %}
**Tip : Tabs**\
You can try different orientation with tab styles
{% endhint %}

```markup
<!-- LINE TRIANGLE -->
<div class="panel">
  <ul class="nav nav-tabs nav-tabs-linetriangle nav-tabs-simple">
  ....
  </ul>
  <div class="tab-content">
  ....
  </div>
</div>

<!-- FILL UP ANIMATION -->
<div class="panel">
  <ul class="nav nav-tabs nav-tabs-fillup nav-tabs-simple">
  ....
  </ul>
  <div class="tab-content">
  ....
  </div>
</div>
```

## **Sliding Tabs**

Append `slide-left` or `slide-right` to `tab-pane` to reveal tab content with a sliding effect

```markup
<!-- Nav tabs -->
<ul class="nav nav-tabs">
    <li class="active">
        <a data-toggle="tab" href="#slide1">
            <span>Home</span>
        </a>
    </li>
    <li>
        <a data-toggle="tab" href="#slide2">
            <span>Profile</span>
        </a>
    </li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
    <div class="tab-pane slide-left active" id="slide1">
        ...
    </div>
    <div class="tab-pane slide-right" id="slide2">
        ...
    </div>
</div>
```

## **Responsive Tabs**

Responsive tabs are not built on to bootstrap by default, We have integrated 3 options to choose from


# Sliders

Sliders in Pages are powered by [noUiSlider](http://refreshless.com/nouislider/) and [Ion.RangeSlider](http://ionden.com/a/plugins/ion.rangeSlider/en.html), which are lightweight jQuery Range Slider plugins that come with tons of options and support for multiple devices.

## **noUiSlider**

Follow these steps to include noUiSlider in your page

**Step one**

Include stylesheet `jquery.nouislider.css` inside the `<head>`

```markup
<link media="screen" type="text/css" rel="stylesheet" href="assets/plugins/jquery-nouislider/jquery.nouislider.css">
```

**Step two**

Include the relevant javascript files inside the `<body>` before core template script inclusions

```markup
<script type="text/javascript" src="assets/plugins/jquery-nouislider/jquery.nouislider.min.js">
<script type="text/javascript" src="assets/plugins/jquery-nouislider/jquery.liblink.js">
```

**Step three**

Apply the plugin to your desired element

![](/files/-LE9tX7ZslVb5y5mScDz)

```markup
<!-- Element to be used with the plugin -->
<div id="noUiSlider" class="bg-master"></div>

<script>
$(document).ready(function() {
    // Apply the plugin to the element
    $("#noUiSlider").noUiSlider({
        start: 40,
        connect: "lower",
        range: {
            'min': 0,
            'max': 100
        }
    });
});
</script>
```

### **Color options**

Slider color can be changed by appending the pre-defined classes. Please refer to [Color guide](http://pages.revox.io/dashboard/3.0.0/docs/partials/sliders.html#) for all the color options

![](/files/-LE9uDnoZbjbBZBA0cJc)

```markup
<div id="noUiSliderOne" class="bg-danger"></div>
<div id="noUiSliderTwo" class="bg-warning"></div>
<div id="noUiSliderThree" class="bg-success"></div>
```

## **Ion.RangeSlider**

Follow these steps to include Ion.RangeSlider in your page

**Step one**

Include the necessary stylesheet files inside the `<head>`

```markup
<link media="screen" type="text/css" rel="stylesheet" href="assets/plugins/ion-slider/css/ion.rangeSlider.css">
<link media="screen" type="text/css" rel="stylesheet" href="assets/plugins/ion-slider/css/ion.rangeSlider.skinFlat.css">
```

**Step two**

Include the relevant javascript files inside the `<body>` before core template script inclusions

```markup
<script type="text/javascript" src="assets/plugins/ion-slider/js/ion.rangeSlider.min.js"></script>
```

**Step three**

Apply the plugin to your desired element

![](/files/-LE9uGRq7ADNJ9CpZgvV)

```markup
<!-- Element to be used with the plugin -->
<div class="irs-wrapper">
    <input type="text" id="ionSlider" name="ionSlider" value="0;2057" />
</div>

<script>
$(document).ready(function() {
    // Apply the plugin to the element
    $("#ionSlider").ionRangeSlider({
        min: 0,
        max: 5000,
        type: 'double',
        prefix: "$",
        maxPostfix: "+",
        prettify: false,
        hasGrid: true
    });
});
</script>
```

### **Color options**

Slider color can be changed by appending the pre-defined classes.

![](/files/-LE9uJ1hg8Mkn2xHhALt)

```markup
<div class="irs-wrapper warning">
    <input type="text" id="ionSliderOne" name="ionSlider" value="0;2057" />
</div>

<div class="irs-wrapper danger">
    <input type="text" id="ionSliderTwo" name="ionSlider" value="0;2057" />
</div>

<div class="irs-wrapper complete">
    <input type="text" id="ionSliderFour" name="ionSlider" value="0;2057" />
</div>

<div class="irs-wrapper success">
    <input type="text" id="ionSliderThree" name="ionSlider" value="0;2057" />
</div>

<div class="irs-wrapper primary">
    <input type="text" id="ionSliderFour" name="ionSlider" value="0;2057" />
</div>
```


# Treeview

Tree view in Pages are powered by [jQuery Dynatree ](https://github.com/mar10/dynatree), which is a Drag & drop hierarchical list with mouse and touch compatibility Follow these steps to initialize nest-tables in your page

**Step one**

Include the following stylesheet inside the `<head>`

```markup
<link href="assets/plugins/jquery-dynatree/skin/ui.dynatree.css" rel="stylesheet" type="text/css" media="screen"/>
```

**Step two**

Include the relevant javascript files inside the `<body>` before core template script inclusions

```markup
<script src="assets/plugins/jquery-dynatree/jquery.dynatree.min.js" type="text/javascript">
```

**Step three**

1. Create a DIV and give it a unique ID, we are going to use this to initialize the plugin
2. Inside this DIV, create a list of unordered items using UL LI
3. Make sure you have unique ID for each of UL and LI tags

```markup
<div class="m-b-20" id="default-tree">
  <ul id="treeData" style="display: none;">
    <li id="id1" title="Look, a tool tip!">item1 with key and tooltip
    </li>
    <li id="id2">item2
    </li>
    <li class="folder" id="id3">Folder with some children
      <ul>
        <li id="id3.1">Sub-item 3.1
          <ul>
            <li id="id3.1.1">Sub-item 3.1.1
            </li>
            <li id="id3.1.2">Sub-item 3.1.2
            </li>
          </ul>
        </li>
        <li id="id3.2">Sub-item 3.2
          <ul>
            <li id="id3.2.1">Sub-item 3.2.1
            </li>
            <li id="id3.2.2">Sub-item 3.2.2
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="expanded" id="id4">Document with some children (expanded on
    init)
      <ul>
        <li class="active focused" id="id4.1">Sub-item 4.1 (active and focus on
        init)
          <ul>
            <li id="id4.1.1">Sub-item 4.1.1
            </li>
            <li id="id4.1.2">Sub-item 4.1.2
            </li>
          </ul>
        </li>
        <li id="id4.2">Sub-item 4.2
          <ul>
            <li id="id4.2.1">Sub-item 4.2.1
            </li>
            <li id="id4.2.2">Sub-item 4.2.2
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>
```

**Step Four**

Initialize the plugin

```markup
<script>
$(document).ready(function() {
      $("#default-tree").dynatree({
       fx: { height: "toggle", duration: 200 }//Slide down animation
    });
});
</script>
```


# Nestable

Nestables in Pages are powered by [jQuery Nestables](https://github.com/dbushell/Nestable) which is a Drag & drop hierarchical list with mouse and touch compatibility Follow these steps to initialize nestables in your page

**Step one**

Include the stylesheet `jquery.nestable.css` inside the `<head>`

```markup
<link media="screen" type="text/css" rel="stylesheet" href="assets/plugins/jquery-nestable/jquery.nestable.css">
```

**Step two**

Include the relevant javascript files inside the `<body>` before core template script inclusions

```markup
<script type="text/javascript" src="assets/plugins/jquery-nestable/jquery.nestable.js"></script>
```

**Step three**

Apply the plugin to your desired element

```markup
<!-- Element to be used with the plugin -->
<div class="dd" id="basic_example">
    <ol class="dd-list">
        <li class="dd-item" data-id="1">
            <div class="dd-handle">
                Item 1
            </div>
        </li>
        <li class="dd-item" data-id="2">
            <div class="dd-handle">
                Item 2
            </div>
            <ol class="dd-list">
                <li class="dd-item" data-id="3">
                    <div class="dd-handle">
                        Item 3
                    </div>
                </li>
                <li class="dd-item" data-id="4">
                    <div class="dd-handle">
                        Item 4
                    </div>
                </li>
                <li class="dd-item" data-id="5">
                    <div class="dd-handle">
                        Item 5
                    </div>
                </li>
            </ol>
        </li>
    </ol>
</div>

<script>
$(document).ready(function() {
    // Apply the plugin to the element
     $('#basic_example').nestable();
});
</script>
```


# Checkboxes and Radio

Get rid of native look n' feel with our very own custom checkboxes written purely in CSS. These are retina compatible and available in all Bootstrap's contextual classes (ex: `.primary`)

## Checkbox

![](/files/-M2JVzXewaBmLr7vqhCb)

```markup
<div class="form-check">
	<input type="checkbox" id="defaultCheck" checked>
	<label for="defaultCheck">
		Default checkbox
	</label>
</div>
<div class="form-check complete">
	<input type="checkbox" id="checkColorOpt1">
	<label for="checkColorOpt1">
		I agree to the terms and conditions
	</label>
</div>
<div class="form-check primary">
	<input type="checkbox" id="checkColorOpt2" checked>
	<label for="checkColorOpt2">
		Mark as read
	</label>
</div>
```

### **Shape options**

Bored with traditional boxed shape check boxes? Here is a circle one simply add the class `.checkbox-circle` to change it

![](/files/-M2Jj7XkFwl41noX9zo1)

```markup
<div class="form-check checkbox-circle danger">
	<input type="checkbox" id="checkcircleColorOpt1">
	<label for="checkcircleColorOpt1">
		Delete all personal settings
	</label>
</div>
<div class="form-check checkbox-circle complete">
	<input type="checkbox" id="checkcircleColorOpt2" checked>
	<label for="checkcircleColorOpt2">
		Keep me signed in
	</label>
</div>
```

### **State options**

These act the same way as normal HTML check boxes. Here are some states that

![](/files/-M2JjQhIOSNOitvU8aJ6)

```markup
<div class="form-check form-check-inline complete">
	<input type="checkbox" id="checkboxIndeterminate">
	<label for="checkboxIndeterminate">
		Indeterminate
	</label>
</div>
<div class="form-check form-check-inline">
	<input type="checkbox" id="disableCheck" checked disabled>
	<label for="disableCheck">
		Disabled checkbox
	</label>
</div>
```

## **Toggle controls**

Do not delete the `label` element which is placed next to each `radio`. Leave it blank if you don't want it to hold any text

![](/files/-M2JjhfHYjODyx_G20uR)

```markup
<div class="form-check">
	<input type="radio" name="texture" id="defaultradio" value="Default" checked>
	<label for="defaultradio">
		Default
	</label>
</div>
<div class="form-check complete">
	<input type="radio" name="texture" id="radio1" value="Medium">
	<label for="radio1">
		Medium textures
	</label>
</div>
<div class="form-check primary">
	<input type="radio" name="texture" id="radio2" value="Verbose">
	<label for="radio2">
		Verbose channel
	</label>
</div>
```

### **State options**

Use of different color opacity helps to distinguish between different states such as disable

![](/files/-M2JjzhQvK8URr8Kq4Rd)

```markup
<div class="form-check form-check-inline complete">
	<input type="radio" name="state" id="radioInline" value="Default" checked>
	<label for="radioInline">
		Default
	</label>
</div>
<div class="form-check form-check-inline">
	<input type="radio" name="state" id="radioDisabled" value="disabled" disabled>
	<label for="radioDisabled">
		Disabled
	</label>
</div>
```


# Toggle

Pages comes with native CSS toggle, no third party bulky JS includes just simple HTML checkboxes

![](/files/-M2JkVe-Q5xwFjOQj0zd)

```markup
<div>
	<div class="form-check form-check-inline switch">
		<input type="checkbox" id="pagesSwitch" checked>
		<label for="pagesSwitch">Default switch</label>
	</div>
	<div class="form-check form-check-inline switch">
		<input type="checkbox" id="switchDisabled" disabled>
		<label for="switchDisabled"> disabled </label>
	</div>
</div>
<div>
	<div class="form-check form-check-inline switch switch-lg complete">
		<input type="checkbox" id="switch-lg">
		<label for="switch-lg">Auto-brightness</label>
	</div>
	<div class="form-check form-check-inline switch switch-lg success">
		<input type="checkbox" id="switchColorOpt">
		<label for="switchColorOpt">wifi </label>
	</div>
</div>
```


# Typehead

These are also know as auto-fill input boxes that fills up while you type. This is powered by Bootstrap type-head.

{% hint style="info" %}
You can view there official documentation [here](https://twitter.github.io/typeahead.js/examples/)
{% endhint %}

**Step One**

Include the required javascript files inside the `<body>` before core template script inclusions, if they are not there already.

```markup
<script src="assets/plugins/bootstrap-typehead/typeahead.bundle.min.js"></script>
<script src="assets/plugins/bootstrap-typehead/typeahead.jquery.min.js"></script>
```

**Step Two**

Create a simple text box field and give it an ID so you can initialize in your JS file

```markup
<div class="form-group">
<input class="typeahead form-control" id="mytyphead" type="text" placeholder="States of USA">
</div>

<form class="" role="form">
<div class="form-group form-group-default required typehead" id="sample-three">
<label>Countries</label>
<input class="typeahead form-control" id="mytyphead" type="text" placeholder="States of USA">
</div>
</form>
```

**Step Three**

Initialize your typehead with the ID you use

```javascript
        var countries = new Bloodhound({
          datumTokenizer: Bloodhound.tokenizers.whitespace,
          queryTokenizer: Bloodhound.tokenizers.whitespace,
          prefetch: 'http://pages.revox.io/json/countries-list.json'
        });

        // passing in `null` for the `options` arguments will result in the default
        // options being used
        $('#mytyphead').typeahead(null, {
          name: 'countries',
          source: countries
        });
```


# Selectbox

## **Default select**

Default select depends on [classie.js](https://github.com/desandro/classie). Make sure it's included inside the `<body>` before core template script inclusions.

```markup
<script src="assets/plugins/classie/classie.js" type="text/javascript"></script>
```

Add `.cs-select` and `.cs-skin-slide` to any `<select>` control to add a cool animation effect

![](/files/-LE9yQgcT7LTBPq4TYVz)

```markup
<select class="cs-select cs-skin-slide" data-init-plugin="cs-select">
    <option value="Web-safe">Web-safe</option>
    <option value="Helvetica">Helvetica</option>
    <option value="SegeoUI">SegeoUI</option>
</select>
```

## **Advance Select**

Pages uses [Select2](https://select2.org/) jQuery plugin for advance selects with search facility. Follow these steps to initialize the plugin

**Step one**

Include the stylesheet `select2.css` inside the `<head>` if it's not there already.&#x20;

```markup
<link media="screen" type="text/css" rel="stylesheet" href="assets/plugins/bootstrap-select2/select2.css">
```

**Step two**

Include the required javascript files inside the `<body>` before core template script inclusions, if they are not there already.

```markup
<script src="assets/plugins/bootstrap-select2/select2.min.js" type="text/javascript"></script>
```

**Step three**

Append data attribute `data-init-plugin="select2"` to initialize any `<select>` automatically with basic options. Avoid auto-initializing when you want to have advance options

```markup
<form role="form">
    <div class="form-group">
        <!-- Using data-init-plugin='select2' automatically initializes a basic Select2 -->
        <select class="full-width" data-init-plugin="select2">
            <optgroup label="Alaskan/Hawaiian Time Zone">
                <option value="AK">Alaska</option>
                <option value="HI">Hawaii</option>
            </optgroup>
            <optgroup label="Pacific Time Zone">
                <option value="CA">California</option>
                <option value="NV">Nevada</option>
                <option value="OR">Oregon</option>
                <option value="WA">Washington</option>
            </optgroup>
        </select>
    </div>

    <div class="form-group">
        <!-- Element intended to use with advance options -->
        <input type="hidden" id="mySelect2" class="full-width">
    </div>
</form>
```

**Step four**

Apply the plugin to your desired element

{% hint style="info" %}
Make sure you place the following script **below** all the pre-requisites mentioned in the Step two above.
{% endhint %}

![](/files/-LE9z9xk9hjkJQM4yXSO)

```markup
<script>
$(document).ready(function() {
    // Avoid applying plugin to <select> with data-init-plugin="select2"

    // Only apply on elements that don't have data-init-plugin="select2" 
    $("#mySelect2").select2({
        placeholder: "Select a type",
        data: [{
            id: 0,
            text: 'enhancement'
        }, {
            id: 1,
            text: 'bug'
        }, {
            id: 2,
            text: 'duplicate'
        }]
    });
});
</script>
```

{% hint style="warning" %}
jQuery validation and select2 is not directly compatible. Use the following code to fix it
{% endhint %}

```javascript
$("#SELECTBOX_ID").change(function(){ 
    $(this).trigger("blur"); 
});
```


# Datepicker

Datepicker controls in Pages are powered by [Bootstrap Datepicker](https://github.com/eternicode/bootstrap-datepicker) plugin.

{% hint style="info" %}
Please refer to [Bootstrap Datepicker Documentation](https://bootstrap-datepicker.readthedocs.io/en/stable/) to learn about plugin options
{% endhint %}

**Step one**

Include the stylesheet `datepicker3.css` inside the `<head>` if it's not there already.

```markup
<link media="screen" type="text/css" rel="stylesheet" href="assets/plugins/bootstrap-datepicker/css/datepicker3.css">
```

**Step two**

Include the relevant javascript files inside the `<body>` before core template script inclusions, if it's not there already.

```markup
<script type="text/javascript" src="assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js">
```

**Step three**

Add the markup

```markup
<div id="myDatepicker" class="input-group date">
    <input type="text" class="form-control">
    <span class="input-group-addon"><i class="fa fa-calendar"></i>
    </span>
</div>
```

**Step four**

Apply the plugin.

{% hint style="warning" %}
Make sure you place the following script **below** all the pre-requisites mentioned in the Step two above.
{% endhint %}

![](/files/-LE9zZqf54gOPIxN07cS)

```markup
<script>
$(document).ready(function() {
    $('#myDatepicker').datepicker();
});
</script>
```


# Masked Input

Allows the user to enter fixed width input while conforming to a character format. Powered by [jQuery Masked Input](https://github.com/digitalBush/jquery.maskedinput) plugin.

{% hint style="info" %}
Please refer to [jQuery Masked Input Documentation](https://github.com/digitalBush/jquery.maskedinput) to learn about plugin options
{% endhint %}

**Step one**&#x20;

Include the javascript file inside the `<body>`before core template script inclusions, if it's not there already.

```markup
<script src="assets/plugins/jquery-inputmask/jquery.inputmask.min.js" type="text/javascript">
```

**Step two**

Add the markup.

```markup
<input type="text" id="phone" class="form-control">
```

**Step three**

Apply the plugin.

{% hint style="warning" %}
Make sure you place the following script **below** all the pre-requisites mentioned in the Step two above.
{% endhint %}

![](/files/-LE9zqeQnZF8CgQSXz-z)

```markup
<script>
$(document).ready(function() {
    $("#phone").mask("(999) 999-9999");
});
</script>
```


# Autonumeric

[autoNumeric](http://www.decorplanit.com/plugin/) is a jQuery plugin that automatically formats currency and numbers as you type on form inputs.

{% hint style="info" %}
Please refer to [jQuery autoNumeric Documentation](http://www.decorplanit.com/plugin/) to learn about plugin options
{% endhint %}

**Step one**

Include the javascript file inside the `<body>`before core template script inclusions, if it's not there already.

```markup
<script src="assets/plugins/jquery-autonumeric/autoNumeric.js" type="text/javascript">
```

**Step two**

Add the markup.

```markup
<input type="text" data-a-dec="." data-a-sep="," class="autonumeric form-control">
```

**Step three**

Apply the plugin.

{% hint style="warning" %}
Make sure you place the following script **below** all the pre-requisites mentioned in the Step two above.
{% endhint %}

![](/files/-LEA-0-B0C2SttUA6MjT)

```markup
<script>
$(document).ready(function() {
    $('.autonumeric').autoNumeric('init');
});
</script>
```


# Quill Editor

{% hint style="info" %}
Please refer to [Quill Documentation](https://quilljs.com/docs/quickstart/) to learn about plugin options
{% endhint %}

**Step one**

Include the stylesheet quill.snow\.css inside the `<head>`

```markup
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
```

**Step two**

Include the javascript file inside the `<body>`before core template script inclusions.

```markup
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
```

**Step three**

Add the markup.

```markup
<div id="editor">
  <p>Hello World!</p>
  <p>Some initial <strong>bold</strong> text</p>
  <p><br></p>
</div>
```

**Step four**

Apply the plugin.

{% hint style="warning" %}
Make sure you place the following script **below** all the pre-requisites mentioned in the Step two above.
{% endhint %}

![](/files/-M4P52pR5hLwJty1SjNU)

```markup
<script>
  var quill = new Quill('#editor', {
    theme: 'snow'
  });
</script>
```


# Tags Input

[jQuery tags input](https://github.com/timschlechter/bootstrap-tagsinput) plugin is based on Twitter Bootstrap.

{% hint style="info" %}
Please refer to [jQuery tags input Documentation](https://github.com/timschlechter/bootstrap-tagsinput) to learn about plugin options
{% endhint %}

**Step one**

Include the stylesheet `bootstrap-tagsinput.css` inside the `<head>` if it's not there already.&#x20;

```markup
<link type="text/css" rel="stylesheet" href="assets/plugins/bootstrap-tag/bootstrap-tagsinput.css">
```

**Step two**

Include the javascript file inside the `<body>`before core template script inclusions, if it's not there already.

```markup
<script src="assets/plugins/bootstrap-tag/bootstrap-tagsinput.min.js" type="text/javascript"></script>
```

**Step two**

Add the markup.

```markup
<input id="#tagsinput" type="text" value="Amsterdam,Washington" data-role="tagsinput" />
```

**Step three**

Apply the plugin.

{% hint style="warning" %}
Make sure you place the following script **below** all the pre-requisites mentioned in the Step two above.
{% endhint %}

![](/files/-LEA0Kx2eFSiRZ8PeIHC)

```markup
<script>
$(document).ready(function() {
    $('#tagsinput').tagsinput({
        typeahead: {
            source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo']
        }
    });
});
</script>
```


# File Upload

[DropzoneJS](http://www.dropzonejs.com/) is an open source library that provides drag'n'drop file uploads with image previews.

{% hint style="info" %}
Please refer to [DropzoneJS Documentation](http://www.dropzonejs.com/) to learn about plugin options
{% endhint %}

**Step one**

Include the stylesheet `dropzone.css` inside the `<head>` if it's not there already.

```markup
<link type="text/css" rel="stylesheet" href="assets/plugins/dropzone/css/dropzone.css">
```

**Step two**

Include the javascript file inside the `<body>`before core template script inclusions, if it's not there already.

```markup
<script src="assets/plugins/dropzone/dropzone.min.js" type="text/javascript"></script>
```

**Step three**

Add `.dropzone` to initialize dropzone plugin with default options.

![](/files/-LEA0XYfG3NRTmGrYI2W)

```markup
<form action="/file-upload" class="dropzone">
    <div class="fallback">
        <input name="file" type="file" multiple />
    </div>
</form>
```


# Form Layouts

This section of the documentation will guide you how to apply different form styles for your need, There 3 different new styles that you can use, Please follow the steps in achieving this. There is no need of external JS or CSS libraries.

## Creating a Standard Bootstrap Form

To create a native bootstrap form, the following tags are a must, It is the standard procedure in Bootstrap

![](/files/-LEA13TYi7_UQxPVVAnJ)

1. You should have a form tag
2. A label for your input is conditional
3. Both label and input should be wrapped in `form-group`

```markup
<form role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
```

{% hint style="info" %}
For more detailed documentation of Bootstrap forms [ Bootstrap Form Guideline](https://getbootstrap.com/docs/4.4/components/forms/)
{% endhint %}

## Pages Default Form Layout

To create a pages default form layout, append the class `form-group-default` to `form-group`.&#x20;

![](/files/-LEA0w8d6c1m1bqf52dM)

```markup
<form role="form">
    
    <div class="form-group form-group-default ">
        <label>Project</label>
        <input type="email" class="form-control" required>
    </div>

    <div class="row">
        <div class="col-sm-6">
            <div class="form-group form-group-default">
                <label>First name</label>
                <input type="text" class="form-control" required>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group form-group-default">
                <label>Last name</label>
                <input type="text" class="form-control">
            </div>
        </div>
    </div>

    <div class="form-group form-group-default">
        <label>Password</label>
        <input type="password" class="form-control" required>
    </div>

    <div class="form-group form-group-default">
        <label>Placeholder</label>
        <input type="email" class="form-control" placeholder="ex: some@example.com" required>
    </div>

    <div class="form-group form-group-default disabled">
        <label>Disabled</label>
        <input type="email" class="form-control" value="You can put anything here" disabled>
    </div>
</form>
```

## Pages Attached Form Layout

To create a attached form layout follow the following steps

1. Create a form following the Pages Default Form layout. Attached layout can ONLY be applied to the Pages Default style.
2. Wrap a set of `form-group-default` elements with `form-group-attached`

EXAMPLE :PROJECT NAMEFIRST NAMELAST NAME

```markup
<form role="form">
    <div class="form-group-attached">
        <div class="form-group form-group-default required">
            <label>Project name</label>
            <input type="text" class="form-control" name="projectName" required>
        </div>
        <div class="row clearfix">
            <div class="col-sm-6">
                <div class="form-group form-group-default required">
                    <label>First name</label>
                    <input type="text" class="form-control" name="firstName" required>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group form-group-default">
                    <label>Last name</label>
                    <input type="text" class="form-control" name="lastName">
                </div>
            </div>
        </div>
    </div>
</form>
```

## Pages Horizontal Form Layout

To create a pages default form layout, add the class `form-horizontal`.

EXAMPLE :

```markup
<form class="form-horizontal" role="form">
...
</form>
```


# Form Validation

Pages is packaged with [jQuery Validation Plugin](http://jqueryvalidation.org/) which is currently the de-facto plugin for form validation.

{% hint style="info" %}
Please refer to [jQuery Validation Plugin Documentation](http://jqueryvalidation.org/) to learn about plugin options
{% endhint %}

**Step one**

Include the relevant javascript files inside the `<body>`before core template script inclusions, if it's not there already.

```markup
<script type="text/javascript" src="assets/plugins/jquery-validation/js/jquery.validate.min.js">
```

**Step two**

Create the markup.

```markup
<form id="myForm" role="form">
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group form-group-default required">
                <label>First name</label>
                <input type="text" class="form-control" name="firstName" minlength="2" required>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group form-group-default">
                <label>Last name</label>
                <input type="text" class="form-control" name="lastName" minlength="2" required>
            </div>
        </div>
    </div>
    <button class="btn btn-primary" type="submit">Register</button>
</form>
```

**Step three**

Apply the plugin.

```markup
<script>
$(document).ready(function() {
    $('#myForm').validate();
});
</script>
```

## **Error messages**

`showErrors` and `errorPlacement` functions of jQuery Validate have been overridden in Pages core. As a result, the way error messages are displayed will differ depending on the form layout style you've declared in the code

### **Standard**

Standard way of showing error messages. Will appear on any form except for forms with attached groups.

![](/files/-LEA1cFC_6VPyFMpbzWB)

### **Attached**

Recommended to use with Pages default form style having attached elements with `.form-group-attached` wrapper. The error messages will appear in the form of popovers.

![](/files/-LEA1e55AqEvPApoFGX0)


# Form Wizard

Pages uses Bootstrap Wizard plugin to build a wizard out of a formatter tabable structure. It allows to build a wizard functionality using buttons to go through the different wizard steps and using events allows to hook into each step individually.

{% hint style="info" %}
Please refer to [Twitter Bootstrap Wizard Documentation](http://vadimg.com/twitter-bootstrap-wizard-example/) to learn about plugin options
{% endhint %}

**Step one**

Include the plugin javascript file inside the `<body>`before core template script inclusions, if it's not there already.

```markup
<script type="text/javascript" src="assets/plugins/boostrap-form-wizard/js/jquery.bootstrap.wizard.min.js"></script>
```

**Step two**

Add the markup. It is recommended that you use `.nav-tabs-linetriangle` and `.nav-tabs-separator` with `.nav-tabs`. To make the tabs slide in, add `.slide` to each `.tab-pane`

```markup
<div id="myFormWizard">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs nav-tabs-linetriangle nav-tabs-separator">
        <li class="active">
            <a data-toggle="tab" href="#tab1"><i class="fa fa-shopping-cart tab-icon"></i> <span>Your cart</span></a>
        </li>
        <li class="">
            <a data-toggle="tab" href="#tab2"><i class="fa fa-truck tab-icon"></i> <span>Shipping information</span></a>
        </li>
        <li class="">
            <a data-toggle="tab" href="#tab3"><i class="fa fa-credit-card tab-icon"></i> <span>Payment details</span></a>
        </li>
        <li class="">
            <a data-toggle="tab" href="#tab4"><i class="fa fa-check tab-icon"></i> <span>Summary</span></a>
        </li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content">
        <div class="tab-pane active slide" id="tab1">
            ...
        </div>
        <div class="tab-pane slide" id="tab2">
            ...
        </div>
        <div class="tab-pane slide" id="tab3">
            ...
        </div>
        <div class="tab-pane slide" id="tab4">
            ...
        </div>

        <ul class="pager wizard">
            <li class="next">
                <button class="btn btn-primary btn-cons btn-animated from-left fa fa-truck pull-right" type="button">
                    <span>Next</span>
                </button>
            </li>
            <li class="next finish" style="display:none;">
                <button class="btn btn-primary btn-cons btn-animated from-left fa fa-cog pull-right" type="button">
                    <span>Finish</span>
                </button>
            </li>
            <li class="previous first" style="display:none;">
                <button class="btn btn-white btn-cons btn-animated from-left fa fa-cog pull-right" type="button">
                    <span>First</span>
                </button>
            </li>
            <li class="previous">
                <button class="btn btn-white btn-cons pull-right" type="button">
                    <span>Previous</span>
                </button>
            </li>
        </ul>

        <div class="wizard-footer padding-20 bg-master-light">
            Copyright &copy; 2014 - Revox
        </div>
    </div>
</div>
```

**Step three**

Apply the plugin.

```markup
<script>
$(document).ready(function() {
    $('#myFormWizard').bootstrapWizard({
        onTabShow: function(tab, navigation, index) {
            var $total = navigation.find('li').length;
            var $current = index + 1;

            // If it's the last tab then hide the last button and show the finish instead
            if ($current >= $total) {
                $('#myFormWizard').find('.pager .next').hide();
                $('#myFormWizard').find('.pager .finish').show();
                $('#myFormWizard').find('.pager .finish').removeClass('disabled');
            } else {
                $('#myFormWizard').find('.pager .next').show();
                $('#myFormWizard').find('.pager .finish').hide();
            }

            var li = navigation.find('li.active');

            var btnNext = $('#myFormWizard').find('.pager .next').find('button');
            var btnPrev = $('#myFormWizard').find('.pager .previous').find('button');

            // remove fontAwesome icon classes
            function removeIcons(btn) {
                btn.removeClass(function(index, css) {
                    return (css.match(/(^|\s)fa-\S+/g) || []).join(' ');
                });
            }

            if ($current > 1 && $current < $total) {

                var nextIcon = li.next().find('.fa');
                var nextIconClass = nextIcon.attr('class').match(/fa-[\w-]*/).join();

                removeIcons(btnNext);
                btnNext.addClass(nextIconClass + ' btn-animated from-left fa');

                var prevIcon = li.prev().find('.fa');
                var prevIconClass = prevIcon.attr('class').match(/fa-[\w-]*/).join();

                removeIcons(btnPrev);
                btnPrev.addClass(prevIconClass + ' btn-animated from-left fa');
            } else if ($current == 1) {
                // remove classes needed for button animations from previous button
                btnPrev.removeClass('btn-animated from-left fa');
                removeIcons(btnPrev);
            } else {
                // remove classes needed for button animations from next button
                btnNext.removeClass('btn-animated from-left fa');
                removeIcons(btnNext);
            }
        }
    });
});
</script>
```


# Charts

Pages comes bundled with two popular charting libraries: [Rickshaw](https://tech.shutterstock.com/rickshaw/) and [NVD3](http://nvd3.org/). These libraries render charts in SVG format which makes them highly customizable using CSS and JS.

## **Rickshaw Charts**

Rickshaw is a simple framework for drawing charts of time series data on a web page, built on top of Mike Bostock's delightful D3 library. These charts can be powered by static historical data sets, or living data that continuously updates in real time.<br>

Please refer to [Rickshaw Tutorial](https://tech.shutterstock.com/rickshaw/) to learn more about the library

**Step one**

Include the plugin stylesheet rickshaw\.min.css.css `<head>`

```markup
<link type="text/css" rel="stylesheet" href="assets/plugins/rickshaw/rickshaw.min.css"></link>
```

**Step two**

Include the plugin javascript file and D3 library inside the `<body>`before core template script inclusions, if it's not there already.&#x20;

```markup
<script src="assets/plugins/d3/d3.min.js"></script>
<script src="assets/plugins/rickshaw/rickshaw.min.js"></script>
```

**Step three**

Create the markup

```markup
<div id="chart"></div>
```

**Step four**

Apply the plugin. This example renders a basic area chart

```markup
<script>

var data = [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 17 }, { x: 3, y: 42 } ];

var graph = new Rickshaw.Graph( {
        element: document.querySelector("#chart"),
        width: 580,
        height: 250,
        series: [ {
                color: 'steelblue',
                data: data
        } ]
} );

graph.render();

</script>
```

**Step three**

Add following markup to your page. Note the use of directive `rickshaw`

```markup
<rickshaw
    rickshaw-options="options"
    rickshaw-features="features"
    rickshaw-series="series">
</rickshaw>
```

## **NVD3 Charts**

NVD3 is an attempt to build re-usable charts and chart components for d3.js without taking away the power that d3.js gives you.

{% hint style="info" %}
Please refer to [NVD3 Tutorial](http://nvd3.org/examples/index.html) to learn about the basics of the library
{% endhint %}

**Step one**

Include the plugin stylesheet rickshaw\.min.css.css `<head>`.

```
<link media="screen" type="text/css" rel="stylesheet" href="assets/plugins/nvd3/nv.d3.min.css"></link>
```

**Step two**

Include the plugin javascript files inside the `<body>`before core template script inclusions, if it's not there already.&#x20;

```markup
<script type="text/javascript" src="assets/plugins/nvd3/lib/d3.v3.js"></script>
<script type="text/javascript" src="assets/plugins/nvd3/nv.d3.min.js"></script>
<script type="text/javascript" src="assets/plugins/nvd3/src/utils.js"></script>
<script type="text/javascript" src="assets/plugins/nvd3/src/tooltip.js"></script>
<script type="text/javascript" src="assets/plugins/nvd3/src/interactiveLayer.js"></script>
<script type="text/javascript" src="assets/plugins/nvd3/src/models/axis.js"></script>
<script type="text/javascript" src="assets/plugins/nvd3/src/models/line.js"></script>
<script type="text/javascript" src="assets/plugins/nvd3/src/models/lineWithFocusChart.js"></script>
```

**Step three**

Create the markup. Apply the class `line-chart` to get the Pages pre-defined style for NVD3 charts. Use data-attributes to customize the style

```markup
<div id="nvd3" class="line-chart" 
  data-line-color="success" 
  data-area-color="master"
  data-points="true" 
  data-point-color="white" 
  data-stroke-width="2">
    <svg></svg>
</div>
```

Available data attributes:

| `DATA ATTRIBUTE`    | `AVAILABLE VALUES`                                                             | `DESCRIPTION`                                                 |
| ------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------- |
| `data-line-color`   | white \| master \| success \| info \| complete \| primary \| warning \| danger | Change the line color of a line chart                         |
| `data-area-color`   | white \| master \| success \| info \| complete \| primary \| warning \| danger | Change the area color of a line chart with area option        |
| `data-points`       | true \| false                                                                  | Show/hide point circles                                       |
| `data-point-color`  | white \| master \| success \| info \| complete \| primary \| warning \| danger | Change the point color                                        |
| `data-stroke-width` | 1 \| 2 \| 3                                                                    | Change the stroke width of a line chart. Values are in pixels |

## **Sparkline Charts**

This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.<br>

{% hint style="info" %}
Please refer to [Sparkline Documentation](http://omnipotent.net/jquery.sparkline/#s-about) to learn more about the library
{% endhint %}

**Step one**

Include the plugin javascript files inside the `<body>`before core template script inclusions.

```markup
<script type="text/javascript" src="assets/plugins/jquery-sparkline/jquery.sparkline.min.js"></script>
```

**Step two**

Create the markup.

```markup
<div id="sparkline"></div>
```

**Step three**

Apply the plugin. This example renders a basic line chart

```markup
<script>

$("#sparkline").sparkline([5,6,7,9,9,5,3,2,2,4,6,7], {type: 'line'});

</script>
```


# Google Maps

This section will guide you through how to setup a basic google map and add overlay colors to it,For more advance options please refer the google map developer API for Web [Google Map Developer API](https://developers.google.com/maps/documentation/javascript/tutorial)

## **Setting up a map**

**Step one**

Add the following google map api js, this is without private key.&#x20;

```markup
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
```

**Step Two**

Create an Empty div with an ID

```
<div id="myMap"></div>
```

**Step Three**

Initialize Google Map.

```javascript
 // When the window has finished loading create our google map below
 google.maps.event.addDomListener(window, 'load', init);

var map;
var zoomLevel = 11;

 function init() {
     // Basic options for a simple Google Map
     // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
     var mapOptions = {
         // How zoomed in you want the map to start at (always required)
         zoom: zoomLevel,
         disableDefaultUI: true,
         // The latitude and longitude to center the map (always required)
         center: new google.maps.LatLng(40.6700, -73.9400), // New York
     };

     // Get the HTML DOM element that will contain your map 
     // We are using a div with id="map" seen below in the 
     var mapElement = document.getElementById('myMap');

     // Create the Google Map using out element and options defined above
     map = new google.maps.Map(mapElement, mapOptions);
 }
```

## **Map themes**

Google Maps comes with styling option that you can change, add the following `styles` attribute to `mapOptions` in the JS you created before

```javascript
styles: [{
   featureType: 'water',
   elementType: 'all',
   stylers: [{
       hue: '#e9ebed'
   }, {
       saturation: -78
   }, {
       lightness: 67
   }, {
       visibility: 'simplified'
   }]
}, {
   featureType: 'landscape',
   elementType: 'all',
   stylers: [{
       hue: '#ffffff'
   }, {
       saturation: -100
   }, {
       lightness: 100
   }, {
       visibility: 'simplified'
   }]
}, {
   featureType: 'road',
   elementType: 'geometry',
   stylers: [{
       hue: '#bbc0c4'
   }, {
       saturation: -93
   }, {
       lightness: 31
   }, {
       visibility: 'simplified'
   }]
}, {
   featureType: 'poi',
   elementType: 'all',
   stylers: [{
       hue: '#ffffff'
   }, {
       saturation: -100
   }, {
       lightness: 100
   }, {
       visibility: 'off'
   }]
}, {
   featureType: 'road.local',
   elementType: 'geometry',
   stylers: [{
       hue: '#e9ebed'
   }, {
       saturation: -90
   }, {
       lightness: -8
   }, {
       visibility: 'simplified'
   }]
}, {
   featureType: 'transit',
   elementType: 'all',
   stylers: [{
       hue: '#e9ebed'
   }, {
       saturation: 10
   }, {
       lightness: 69
   }, {
       visibility: 'on'
   }]
}, {
   featureType: 'administrative.locality',
   elementType: 'all',
   stylers: [{
       hue: '#2c2e33'
   }, {
       saturation: 7
   }, {
       lightness: 19
   }, {
       visibility: 'on'
   }]
}, {
   featureType: 'road',
   elementType: 'labels',
   stylers: [{
       hue: '#bbc0c4'
   }, {
       saturation: -93
   }, {
       lightness: 31
   }, {
       visibility: 'on'
   }]
}, {
   featureType: 'road.arterial',
   elementType: 'labels',
   stylers: [{
       hue: '#bbc0c4'
   }, {
       saturation: -93
   }, {
       lightness: -2
   }, {
       visibility: 'simplified'
   }]
}]
```

{% hint style="info" %}
For more google map Themes, try the following link [Google Map Themes](http://snazzymaps.com/)
{% endhint %}


# Vector Maps

**This is powered by a Premium Plugin called Mapplic available in Codecanyon, Pages customers are free to use it**

Maplic Documentation is available in your "Pages" package

{% hint style="info" %}
For Information and support, please refer [Mapplic Support](http://codecanyon.net/item/mapplic-custom-interactive-map-jquery-plugin/6275001)&#x20;
{% endhint %}


# Tables

## Basic **Tables**

Pages extensively uses Bootstrap's `.table` to style its tables.&#x20;

{% hint style="info" %}
Please refer to their documentation for guidelines. [Bootstrap Tables](https://getbootstrap.com/docs/4.4/content/tables/)
{% endhint %}

## **DataTables**

DataTables is a highly flexible jQuery plug-in based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table.

{% hint style="info" %}
Please refer to [DataTables Documentation](http://www.datatables.net/) to learn about plugin options
{% endhint %}

**Step one**

Include the plugin stylesheet `jquery.dataTables.css` and other extensions inside the `<head>`.

```markup
<link type="text/css" rel="stylesheet" href="assets/plugins/jquery-datatable/media/css/jquery.dataTables.css">
<link type="text/css" rel="stylesheet" href="assets/plugins/jquery-datatable/extensions/FixedColumns/css/dataTables.fixedColumns.min.css">
<link media="screen" type="text/css" rel="stylesheet" href="assets/plugins/datatables-responsive/css/datatables.responsive.css">
```

**Step two**

Include the plugin javascript and extension files inside the `<body>`before core template script inclusions, if it's not there already.

```markup
<script type="text/javascript" src="assets/plugins/jquery-datatable/media/js/jquery.dataTables.min.js">
<script type="text/javascript" src="assets/plugins/jquery-datatable/extensions/TableTools/js/dataTables.tableTools.min.js">
<script type="text/javascript" src="assets/plugins/jquery-datatable/extensions/Bootstrap/jquery-datatable-bootstrap.js">
<script src="assets/plugins/datatables-responsive/js/datatables.responsive.js" type="text/javascript">
<script src="assets/plugins/datatables-responsive/js/lodash.min.js" type="text/javascript">
```

**Step three**

Create the markup for your table. You can also add [Bootstrap table classes](https://getbootstrap.com/docs/4.4/content/tables/#contextual-classes) to customize the look

```markup
<table id="myDataTable" class="table table-hover" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
        <tr>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$86,000</td>
        </tr>
        <tr>
            <td>Cedric Kelly</td>
            <td>Senior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2012/03/29</td>
            <td>$433,060</td>
        </tr>
        <tr>
            <td>Airi Satou</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>33</td>
            <td>2008/11/28</td>
            <td>$162,700</td>
        </tr>
        <tr>
            <td>Brielle Williamson</td>
            <td>Integration Specialist</td>
            <td>New York</td>
            <td>61</td>
            <td>2012/12/02</td>
            <td>$372,000</td>
        </tr>
    </tbody>
</table>
```

**Step four**

Apply the plugin to your table.

```markup
<script>
$(document).ready(function() {
     $('#myDataTable').DataTable();
});
</script>
```

\
Use any of the following pre-configured settings to get DataTables customized to match your purpose. For more advanced options please refer to [DataTables Documentation](http://datatables.net/)

### **Table with a search box**

```markup
<!-- Markup -->
<input type="text" id="search-table" class="form-control pull-right" placeholder="Search">

<table class="table" id="tableWithSearch">
    ...
</table>

<!-- Apply the plugin -->
<script>
var table = $('#tableWithSearch');

var settings = {
    "sDom": "<'table-responsive't><'row'<p i>>",
    "sPaginationType": "bootstrap",
    "destroy": true,
    "scrollCollapse": true,
    "oLanguage": {
        "sLengthMenu": "_MENU_ ",
        "sInfo": "Showing <b>_START_ to _END_</b> of _TOTAL_ entries"
    },
    "iDisplayLength": 5
};

table.dataTable();

// search box for table
$('#search-table').keyup(function() {
    table.fnFilter($(this).val());
});
</script>
```

### **Table with dynamic rows**

```markup
<!-- Markup -->
<button id="add-row" type="button" class="btn btn-primary">Add New Row</button>

<table class="table" id="tableWithDynamicRows">
    <thead>
        <tr>
            <th style="width:25%">Column 1</th>
            <th style="width:30%">Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Hello</td>
            <td>there!</td>
        </tr>
    </tbody>
</table>

<!-- Apply the plugin -->
<script>
var table = $('#tableWithDynamicRows');

var settings = {
    "sDom": "<'table-responsive't><'row'<p i>>",
    "sPaginationType": "bootstrap",
    "destroy": true,
    "scrollCollapse": true,
    "oLanguage": {
        "sLengthMenu": "_MENU_ ",
        "sInfo": "Showing <b>_START_ to _END_</b> of _TOTAL_ entries"
    },
    "iDisplayLength": 5
};

table.dataTable(settings);

$('#add-row').click(function() {
    table.dataTable().fnAddData([
        "Foo",
        "Bar"
    ]);
});
</script>
```


# Cards

Basic Cards in Pages follow the exact same markup of `.cards` in Bootstrap. Going a step further we have added Card tools to enhance your web app experience.

{% embed url="<https://getbootstrap.com/docs/4.1/components/card/>" %}
Bootstrap Documentation
{% endembed %}

## **Basic Card**

**Card scroll**

![](/files/-LE9Q4mv6-P72hznrCeK)

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

### HTML

```markup
<div class="card card-default">
    <div class="card-header">
        <div class="card-title">Basic Cards
        </div>
    </div>
    <div class="card-block scrollable">
      <!-- REMOVE THIS WRAPPER IF .scrollable IS NOT USED -->
        <div style="max-height:130px">
          ...
        </div>
    </div>
</div>
```

### **Style options**

![](/files/-LE9QRzK78uuKGJM6u5m)

Append `.separator` to your `.card-header` to separator between card header and card bodyBASIC CARDS...

```markup
<div class="card card-default">
    <div class="card-header separator">
        <div class="card-title">Basic Cards
        </div>
    </div>
    <div class="card-block">
      ...
    </div>
</div>
```

Replace `.card-default` with `.card-transparent` to make the background of a Card transparentBASIC CARDS...

![](/files/-LE9QTatA1AYhhcm5cDF)

```markup
<div class="card card-transparent">
    <div class="card-header">
        <div class="card-title">Basic Cards
        </div>
    </div>
    <div class="card-block">
      ...
    </div>
</div>
```

Use any contextual background color with Cards by appending `.bg-*` (ex: `.bg-success`) to `.card` . Text color of the card body can also be changed by adding any `.text-*` contextual color classBASIC CARDS...

![](/files/-LE9QUyr4YynZNzyFkCy)

```markup
<div class="card card-default bg-success text-white">
    <div class="card-header">
        <div class="card-title">Basic Cards
        </div>
    </div>
    <div class="card-block">
      ...
    </div>
</div>
```

Append `.card-condensed` to reduce padding of `.card-header` and `.card-block`BASIC CARDS...

```markup
<div class="card card-default card-condensed">
    <div class="card-header">
        <div class="card-title">Basic Cards
        </div>
    </div>
    <div class="card-block">
      ...
    </div>
</div>
```

## **Advance Card**

**Example**

Convert traditional Bootstrap cards into Cards using Pages Cards jQuery plugin. The following Card controls are available:

* Collapse
* Refresh
* Close
* Settings
* Resize

![](/files/-LE9Q_-aH5U5s66n_Yuz)

```markup
<div id="myCard" class="card card-default">
    <div class="card-header ">
        <div class="card-title">Card Title
        </div>
        <div class="card-controls">
            <ul>
                <li>
                    <div class="dropdown">
                        <a id="card-settings" data-target="#" href="#" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
                            <i class="card-icon card-icon-settings "></i>
                        </a>

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

### **Usage**

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

Via data attributes

```markup
<div class="card card-default" data-pages="card">
    <div class="card-header ">
        <div class="card-title">Card Title
        </div>
        <div class="card-controls">
            <ul>
                <li><a href="#" class="card-close" data-toggle="close"><i class="card-icon card-icon-close"></i></a>
                </li>
            </ul>
        </div>
    </div>
    <div class="card-block">
        ...
    </div>
</div>
```

Via Javascript

```
<script>
$(function() {
    $('#myCard').card(options)
})
</script>
```

### Options

| `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](http://pages.revox.io/dashboard/3.0.0/docs/partials/color.html) 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 Card. 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 Card 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 Card is being maximized                                                                                                                                      |
| onClose        | function | undefined | Called when the \[data-toggle="close"] button is clicked                                                                                                                                                                           |


# Timeline

Pages timeline has been adapted from [CodyHouse Timeline example](http://codyhouse.co/gem/vertical-timeline/).

**Step one**

Start by creating the markup for the timeline.&#x20;

```markup
<div class="timeline-container">
    <section class="timeline">
        <div class="timeline-block">
            <div class="timeline-point success">
                <i class="pg-map"></i>
            </div>
            <!-- timeline-point -->
            <div class="timeline-content">
                <!-- START CARD ELEMENT -->
                <div class="card share full-width">
                    <div class="circle" data-toggle="tooltip" title="Label">
                    </div>
                    <div class="card-header clearfix">
                        <div class="user-pic">
                            <img alt="Profile Image" width="33" height="33" data-src-retina="assets/img/profiles/8x.jpg" data-src="assets/img/profiles/8.jpg" src="assets/img/profiles/8x.jpg">
                        </div>
                        <h5>Jeff Curtis</h5>
                        <h6>Shared a Tweet
                                <span class="location semi-bold"><i class="fa fa-map-marker"></i> SF, California</span>
                            </h6>
                    </div>
                    <div class="card-description">
                        <p>What you think, you become. What you feel, you attract. What you imagine, you create - Buddha. <a href="#">#quote</a> </p>
                        <div class="via">via Twitter</div>
                    </div>
                </div>
                <!-- END CARD ELEMENT -->
                <div class="event-date">
                    <h6 class="font-montserrat all-caps hint-text m-t-0">Apple Inc</h6>
                    <small class="fs-12 hint-text">15 January 2015, 06:50 PM</small>
                </div>
            </div>
            <!-- timeline-content -->
        </div>
        
        <div class="timeline-block">
          ...
        </div>

    </section>
    <!-- timeline -->
</div>
```

**Step one**

Add the following snippet to make the posts appear on scroll with a nice fade in effect.

```javascript
jQuery(document).ready(function($){
    var $timeline_block = $('.timeline-block');

    //hide timeline blocks which are outside the viewport
    $timeline_block.each(function(){
        if($(this).offset().top > $(window).scrollTop()+$(window).height()*0.75) {
            $(this).find('.timeline-point, .timeline-content').addClass('is-hidden');
        }
    });

    //on scolling, show/animate timeline blocks when enter the viewport
    $(window).on('scroll', function(){
        $timeline_block.each(function(){
            if( $(this).offset().top <= $(window).scrollTop()+$(window).height()*0.75 && $(this).find('.timeline-point').hasClass('is-hidden') ) {
                $(this).find('.timeline-point, .timeline-content').removeClass('is-hidden').addClass('bounce-in');
            }
        });
    });
});
```

**Aligning elements**

By default the posts will be spread on both sides of a vertical axis for larger screens. For small/medium screens the posts will be aligned to left automatically. Explicity specifying either `left` or `center` classes in the `timeline-container` element, posts will be forced not to change the layout type relevant to screen size.

```markup
<!-- ALIGN timeline-block ITEMS TO LEFT -->
    <div class="timeline-container left">
    <section class="timeline">
        
        <div class="timeline-block">
          ...
        </div>
    </section>
    <!-- timeline -->
</div>
```


# Views

## **Basic HTML Tag Structure**

The below code is a basic structure for a view to work, you need to have all your `view` wrapped in a `view-port`

```markup
 <!-- BEGIN View Port !-->
 <div class="view-port clearfix" id="myViewPort">
  <!-- BEGIN View !-->
  <div class="view bg-white">

  </div>
  <!-- END View !-->

  <!-- BEGIN View !-->
  <div class="view bg-white">

  </div>
  <!-- END View !-->
 </div>
 <!-- END View Port !-->
```

### **How to Navigate**

You can navigate with a simple HTML link and the following attributes in it

```markup
<a data-view-animation="push-parrallax" data-view-port="#myViewPort" data-navigate="view" class="" href="#">
Go to View
</a>
```

\
`data-view-animation` : Defines animation - push-parrallax / push / from-top \
\
`data-view-port` : Defines Parent View Port - ID of parent view port. Eg : "#myViewPort" \
\
`data-navigate` : Enables to toggle back and forth form two views in a view port \ <br>

## **One to Many Navigation**

There is an option where you can navigate from one view to different views, the structure will be the following<br>

**HTML**

```markup
 <!-- BEGIN View Port !-->
 <div class="view-port clearfix" id="myViewPort">
  <!-- BEGIN View !-->
  <div class="view bg-white">

  </div>
  <!-- END View !-->

  <!-- BEGIN View !-->
  <div class="view bg-white">
    <div class="view bg-white" id="subView1">
      Your Content One
    </div>
    <div class="view bg-white" id="subView2">
      Your Content Two
    </div>
  </div>
  <!-- END View !-->
 </div>
 <!-- END View Port !-->
```

**Link**

To link to the subview add the attribute called `data-toggle-view` this defines the ID of your subview

```markup
<a data-view-animation="push-parrallax" data-view-port="#myViewPort" data-navigate="view" data-toggle-view="#subView1" class="" href="#">
Go to View
</a>
```

## **Multi Level Navigation**

You can navigate up to unlimited levels by nesting views-ports under `views`<br>

**HTML Structure**

```markup
 <!-- BEGIN View Port !-->
 <div class="view-port clearfix" id="myViewPort">
  <!-- BEGIN View !-->
  <div class="view bg-white">
    Your Content
  </div>
  <!-- END View !-->

  <!-- BEGIN View !-->
  <div class="view bg-white">
     <!-- BEGIN View Port !-->
     <div class="view-port clearfix" id="myNestedViewPort">
      <!-- BEGIN View !-->
      <div class="view bg-white">
        Level One
      </div>
      <!-- END View !-->

      <!-- BEGIN View !-->
      <div class="view bg-white">
        Level Two
      </div>
      <!-- END View !-->
     </div>
     <!-- END View Port !-->
  </div>
  <!-- END View !-->
 </div>
 <!-- END View Port !-->
```

**Sample with Navigation Links**

```markup
<div class="view-port clearfix" id="myViewPort">
    <!-- BEGIN View !-->

    <div class="view bg-white">
        <a class="" data-navigate="view" data-view-animation="push-parrallax"
        data-view-port="#myViewPort" href="#">Go To Level One</a>
    </div><!-- END View !-->
    <!-- BEGIN View !-->

    <div class="view bg-white">
        <!-- BEGIN View Port !-->

        <div class="view-port clearfix" id="myNestedViewPort">
            <!-- BEGIN View !-->

            <div class="view bg-white">
                <p>Level One</p><br>
                <a class="" data-navigate="view" data-view-animation=
                "push-parrallax" data-view-port="#myNestedViewPort" href="#">Go
                To Level Two</a> <a class="" data-navigate="view"
                data-view-animation="push-parrallax" data-view-port=
                "#myViewPort" href="#">Go Back</a>
            </div><!-- END View !-->
            <!-- BEGIN View !-->

            <div class="view bg-white">
                <p>Level Two</p><br>
                <a class="" data-navigate="view" data-view-animation=
                "push-parrallax" data-view-port="#myNestedViewPort" href="#">Go
                Back</a>
            </div><!-- END View !-->
        </div><!-- END View Port !-->
    </div><!-- END View !-->
</div><!-- END View Port !-->
```


# Grid

Bootstrap grid includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts

## Introduction

Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:

* You must start with `row`
* There are pre-define classes of columns starting from 1 to 12, example `col-md-1` to `col-md-12`
* Each of these value represent a percentage of the screen, 1 being the smallest and 12 being 100%
* You can create different grid pattern that finally forms 12

  eg :<br>

  ```markup
  <div class="row">
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
  </div>
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-6">.col-md-6</div>
    <div class="col-md-6">.col-md-6</div>
  </div>
  ```
* There different grids for different screen sizes, "col-md" md stands for medium screen, the following table explains<br>

  |                   | `EXTRA SMALL DEVICES PHONES (<768PX)`  | `SMALL DEVICESTABLETS (≥768PX)`                    | `MEDIUM DEVICESDESKTOPS (≥992PX)` | `LARGE DEVICESDESKTOPS (≥1200PX)` |
  | ----------------- | -------------------------------------- | -------------------------------------------------- | --------------------------------- | --------------------------------- |
  | `Grid behavior`   | `Horizontal at all times`              | `Collapsed to start, horizontal above breakpoints` |                                   |                                   |
  | `Container width` | `None (auto)`                          | `750px`                                            | `970px`                           | `1170px`                          |
  | `Class prefix`    | `.col-xs-`                             | `.col-sm-`                                         | `.col-md-`                        | `.col-lg-`                        |
  | `# of columns`    | `12`                                   |                                                    |                                   |                                   |
  | `Column width`    | `Auto`                                 | `~62px`                                            | `~81px`                           | `~97px`                           |
  | `Gutter width`    | `30px (15px on each side of a column)` |                                                    |                                   |                                   |
  | `Nestable`        | `Yes`                                  |                                                    |                                   |                                   |
  | `Offsets`         | `Yes`                                  |                                                    |                                   |                                   |
  | `Column ordering` | `Yes`                                  |                                                    |                                   |                                   |


# Helpers

**Pages helper css classes allow you to build your custom layout without touching any CSS code**

These classes are generic helper classes predifined in the CSS of pages, here is quick view what they can do

* Set margins - Available for all directions from 5 - 90 px stepping value 5px
* Set padding - Available for all directions from 5 - 90 px stepping value 5px
* Set border - Available for all sides, default pages border color
* Border Radius - Option to set border radius, size sm / md / lg
* Image wrapping - Circular image wrap with custom size, sm / md / lg

## Margins

You can add this helper class to any element in your HTML code to set Margins

| `FIRST PREFIX ( M-*)` | `SECOND PREFIX(M-T/B/L/R-*)`             | `LAST PREFIX(M-T-$VALUE)` |
| --------------------- | ---------------------------------------- | ------------------------- |
| m for margin          | t : top, b : bottom, l : left, r : right | 5,10,15,20, ... 90        |

{% hint style="info" %}
`m-t-10` which means Margin Top 10px \
`m-b-20` which means Margin Bottom 20px \
`m-l-5` which means Margin Left 5px \
`m-r-35` which means Margin Right 35px&#x20;
{% endhint %}

RULE :

> Value can not be anything, 1,2,4,5,6. It has a step of 5px, eg: 5,10,15

OTHER OPTIONS :

> To remove margin from a HTML element add the class `no-margin`

## Padding

You can add this helper class to any element in your HTML code to set Padding

| `FIRST PREFIX ( P-*)` | `SECOND PREFIX(P-T/B/L/R-*)`             | `LAST PREFIX(P-T-$VALUE)` |
| --------------------- | ---------------------------------------- | ------------------------- |
| p for padding         | t : top, b : bottom, l : left, r : right | 5,10,15,20, ... 90        |

{% hint style="info" %}
`p-t-10` which means Padding Top 10px \
`p-b-20` which means Padding Bottom 20px \
`p-l-5` which means Padding Left 5px \
`p-r-35` which means Padding Right 35px&#x20;
{% endhint %}

> Value can not be anything, 1,2,4,5,6. It has a step of 5px, eg: 5,10,15

OTHER OPTIONS :

To remove padding from a HTML element add the class `no-padding`

## Border

You can add this helper class to any element in your HTML code to set Border, border currently supports one pixel

| `FIRST PREFIX ( B-*)` | `SECOND PREFIX(B-T/B/L/R/A-*)`                    |
| --------------------- | ------------------------------------------------- |
| b for border          | t : top, b : bottom, l : left, r : right, a : all |

**Border Color**

By default pages is shipped with border helper classes are of two

`b-transparent` 40% opacity

`b-grey`

`b-primary`

`b-success`

`b-complete`

`b-danger`

`b-warning`

EXAMPLE :

```markup
<div class="b-b b-grey">
  I have a bottom border 
</div>
```

### **Border Style**

`b-dashed` - change the border style to 'dashed'

`b-thick` - change the border width to 2px

### **Border Radius**

Helpy class to apply quick border radius, you can change the value in misc.less or in style.css

| CLASS      | DESCRIPTION       |
| ---------- | ----------------- |
| `b-rad-sm` | 3px border radius |
| `b-rad-md` | 5px border radius |
| `b-rad-lg` | 7px border radius |

## Table-like behavior

Add table behavior to any `div` by using these helper classes. These classes will come handy when you want to vertically align any content like in native `table`s.

{% hint style="info" %}
I'm top aligned just like in a table-cellI'm middle aligned just like in a table-cell
{% endhint %}

```markup
<div class="container-sm-height bg-master-lighter" style="height:200px">
    <div style="height:50px" class="row row-sm-height b-b b-grey">
        <div class="col-sm-12 col-sm-height col-top ">
            <span class="hint-text">I'm top aligned just like in a table-cell</span>
        </div>
    </div>

    <div class="row row-sm-height ">
        <div class="col-sm-12 col-sm-height col-middle ">
            <span class="hint-text">I'm middle aligned just like in a table-cell</span>
        </div>
    </div>
</div>
```

The table created in the above example is only activated for resolutions ≥768px. Hence the prefix `*-sm-*`. You can replace `*-sm-*` with any other breakpoint prefix defined in Bootstrap to restrict the table-like behavior to a particular resolution (ex: 'xs','md','lg')

You can also append `col-middle`, `col-top` or `col-bottom` to `col-*-height` to vertically align the content

It is also possible to mix these classes together with Bootstrap's `row` and `col-*-*` classes without any conflict

## Elements that resize maintaining aspect ratio

Make the height of any element auto-adjust depending on its width while constraining to a given aspect ratio.

![](/files/-LEFxcmeibW2v-gnCgLi)

```markup
<div class="row">
    <div class="col-sm-3">
        <div class="ar-1-2">
            <div class="bg-master-light padding-20">
                <h3>1x2</h3>
            </div>
        </div>
    </div>

    <div class="col-sm-3">
        <div class="ar-2-3">
            <div class="bg-master-light padding-20">
                <h3>2x3</h3>
            </div>
        </div>
    </div>

    <div class="col-sm-3">
        <div class="ar-1-1">
            <div class="bg-master-light padding-20">
                <h3>1x1</h3>
            </div>
        </div>
    </div>

    <div class="col-sm-3">
        <div class="ar-3-2">
            <div class="bg-master-light padding-20">
                <h3>3x2</h3>
            </div>
        </div>
    </div>

    <div class="col-sm-3 m-t-20">
        <div class="ar-2-1">
            <div class="bg-master-light padding-20">
                <h3>2x1</h3>
            </div>
        </div>
    </div>
</div>
```

## Absolute positioning

Makes elements to have `position:absolute`. Add `.relative` to the parent of the element that you want to be absolute to have relative positioning

{% hint style="info" %}
Like - Top-left, Bottom-left, Top-right & Bottom-right
{% endhint %}

```markup
<div class="relative" style="height:300px">
    <!-- Equivalent to "pull-up" -->
    <div class="top-left bg-master-light text-center padding-20">Top-left</div>
    <!-- Equivalent to "pull-bottom" -->
    <div class="bottom-left bg-master-light text-center padding-20">Bottom-left</div>
    <div class="top-right bg-master-light text-center padding-20">Top-right</div>
    <div class="bottom-right bg-master-light text-center padding-20">Bottom-right</div>
</div>
```

It is also possible to mix two or more classes. ex: Mixing `top-left top-right` will produce the following CSS styling`top:0; left:0; right:0`

## **Misc. classes**

| CLASS NAME       | DESCRIPTION                                                                     |
| ---------------- | ------------------------------------------------------------------------------- |
| `full-width`     | Spans the element to have 100% width of the parent                              |
| `full-height`    | Spans the element to have 100% height of the parent                             |
| `scrollable`     | Adds `overflow-y:auto`                                                          |
| `center-margin`  | Adds `margin-left:auto; margin-right:auto`. Useful when center aligning any div |
| `inherit-size`   | Inherits width and height from parent                                           |
| `inherit-height` | Inherits only the height from parent                                            |
| `hide`           | Hides any element                                                               |
| `inline`         | Adds `display:inline-block`                                                     |


# Troubleshooting

This section of the page describes how to trouble shoot Javascript errors that you may in counter.

JavaScript errors are likely to prevent a web page from working as expected. By default all browsers hide the JavaScript errors from the end user.

Fortunately there are [browser developer tools](http://javascript.info/tutorial/development) to inspect and debug JavaScript errors.


# Browser Support

Pages is built keeping mind to support a wide range of browsers and devices. We support all major browsers Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer 10 and Above

Pages not only is supported by major browser but also is hardware accelerated using the GPU<br>

|          | CHROME    | FIREFOX   | INTERNET EXPLORER | OPERA         | SAFARI        |
| -------- | --------- | --------- | ----------------- | ------------- | ------------- |
| Android  | Supported | Supported | N/A               | Not Supported | N/A           |
| iOS      | Supported | N/A       | Not Supported     | Supported     |               |
| Mac OS X | Supported | Supported | Supported         | Supported     |               |
| Windows  | Supported | Supported | Supported         | Supported     | Not Supported |


# Change log

Change log is for both Angular and HTML

### Upcoming releases

To see and request features on upcoming release of Pages please visit the Trello board\
<https://trello.com/b/2cCjhlFb/pages>

### 5.0.1

* \[Updated] Checkbox and radio controls
* \[Added] New switch control
* \[Removed] Switchery iOS toggle
* \[Fixed] Minor Browser support issues
* \[Fixed] Slideup Modal
* \[Fixed] Horizontal menu auto hide feature

### 5.0.0

#### Release

* \[Updated] Core Color Pallet Generator
* \[New] Color page
* \[Updated] Button styles
* \[New] Buttons page
* \[Removed] Font-awesome icons
* \[Added] Material Design icons
* \[Updated] Pages icons 100+ new icons - supports 20px web format
* \[New] Icons page
* \[Updated] Email app Design
* \[Updated] Drop-downs and quick popups
* \[Updated] Form inputs
* \[Updated] Form checkbox and radio Design
* \[Updated] Form Validation and form Layouts
* \[Updated] Enhance readability and accessibility to W3C standard
* \[Updated] Bootstrap core CSS and JS
* \[Fixed] Angular TSlint issues
* \[Removed] LESS support
* \[Added] Official SASS/SCSS support

### 4.2.0

#### Release

* \[Updated] Angular 8+ Native Support
* Angular minor issue fixes

### 4.1.0

#### Release

* \[Updated] Angular 6 Native Support
* \[Upgrade] Angular @pages styles support new update
* \[Fixed] \[Angular] Modal z-index issues

### 4.0.0

#### Release

* \[Added] Angular 5 Native Support
* \[Upgrade] Bootstrap v4.1
* \[Upgrade] JQuery 3.2.1
* \[Removed] MeteroJS Support
* \[Fixed] Minor Issues on HTML version
* \[Fixed] SASS fixes and LESS optimization

### 3.0.0

#### Release

* \[Upgrade] Bootstrap v4
* \[Added] 5 Different Layouts
* \[Added] 2 New themes
* \[Removed] IE9 support
* \[Removed] Angular 1.x Support
* \[Upgrade] CalendarJS compatibility with npm
* \[Fixed] Bugs in IE10
* \[Upgrade] MeteroJS support to v1.5
* \[Fixed] SASS fixes and LESS optimization

### v2.3.0

#### Release

* \[Upgrade] Bootstrap to v3.3.7
* \[Upgrade] Fontawesome to v4.7.0
* \[Fixed] \[Calendar] pagescalendar('getEvents',option);
* \[Fixed] \[Calendar] pagescalender(“rebuild”)
* \[Fixed] \[Calendar] Setting startOfTheWeek and endOfTheWeek breaks
* \[Fixed] \[Calendar] Scroll to first event is not working properly
* \[Fixed] \[Calendar] Calendar.settings.header.visible not applying properly
* \[Fixed] Prevent scroll propagation on sidebar menu
* \[Fixed] \[Calendar] Uncaught TypeError: Cannot read property 'pageX' of undefined

### v2.2.0

#### Release

* \[Add] Pending Comments Widget&#x20;
* \[Add] Map Sales Widget
* \[Upgrade] Select2 to v4.0.3
* \[Upgrade] UIselect to v0.19.3 - Angular \*BETA
* \[Removed] Select2 v3.x
* \[Fixed] [\[Calendar\] weekends: false makes Mondays be empty](https://github.com/revoxltd/pages/issues/397)
* \[Fixed] [\[Calendar\] this.checkOptionsAndBuild()](https://github.com/revoxltd/pages/issues/417)
* \[Fixed] [\[Calendar\] onTimeSlotDblClick not working on mobile](https://github.com/revoxltd/pages/issues/424)
* \[Fixed] [\[Calendar\] scroll to first Event](https://github.com/revoxltd/pages/issues/423)
* \[Fixed] [\[Calendar\] overlapping events more than 2 causes wrong length](https://github.com/revoxltd/pages/issues/422)
* \[Fixed] csSelect for angular

### v2.1.6

#### Release

* \[Add] Minimal Weekly Stats Widget
* \[Add] Project Progress Widget
* \[Add] Stat Cards Widget
* \[Fixed] Angular Email Compose Unwanted width
* \[Remove] duplicate code
* \[Add] "context" parameter to init functions - Pages.js
* \[Add] Better way to get selected option
* \[Remove] unused variable (padding) - Pages.js

### v2.1.5

#### Release

* Full Compatibility with SASS / SCSS
* Compatibility with LibSass
* Misspelled bootstrap diretory in assets folder
* Remove console.log calls in pages.js

### v2.1.4

#### Release

* Full Compatibility with SASS / SCSS
* Compatibility with LibSass
* Misspelled bootstrap directory in assets folder

### v2.1.3

#### Release

* Fixes for sass/scss
* \[Calendar] eventOverlap should be set to false by default and changing does not disable events to overlap
* \[Calendar] eventBubble attribute not working as expected
* \[Calendar] ui visible option change doesn't effect anything
* \[Calendar] local variable/attribute change doesn't effect anything
* \[Notification] In mobile when menu is open it overlaps with the sidebar
* &#x20;\[Calendar] MonthView onMonth change&#x20;

### v2.1.2

#### Release

* Weekly Widget #2 - Table Widget
* Weekly Widget #3 - Pie Chart Widget
* Fixed : Datatable Pagination Styles
* Fixed : Using Boostrap dropdowns in tables
* Fixed : Calendar date selectiong gets slower with each selection
* Fixed : Force load all fonts via HTTP breaks SSL
* Fixed : Jquery in Rails
* Fixed : Datatable sorting\_disabled css


# Legacy Docs

We have achieved our old documentation for our legacy customers access to it. Below is list of versions with there corresponding documentation for Pages Admin

| Version | Documentation Link                                                                         |
| ------- | ------------------------------------------------------------------------------------------ |
| v2.0.0  | <http://pages.revox.io/dashboard/2.2.0/docs/>                                              |
| v2.2.0  | <http://pages.revox.io/dashboard/2.2.0/docs/>                                              |
| v2.3.0  | [http://pages.revox.io/dashboard/2.3.0/docs/](http://pages.revox.io/dashboard/2.2.0/docs/) |
| v3.0.0  | <http://pages.revox.io/dashboard/3.0.0/docs/>                                              |


# Grunt

In one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes. After you've configured

## **Installing Grunt**

To install grunt first you must have [NodeJs installed](http://nodejs.org/download/), NodeJS will have npm (node packaged modules) \
Run the following commands

* Install `grunt-cli` globally by running the following command `npm install -g grunt-cli`
* In you downloaded package from themeforest, navigate to `grunt/` directory and copy both `package.json` `gruntfile.js` to your project root. e.g : `getting_started` folder
* Navigate to the root directory of your project, then run `npm install`.

Once you have successfully setup now you can use pages Grunt CLI commands to automate your task

## **Commands**

**Grunt Build**

This will automatically minify your assets resources like css and js into a folder called `dist`

**Grunt Watch**

This will automatically compile the pages Less files on save

**Grunt Less**

This will compile the pages Less files on execute once<br>

Your are free to customize the Grunt task to your need by editing the gruntfile.js in the root directory of `getting_started`

## **Troubleshooting**

Should you encounter problems with installing dependencies or running Grunt commands, first delete the `/node_modules/`directory generated by npm. Then, rerun `npm install`.


# Gulp

Gulp is another famous build system supported by pages, gulp's use of streams and code-over-configuration makes for a simpler and more intuitive build.

## **Installing Gulp**

To install gulp first you must have [NodeJs installed](http://nodejs.org/download/), NodeJS will have npm (node packaged modules) \
Run the following commands

* Install `gulp` globally by running the following command `npm install -g gulp`
* In you downloaded package from themeforest, navigate to `gulp/` directory and copy both `package.json` `gulpfile.js` to your project root. e.g : `getting_started` folder
* Navigate to the root directory of your project or getting\_started folder, then run `npm install`.

Once you have successfully setup now you can use pages Gulp CLI commands to automate your task

## **Commands**

**gulp build**

This will automatically minify your assets resources like css and js into a folder called `dist`

**gulp watch**

This will automatically compile the pages Less files on save

**gulp less**

This will compile the pages Less files on execute once<br>

Your are free to customize the Gulp task to your need by editing the gulpfile.js

## **Troubleshooting**

Should you encounter problems with installing dependencies or running Gulps commands, first delete the `/node_modules/`directory generated by npm. Then, rerun `npm install`.


# Rails

This is a guide to install pages core and dependencies on Rails 6

## Required Libraries

| PLUGIN              | DESCRIPTION                                   | DEP. STATUS  |
| ------------------- | --------------------------------------------- | ------------ |
| jquery.js           | Core JS Library                               | **REQUIRED** |
| mordnerizer.js      | Browser Feature Detection                     | **REQUIRED** |
| bootstrap.js        | Core Framework                                | **REQUIRED** |
| pace.js             | Page Progress Loader                          | **OPTIONAL** |
| jquery-unviel.js    | Library Used for displaying retina images     | **OPTIONAL** |
| jquery.ioslist.js   | Used Chat list on the quickview               | **OPTIONAL** |
| jquery.actual.js    | Determine image dimentions                    | **OPTIONAL** |
| jquery.scrollbar.js | Scrollbar plugin used in sidebar and portlets | **OPTIONAL** |

Add the following dependencies in your **package.json**. Inside "**dependencies**" object

```javascript
"jquery": "^3.4.1",
"bootstrap":"4.3.1",
"modernizr":"3.10.0",
"pace-js":"1.0.2",
"jquery-unveil":"1.3.2",
"jquery.actual":"1.0.19",
"jquery.scrollbar":"0.2.11",
"popper.js":"^1.16.0",
"pages-core": "git+https://github.com/revoxltd/pages-core.git"
```

Run the command to install the dependencies to your project

```ruby
yarn install
```

Import the libraries to webpack by adding it to the following file\
**config/webpack/environment.js**&#x20;

```ruby
const { environment } = require('@rails/webpacker')

module.exports = environment

environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    Popper: ['popper.js', 'default']
  })
)
```

Update `config/webpacker.yml` to be able to resolve assets stored in the `app/assets` folder.

```ruby
resolved_paths: ['app/assets']
```

Import css/scss dependencies into our main webpack `application.scss` : in app/assets/stylesheets

```ruby
 @import "bootstrap/scss/bootstrap";
 @import "pages-core/dist/scss/pages"
```

Thats it! you can use the pages layouts mentioned below

{% content-ref url="/pages/-LDC2HxOSX6DIHvxviyq" %}
[Layouts](/introduction/layouts)
{% endcontent-ref %}