feat(buttons): add the buttons components

src/app/pages/editors/editors-routing.module.ts

@@ -9,16 +9,13 @@ const routes: Routes = [
   {
     path: '',
     component: NgxEditorsComponent,
-    children: [
+    children: [{
-      {
+      path: 'tinymce',
-        path: 'tinymce',
+      component: NgxTinyMCEComponent,
-        component: NgxTinyMCEComponent,
+    }, {
-      },
+      path: 'ckeditor',
-      {
+      component: NgxCKEditorComponent,
-        path: 'ckeditor',
+    }],
-        component: NgxCKEditorComponent,
-      },
-    ],
   },
 ];
 

src/app/pages/pages-menu.ts

@@ -2,50 +2,52 @@ import { NgaMenuItem } from '@nga/theme';
 
 import { List } from 'immutable';
 
-export const menuItems: List<NgaMenuItem> = List([
+export const menuItems: List<NgaMenuItem> = List([{
-  {
+  title: 'Dashboard',
-    title: 'Dashboard',
+  icon: 'ion ion-ios-home-outline',
-    icon: 'ion ion-ios-home-outline',
+  link: '/pages/dashboard',
-    link: '/pages/dashboard',
+  home: true,
-    home: true,
+}, {
-  },
+  title: 'FEATURES',
-  {
+  group: true,
-    title: 'FEATURES',
+}, {
-    group: true,
+  title: 'UI Features',
-  },
+  icon: 'ion ion-ios-keypad-outline',
-  {
+  link: '/pages/ui-features',
-    title: 'UI Features',
+  children: List([{
-    icon: 'ion ion-ios-keypad-outline',
+    title: 'Buttons',
-    link: '/pages/ui-features',
+    link: '/pages/ui-features/buttons',
-  },
+  }, {
-  {
+    title: 'Grid',
-    title: 'Components',
+    link: '/pages/ui-features/grid',
-    icon: 'ion ion-ios-gear-outline',
+  }, {
-    link: '/pages/components',
+    title: 'Icons',
-  },
+    link: '/pages/ui-features/icons',
-  {
+  }, {
-    title: 'Maps',
+    title: 'Modals',
-    icon: 'ion ion-ios-location-outline',
+    link: '/pages/ui-features/modals',
-    link: '/pages/maps',
+  }]),
-  },
+}, {
-  {
+  title: 'Components',
-    title: 'Charts',
+  icon: 'ion ion-ios-gear-outline',
-    icon: 'ion ion-arrow-graph-up-right',
+  link: '/pages/components',
-    link: '/pages/charts',
+}, {
-  },
+  title: 'Maps',
-  {
+  icon: 'ion ion-ios-location-outline',
-    title: 'Editors',
+  link: '/pages/maps',
-    icon: 'ion ion-edit',
+}, {
-    link: '/pages/editors',
+  title: 'Charts',
-    children: List([
+  icon: 'ion ion-arrow-graph-up-right',
-      {
+  link: '/pages/charts',
-        title: 'TinyMCE',
+}, {
-        link: '/pages/editors/tinymce',
+  title: 'Editors',
-      },
+  icon: 'ion ion-edit',
-      {
+  link: '/pages/editors',
-        title: 'CKEditor',
+  children: List([{
-        link: '/pages/editors/ckeditor',
+    title: 'TinyMCE',
-      },
+    link: '/pages/editors/tinymce',
-    ]),
+  }, {
-  },
+    title: 'CKEditor',
-]);
+    link: '/pages/editors/ckeditor',
+  }]),
+}]);

src/app/pages/pages-routing.module.ts

@@ -3,7 +3,6 @@ import { NgModule } from '@angular/core';
 
 import { PagesComponent } from './pages.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
-import { UiFeaturesComponent } from './ui-features/ui-features.component';
 import { ComponentsComponent } from './components/components.component';
 import { MapsComponent } from './maps/maps.component';
 import { NgxChartsComponent } from './charts/charts.component';
@@ -15,7 +14,7 @@ const routes: Routes = [
     component: PagesComponent,
     children: [
       { path: 'dashboard', component: DashboardComponent },
-      { path: 'ui-features', component: UiFeaturesComponent },
+      { path: 'ui-features', loadChildren: './ui-features/ui-features.module#NgxUiFeaturesModule' },
       { path: 'components', component: ComponentsComponent },
       { path: 'maps', component: MapsComponent },
       { path: 'charts', component: NgxChartsComponent },

src/app/pages/pages.module.ts

@@ -8,7 +8,6 @@ import { PagesComponent } from './pages.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { PagesRoutingModule } from './pages-routing.module';
 import { ThemeModule } from '../@theme/theme.module';
-import { UiFeaturesComponent } from './ui-features/ui-features.component';
 import { MapsComponent } from './maps/maps.component';
 import { ComponentsComponent } from './components/components.component';
 import { NgxChartsComponent } from './charts/charts.component';
@@ -16,7 +15,6 @@ import { NgxChartsComponent } from './charts/charts.component';
 const PAGES_COMPONENTS = [
   PagesComponent,
   DashboardComponent,
-  UiFeaturesComponent,
   MapsComponent,
   ComponentsComponent,
   NgxChartsComponent,

src/app/pages/ui-features/buttons/buttons.component.html

@@ -0,0 +1,86 @@
+<div class="row">
+  <div class="col-3 col-md-3">
+    <nga-card>
+      <nga-card-header>
+        Flat buttons
+      </nga-card-header>
+      <nga-card-body>
+        <ngx-flat-buttons></ngx-flat-buttons>
+      </nga-card-body>
+    </nga-card>
+  </div>
+  <div class="col-3 col-md-3">
+    <nga-card>
+      <nga-card-header>
+        Raised buttons
+      </nga-card-header>
+      <nga-card-body>
+        <ngx-raised-buttons></ngx-raised-buttons>
+      </nga-card-body>
+    </nga-card>
+  </div>
+  <div class="col-3 col-md-3">
+    <nga-card>
+      <nga-card-header>
+        Different sizes
+      </nga-card-header>
+      <nga-card-body>
+        <ngx-sized-buttons></ngx-sized-buttons>
+      </nga-card-body>
+    </nga-card>
+  </div>
+  <div class="col-3 col-md-3">
+    <nga-card>
+      <nga-card-header>
+        Disabled
+      </nga-card-header>
+      <nga-card-body>
+        <ngx-disabled-buttons></ngx-disabled-buttons>
+      </nga-card-body>
+    </nga-card>
+  </div>
+</div>
+<div class="row">
+  <div class="col-6 col-md-6">
+    <nga-card>
+      <nga-card-header>
+        Icon buttons
+      </nga-card-header>
+      <nga-card-body>
+        <ngx-icon-buttons></ngx-icon-buttons>
+      </nga-card-body>
+    </nga-card>
+  </div>
+  <div class="col-6 col-md-6">
+    <nga-card>
+      <nga-card-header>
+        Button dropdowns
+      </nga-card-header>
+      <nga-card-body>
+        <ngx-dropdown-buttons></ngx-dropdown-buttons>
+      </nga-card-body>
+    </nga-card>
+  </div>
+</div>
+<div class="row">
+  <div class="col-6 col-md-6">
+    <nga-card>
+      <nga-card-header>
+        Large buttons
+      </nga-card-header>
+      <nga-card-body>
+        <ngx-large-buttons></ngx-large-buttons>
+      </nga-card-body>
+    </nga-card>
+  </div>
+  <div class="col-6 col-md-6">
+    <nga-card>
+      <nga-card-header>
+        Button groups
+      </nga-card-header>
+      <nga-card-body>
+        <ngx-group-buttons></ngx-group-buttons>
+      </nga-card-body>
+    </nga-card>
+  </div>
+</div>

src/app/pages/ui-features/buttons/buttons.component.scss

@@ -0,0 +1,128 @@
+:host {
+  display: block;
+  /deep/ {
+    .basic-btns {
+      padding-top: 8px;
+      margin-bottom: -8px;
+      h5 {
+        line-height: 35px;
+        font-size: 12px;
+        &.row-sm {
+          line-height: 30px;
+        }
+        &.row-xs {
+          line-height: 22px;
+        }
+      }
+      & {
+        .row {
+          padding-bottom: 4px;
+        }
+      }
+    }
+    .btns-row {
+      & {
+        div {
+          margin-bottom: 12px;
+        }
+      }
+    }
+    .btns-same-width-sm {
+      .btn {
+        width: 48px;
+      }
+    }
+    .btns-same-width-md {
+      .btn {
+        width: 79px;
+      }
+    }
+    .btns-same-width-lg {
+      .btn {
+        width: 112px;
+      }
+    }
+    ul.btn-list {
+      margin: 0 0 0 -18px;
+      padding: 0;
+      padding-top: 6px;
+      clear: both;
+      li {
+        margin: 0 0 12px 18px;
+        padding: 0;
+        list-style: none;
+        float: left;
+      }
+    }
+    .btn-group-wrapper {
+      margin-bottom: 12px;
+    }
+    $btn-icon-size: 34px;
+    .btn-icon {
+      width: $btn-icon-size;
+      height: $btn-icon-size;
+      line-height: $btn-icon-size;
+      padding: 0;
+      text-align: center;
+    }
+    .btn-group-example {
+      float: left;
+      margin-right: 30px;
+      margin-bottom: 12px;
+    }
+    .btn-toolbar-example {
+      float: left;
+    }
+    .progress-buttons-container {
+      text-align: center;
+      font-size: 16px;
+      span.button-title {
+        display: inline-block;
+        width: 100%;
+        line-height: 1;
+        font-size: 14px;
+        margin-bottom: 10px;
+        margin-top: 10px;
+      }
+      .row + .row {
+        margin-top: 30px;
+      }
+    }
+    .button-panel {
+      height: 315px;
+      .btn {
+        width: 150px;
+      }
+    }
+    .large-buttons-panel {
+      height: 202px;
+    }
+    .button-panel.df-size-button-panel {
+      .btn-xs {
+        width: 60px;
+      }
+      .btn-sm {
+        width: 90px;
+      }
+      .btn-mm {
+        width: 120px;
+      }
+      .btn-md {
+        width: 150px;
+      }
+      .btn-xm {
+        width: 175px;
+      }
+      .btn-lg {
+        width: 200px;
+      }
+    }
+    .button-wrapper {
+      text-align: center;
+      margin: 5px 0;
+    }
+    .btn-group.flex-dropdown {
+      display: flex;
+    }
+  }
+}

src/app/pages/ui-features/buttons/buttons.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'ngx-buttons',
+  styleUrls: ['./buttons.component.scss'],
+  templateUrl: './buttons.component.html',
+})
+export class NgxButtonsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() { }
+
+}

src/app/pages/ui-features/buttons/disabled/disabled.component.html

@@ -0,0 +1,18 @@
+<div class="button-wrapper">
+  <button type="button" class="btn btn-default" disabled="disabled">Default</button>
+</div>
+<div class="button-wrapper">
+  <button type="button" class="btn btn-primary" disabled="disabled">Primary</button>
+</div>
+<div class="button-wrapper">
+  <button type="button" class="btn btn-success" disabled="disabled">Success</button>
+</div>
+<div class="button-wrapper">
+  <button type="button" class="btn btn-info" disabled="disabled">Info</button>
+</div>
+<div class="button-wrapper">
+  <button type="button" class="btn btn-warning" disabled="disabled">Warning</button>
+</div>
+<div class="button-wrapper">
+  <button type="button" class="btn btn-danger" disabled="disabled">Danger</button>
+</div>

src/app/pages/ui-features/buttons/disabled/disabled.component.ts

@@ -0,0 +1,13 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'ngx-disabled-buttons',
+  templateUrl: './disabled.component.html',
+})
+export class NgxDisabledButtonsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() { }
+
+}

src/app/pages/ui-features/buttons/dropdown/dropdown.component.html

@@ -0,0 +1,181 @@
+<div class="row btns-row">
+  <div class="col-sm-4 col-6">
+    <div class="btn-group" ngbDropdown>
+      <button type="button" class="btn btn-primary" ngbDropdownToggle>
+        Primary
+      </button>
+      <ul class="dropdown-menu">
+        <li class="dropdown-item"><a href="#">Action</a></li>
+        <li class="dropdown-item"><a href="#">Another action</a></li>
+        <li class="dropdown-item"><a href="#">Something else here</a></li>
+        <li class="dropdown-divider"></li>
+        <li class="dropdown-item"><a href="#">Separated link</a></li>
+      </ul>
+    </div>
+  </div>
+  <div class="col-sm-4 col-6">
+    <div class="btn-group" ngbDropdown>
+      <button type="button" class="btn btn-success" ngbDropdownToggle>
+        Success
+      </button>
+      <ul class="dropdown-menu">
+        <li class="dropdown-item"><a href="#">Action</a></li>
+        <li class="dropdown-item"><a href="#">Another action</a></li>
+        <li class="dropdown-item"><a href="#">Something else here</a></li>
+        <li class="dropdown-divider"></li>
+        <li class="dropdown-item"><a href="#">Separated link</a></li>
+      </ul>
+    </div>
+  </div>
+  <div class="col-sm-4 col-6">
+    <div class="btn-group" ngbDropdown>
+      <button type="button" class="btn btn-info" ngbDropdownToggle>
+        Info
+      </button>
+      <ul class="dropdown-menu">
+        <li class="dropdown-item"><a href="#">Action</a></li>
+        <li class="dropdown-item"><a href="#">Another action</a></li>
+        <li class="dropdown-item"><a href="#">Something else here</a></li>
+        <li class="dropdown-divider"></li>
+        <li class="dropdown-item"><a href="#">Separated link</a></li>
+      </ul>
+    </div>
+  </div>
+  <div class="col-sm-4 col-6">
+    <div class="btn-group" ngbDropdown>
+      <button type="button" class="btn btn-default" ngbDropdownToggle>
+        Default
+      </button>
+      <ul class="dropdown-menu">
+        <li class="dropdown-item"><a href="#">Action</a></li>
+        <li class="dropdown-item"><a href="#">Another action</a></li>
+        <li class="dropdown-item"><a href="#">Something else here</a></li>
+        <li class="dropdown-divider"></li>
+        <li class="dropdown-item"><a href="#">Separated link</a></li>
+      </ul>
+    </div>
+  </div>
+  <div class="col-sm-4 col-6">
+    <div class="btn-group" ngbDropdown>
+      <button type="button" class="btn btn-warning" ngbDropdownToggle>
+        Warning
+      </button>
+      <ul class="dropdown-menu">
+        <li class="dropdown-item"><a href="#">Action</a></li>
+        <li class="dropdown-item"><a href="#">Another action</a></li>
+        <li class="dropdown-item"><a href="#">Something else here</a></li>
+        <li class="dropdown-divider"></li>
+        <li class="dropdown-item"><a href="#">Separated link</a></li>
+      </ul>
+    </div>
+  </div>
+  <div class="col-sm-4 col-6">
+    <div class="btn-group" ngbDropdown>
+      <button type="button" class="btn btn-danger" ngbDropdownToggle>
+        Danger
+      </button>
+      <ul class="dropdown-menu">
+        <li class="dropdown-item"><a href="#">Action</a></li>
+        <li class="dropdown-item"><a href="#">Another action</a></li>
+        <li class="dropdown-item"><a href="#">Something else here</a></li>
+        <li class="dropdown-divider"></li>
+        <li class="dropdown-item"><a href="#">Separated link</a></li>
+      </ul>
+    </div>
+  </div>
+</div>
+
+<h5 class="panel-subtitle">Split button dropdowns</h5>
+
+<div class="row btns-row">
+  <div class="col-sm-4 col-6 col-lg-4 col-md-6">
+    <div class="btn-group flex-dropdown" ngbDropdown>
+      <button type="button" class="btn btn-primary">Primary</button>
+      <button type="button" class="btn btn-primary" ngbDropdownToggle>
+        <span class="sr-only">Toggle Dropdown</span>
+      </button>
+      <ul class="dropdown-menu">
+        <li class="dropdown-item"><a href="#">Action</a></li>
+        <li class="dropdown-item"><a href="#">Another action</a></li>
+        <li class="dropdown-item"><a href="#">Something else here</a></li>
+        <li class="dropdown-divider"></li>
+        <li class="dropdown-item"><a href="#">Separated link</a></li>
+      </ul>
+    </div>
+  </div>
+  <div class="col-sm-4 col-6 col-lg-4 col-md-6">
+    <div class="btn-group flex-dropdown" ngbDropdown>
+      <button type="button" class="btn btn-success">Success</button>
+      <button type="button" class="btn btn-success" ngbDropdownToggle>
+        <span class="sr-only">Toggle Dropdown</span>
+      </button>
+      <ul class="dropdown-menu">
+        <li class="dropdown-item"><a href="#">Action</a></li>
+        <li class="dropdown-item"><a href="#">Another action</a></li>
+        <li class="dropdown-item"><a href="#">Something else here</a></li>
+        <li class="dropdown-divider"></li>
+        <li class="dropdown-item"><a href="#">Separated link</a></li>
+      </ul>
+    </div>
+  </div>
+  <div class="col-sm-4 col-6 col-lg-4 col-md-6">
+    <div class="btn-group flex-dropdown" ngbDropdown>
+      <button type="button" class="btn btn-info">Info</button>
+      <button type="button" class="btn btn-info" ngbDropdownToggle>
+        <span class="sr-only">Toggle Dropdown</span>
+      </button>
+      <ul class="dropdown-menu">
+        <li class="dropdown-item"><a href="#">Action</a></li>
+        <li class="dropdown-item"><a href="#">Another action</a></li>
+        <li class="dropdown-item"><a href="#">Something else here</a></li>
+        <li class="dropdown-divider"></li>
+        <li class="dropdown-item"><a href="#">Separated link</a></li>
+      </ul>
+    </div>
+  </div>
+  <div class="col-sm-4 col-6 col-lg-4 col-md-6">
+    <div class="btn-group flex-dropdown" ngbDropdown>
+      <button type="button" class="btn btn-default">Default</button>
+      <button type="button" class="btn btn-default" ngbDropdownToggle>
+        <span class="sr-only">Toggle Dropdown</span>
+      </button>
+      <ul class="dropdown-menu">
+        <li class="dropdown-item"><a href="#">Action</a></li>
+        <li class="dropdown-item"><a href="#">Another action</a></li>
+        <li class="dropdown-item"><a href="#">Something else here</a></li>
+        <li class="dropdown-divider"></li>
+        <li class="dropdown-item"><a href="#">Separated link</a></li>
+      </ul>
+    </div>
+  </div>
+  <div class="col-sm-4 col-6 col-lg-4 col-md-6">
+    <div class="btn-group flex-dropdown" ngbDropdown>
+      <button type="button" class="btn btn-warning">Warning</button>
+      <button type="button" class="btn btn-warning" ngbDropdownToggle>
+        <span class="sr-only">Toggle Dropdown</span>
+      </button>
+      <ul class="dropdown-menu">
+        <li class="dropdown-item"><a href="#">Action</a></li>
+        <li class="dropdown-item"><a href="#">Another action</a></li>
+        <li class="dropdown-item"><a href="#">Something else here</a></li>
+        <li class="dropdown-divider"></li>
+        <li class="dropdown-item"><a href="#">Separated link</a></li>
+      </ul>
+    </div>
+  </div>
+  <div class="col-sm-4 col-6 col-lg-4 col-md-6">
+    <div class="btn-group flex-dropdown" ngbDropdown>
+      <button type="button" class="btn btn-danger">Danger</button>
+      <button type="button" class="btn btn-danger" ngbDropdownToggle>
+        <span class="sr-only">Toggle Dropdown</span>
+      </button>
+      <ul class="dropdown-menu">
+        <li class="dropdown-item"><a href="#">Action</a></li>
+        <li class="dropdown-item"><a href="#">Another action</a></li>
+        <li class="dropdown-item"><a href="#">Something else here</a></li>
+        <li class="dropdown-divider"></li>
+        <li class="dropdown-item"><a href="#">Separated link</a></li>
+      </ul>
+    </div>
+  </div>
+</div>

src/app/pages/ui-features/buttons/dropdown/dropdown.component.ts

@@ -0,0 +1,13 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'ngx-dropdown-buttons',
+  templateUrl: './dropdown.component.html',
+})
+export class NgxDropdownButtonsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() { }
+
+}

src/app/pages/ui-features/buttons/flat/flat.component.html

@@ -0,0 +1,18 @@
+<div class="button-wrapper">
+  <button type="button" class="btn btn-default">Default</button>
+</div>
+<div class="button-wrapper">
+  <button type="button" class="btn btn-primary">Primary</button>
+</div>
+<div class="button-wrapper">
+  <button type="button" class="btn btn-success">Success</button>
+</div>
+<div class="button-wrapper">
+  <button type="button" class="btn btn-info">Info</button>
+</div>
+<div class="button-wrapper">
+  <button type="button" class="btn btn-warning">Warning</button>
+</div>
+<div class="button-wrapper">
+  <button type="button" class="btn btn-danger">Danger</button>
+</div>

src/app/pages/ui-features/buttons/flat/flat.component.ts

@@ -0,0 +1,13 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'ngx-flat-buttons',
+  templateUrl: './flat.component.html',
+})
+export class NgxFlatButtonsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() { }
+
+}

src/app/pages/ui-features/buttons/group/group.component.html

@@ -0,0 +1,26 @@
+<div class="btn-group-example">
+  <div class="btn-group" role="group" aria-label="Basic example">
+    <button type="button" class="btn btn-danger">Left</button>
+    <button type="button" class="btn btn-danger">Middle</button>
+    <button type="button" class="btn btn-danger">Right</button>
+  </div>
+</div>
+
+<div class="btn-toolbar-example">
+  <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
+    <div class="btn-group" role="group" aria-label="First group">
+      <button type="button" class="btn btn-primary">1</button>
+      <button type="button" class="btn btn-primary">2</button>
+      <button type="button" class="btn btn-primary">3</button>
+      <button type="button" class="btn btn-primary">4</button>
+    </div>
+    <div class="btn-group" role="group" aria-label="Second group">
+      <button type="button" class="btn btn-primary">5</button>
+      <button type="button" class="btn btn-primary">6</button>
+      <button type="button" class="btn btn-primary">7</button>
+    </div>
+    <div class="btn-group" role="group" aria-label="Third group">
+      <button type="button" class="btn btn-primary">8</button>
+    </div>
+  </div>
+</div>

src/app/pages/ui-features/buttons/group/group.component.ts

@@ -0,0 +1,13 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'ngx-group-buttons',
+  templateUrl: './group.component.html',
+})
+export class NgxGroupButtonsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() { }
+
+}

src/app/pages/ui-features/buttons/icon/icon.component.html

@@ -0,0 +1,44 @@
+<ul class="btn-list clearfix">
+  <li>
+    <button type="button" class="btn btn-primary btn-icon"><i class="ion-android-download"></i></button>
+  </li>
+  <li>
+    <button type="button" class="btn btn-default btn-icon"><i class="ion-stats-bars"></i></button>
+  </li>
+  <li>
+    <button type="button" class="btn btn-success btn-icon"><i class="ion-android-checkmark-circle"></i></button>
+  </li>
+  <li>
+    <button type="button" class="btn btn-info btn-icon"><i class="ion-information"></i></button>
+  </li>
+  <li>
+    <button type="button" class="btn btn-warning btn-icon"><i class="ion-android-warning"></i></button>
+  </li>
+  <li>
+    <button type="button" class="btn btn-danger btn-icon"><i class="ion-nuclear"></i></button>
+  </li>
+</ul>
+
+<h5 class="panel-subtitle">Buttons with icons</h5>
+
+<ul class="btn-list clearfix">
+  <li>
+    <button type="button" class="btn btn-primary btn-with-icon"><i class="ion-android-download"></i>Primary</button>
+  </li>
+  <li>
+    <button type="button" class="btn btn-default btn-with-icon"><i class="ion-stats-bars"></i>Default</button>
+  </li>
+  <li>
+    <button type="button" class="btn btn-success btn-with-icon"><i class="ion-android-checkmark-circle"></i>Success
+    </button>
+  </li>
+  <li>
+    <button type="button" class="btn btn-info btn-with-icon"><i class="ion-information"></i>Info</button>
+  </li>
+  <li>
+    <button type="button" class="btn btn-warning btn-with-icon"><i class="ion-android-warning"></i>Warning</button>
+  </li>
+  <li>
+    <button type="button" class="btn btn-danger btn-with-icon"><i class="ion-nuclear"></i>Danger</button>
+  </li>
+</ul>

src/app/pages/ui-features/buttons/icon/icon.component.ts

@@ -0,0 +1,13 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'ngx-icon-buttons',
+  templateUrl: './icon.component.html',
+})
+export class NgxIconButtonsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() { }
+
+}

src/app/pages/ui-features/buttons/large/large.component.html

@@ -0,0 +1,20 @@
+<div class="row btns-row btns-same-width-lg">
+  <div class="col-sm-4 col-6">
+    <button type="button" class="btn btn-primary btn-lg">Primary</button>
+  </div>
+  <div class="col-sm-4 col-6">
+    <button type="button" class="btn btn-success btn-lg">Success</button>
+  </div>
+  <div class="col-sm-4 col-6">
+    <button type="button" class="btn btn-info btn-lg">Info</button>
+  </div>
+  <div class="col-sm-4 col-6">
+    <button type="button" class="btn btn-default btn-lg">Default</button>
+  </div>
+  <div class="col-sm-4 col-6">
+    <button type="button" class="btn btn-warning btn-lg">Warning</button>
+  </div>
+  <div class="col-sm-4 col-6">
+    <button type="button" class="btn btn-danger btn-lg">Danger</button>
+  </div>
+</div>

src/app/pages/ui-features/buttons/large/large.component.ts

@@ -0,0 +1,13 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'ngx-large-buttons',
+  templateUrl: './large.component.html',
+})
+export class NgxLargeButtonsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() { }
+
+}

src/app/pages/ui-features/buttons/raised/raised.component.html

@@ -0,0 +1,18 @@
+<div class="button-wrapper">
+  <button type="button" class="btn btn-default btn-raised">Default</button>
+</div>
+<div class="button-wrapper">
+  <button type="button" class="btn btn-primary btn-raised">Primary</button>
+</div>
+<div class="button-wrapper">
+  <button type="button" class="btn btn-success btn-raised">Success</button>
+</div>
+<div class="button-wrapper">
+  <button type="button" class="btn btn-info btn-raised">Info</button>
+</div>
+<div class="button-wrapper">
+  <button type="button" class="btn btn-warning btn-raised">Warning</button>
+</div>
+<div class="button-wrapper">
+  <button type="button" class="btn btn-danger btn-raised">Danger</button>
+</div>

src/app/pages/ui-features/buttons/raised/raised.component.ts

@@ -0,0 +1,13 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'ngx-raised-buttons',
+  templateUrl: './raised.component.html',
+})
+export class NgxRaisedButtonsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() { }
+
+}

src/app/pages/ui-features/buttons/sized/sized.component.html

@@ -0,0 +1,18 @@
+<div class="button-wrapper">
+  <button type="button" class="btn btn-default  btn-xs">Default</button>
+</div>
+<div class="button-wrapper">
+  <button type="button" class="btn btn-primary  btn-sm">Primary</button>
+</div>
+<div class="button-wrapper">
+  <button type="button" class="btn btn-success btn-mm">Success</button>
+</div>
+<div class="button-wrapper">
+  <button type="button" class="btn btn-info btn-md">Info</button>
+</div>
+<div class="button-wrapper">
+  <button type="button" class="btn btn-warning btn-xm">Warning</button>
+</div>
+<div class="button-wrapper">
+  <button type="button" class="btn btn-danger btn-lg">Danger</button>
+</div>

src/app/pages/ui-features/buttons/sized/sized.component.ts

@@ -0,0 +1,13 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'ngx-sized-buttons',
+  templateUrl: './sized.component.html',
+})
+export class NgxSizedButtonsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() { }
+
+}

src/app/pages/ui-features/grid/grid.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'ngx-grid',
+  template: `
+    <p>grid works!</p>
+  `,
+})
+export class NgxGridComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() { }
+
+}

src/app/pages/ui-features/icons/icons.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'ngx-icons',
+  template: `
+    <p>icons works!</p>
+  `,
+})
+export class NgxIconsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() { }
+
+}

src/app/pages/ui-features/modals/modals.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'ngx-modals',
+  template: `
+    <p>modals works!</p>
+  `,
+})
+export class NgxModalsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() { }
+
+}

src/app/pages/ui-features/ui-features-routing.module.ts

@@ -0,0 +1,58 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { NgxUiFeaturesComponent } from './ui-features.component';
+import { NgxButtonsComponent } from './buttons/buttons.component';
+import { NgxGridComponent } from './grid/grid.component';
+import { NgxIconsComponent } from './icons/icons.component';
+import { NgxModalsComponent } from './modals/modals.component';
+import { NgxFlatButtonsComponent } from './buttons/flat/flat.component';
+import { NgxRaisedButtonsComponent } from './buttons/raised/raised.component';
+import { NgxSizedButtonsComponent } from './buttons/sized/sized.component';
+import { NgxDisabledButtonsComponent } from './buttons/disabled/disabled.component';
+import { NgxIconButtonsComponent } from './buttons/icon/icon.component';
+import { NgxDropdownButtonsComponent } from './buttons/dropdown/dropdown.component';
+import { NgxLargeButtonsComponent } from './buttons/large/large.component';
+import { NgxGroupButtonsComponent } from './buttons/group/group.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: NgxUiFeaturesComponent,
+    children: [{
+      path: 'buttons',
+      component: NgxButtonsComponent,
+    }, {
+      path: 'grid',
+      component: NgxGridComponent,
+    }, {
+      path: 'icons',
+      component: NgxIconsComponent,
+    }, {
+      path: 'modals',
+      component: NgxModalsComponent,
+    }],
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class NgxUiFeaturesRoutingModule { }
+
+export const routedComponents = [
+  NgxUiFeaturesComponent,
+  NgxButtonsComponent,
+  NgxGridComponent,
+  NgxIconsComponent,
+  NgxModalsComponent,
+  NgxFlatButtonsComponent,
+  NgxRaisedButtonsComponent,
+  NgxSizedButtonsComponent,
+  NgxDisabledButtonsComponent,
+  NgxIconButtonsComponent,
+  NgxDropdownButtonsComponent,
+  NgxLargeButtonsComponent,
+  NgxGroupButtonsComponent,
+];

src/app/pages/ui-features/ui-features.component.ts

@@ -1,12 +1,10 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'ui-features',
+  selector: 'ngx-ui-features',
   template: `
-    <p>
+    <router-outlet></router-outlet>
-      ui-features works!
-    </p>
   `,
 })
-export class UiFeaturesComponent {
+export class NgxUiFeaturesComponent {
 }

src/app/pages/ui-features/ui-features.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+
+import { NgxSharedModule } from '../../@shared/shared.module';
+
+import { NgxUiFeaturesRoutingModule, routedComponents } from './ui-features-routing.module';
+
+@NgModule({
+  imports: [
+    NgxSharedModule,
+    NgxUiFeaturesRoutingModule,
+  ],
+  declarations: [
+    ...routedComponents,
+  ],
+})
+export class NgxUiFeaturesModule { }