mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-09-21 21:40:49 +02:00
feat(buttons): add the buttons components
This commit is contained in:
Alexander Zhukov
parent
916289eb94
commit
9ebf30ac68
29 changed files with 854 additions and 66 deletions
|
|
@ -9,16 +9,13 @@ const routes: Routes = [
|
|||
{
|
||||
path: '',
|
||||
component: NgxEditorsComponent,
|
||||
children: [
|
||||
{
|
||||
children: [{
|
||||
path: 'tinymce',
|
||||
component: NgxTinyMCEComponent,
|
||||
},
|
||||
{
|
||||
}, {
|
||||
path: 'ckeditor',
|
||||
component: NgxCKEditorComponent,
|
||||
},
|
||||
],
|
||||
}],
|
||||
},
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
icon: 'ion ion-ios-home-outline',
|
||||
link: '/pages/dashboard',
|
||||
home: true,
|
||||
},
|
||||
{
|
||||
}, {
|
||||
title: 'FEATURES',
|
||||
group: true,
|
||||
},
|
||||
{
|
||||
}, {
|
||||
title: 'UI Features',
|
||||
icon: 'ion ion-ios-keypad-outline',
|
||||
link: '/pages/ui-features',
|
||||
},
|
||||
{
|
||||
children: List([{
|
||||
title: 'Buttons',
|
||||
link: '/pages/ui-features/buttons',
|
||||
}, {
|
||||
title: 'Grid',
|
||||
link: '/pages/ui-features/grid',
|
||||
}, {
|
||||
title: 'Icons',
|
||||
link: '/pages/ui-features/icons',
|
||||
}, {
|
||||
title: 'Modals',
|
||||
link: '/pages/ui-features/modals',
|
||||
}]),
|
||||
}, {
|
||||
title: 'Components',
|
||||
icon: 'ion ion-ios-gear-outline',
|
||||
link: '/pages/components',
|
||||
},
|
||||
{
|
||||
}, {
|
||||
title: 'Maps',
|
||||
icon: 'ion ion-ios-location-outline',
|
||||
link: '/pages/maps',
|
||||
},
|
||||
{
|
||||
}, {
|
||||
title: 'Charts',
|
||||
icon: 'ion ion-arrow-graph-up-right',
|
||||
link: '/pages/charts',
|
||||
},
|
||||
{
|
||||
}, {
|
||||
title: 'Editors',
|
||||
icon: 'ion ion-edit',
|
||||
link: '/pages/editors',
|
||||
children: List([
|
||||
{
|
||||
children: List([{
|
||||
title: 'TinyMCE',
|
||||
link: '/pages/editors/tinymce',
|
||||
},
|
||||
{
|
||||
}, {
|
||||
title: 'CKEditor',
|
||||
link: '/pages/editors/ckeditor',
|
||||
},
|
||||
]),
|
||||
},
|
||||
]);
|
||||
}]),
|
||||
}]);
|
||||
|
|
|
|||
|
|
@ -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 },
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
86
src/app/pages/ui-features/buttons/buttons.component.html
Normal file
86
src/app/pages/ui-features/buttons/buttons.component.html
Normal file
|
|
@ -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>
|
||||
128
src/app/pages/ui-features/buttons/buttons.component.scss
Normal file
128
src/app/pages/ui-features/buttons/buttons.component.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
14
src/app/pages/ui-features/buttons/buttons.component.ts
Normal file
14
src/app/pages/ui-features/buttons/buttons.component.ts
Normal file
|
|
@ -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() { }
|
||||
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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() { }
|
||||
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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() { }
|
||||
|
||||
}
|
||||
18
src/app/pages/ui-features/buttons/flat/flat.component.html
Normal file
18
src/app/pages/ui-features/buttons/flat/flat.component.html
Normal file
|
|
@ -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>
|
||||
13
src/app/pages/ui-features/buttons/flat/flat.component.ts
Normal file
13
src/app/pages/ui-features/buttons/flat/flat.component.ts
Normal file
|
|
@ -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() { }
|
||||
|
||||
}
|
||||
26
src/app/pages/ui-features/buttons/group/group.component.html
Normal file
26
src/app/pages/ui-features/buttons/group/group.component.html
Normal file
|
|
@ -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>
|
||||
13
src/app/pages/ui-features/buttons/group/group.component.ts
Normal file
13
src/app/pages/ui-features/buttons/group/group.component.ts
Normal file
|
|
@ -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() { }
|
||||
|
||||
}
|
||||
44
src/app/pages/ui-features/buttons/icon/icon.component.html
Normal file
44
src/app/pages/ui-features/buttons/icon/icon.component.html
Normal file
|
|
@ -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>
|
||||
13
src/app/pages/ui-features/buttons/icon/icon.component.ts
Normal file
13
src/app/pages/ui-features/buttons/icon/icon.component.ts
Normal file
|
|
@ -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() { }
|
||||
|
||||
}
|
||||
20
src/app/pages/ui-features/buttons/large/large.component.html
Normal file
20
src/app/pages/ui-features/buttons/large/large.component.html
Normal file
|
|
@ -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>
|
||||
13
src/app/pages/ui-features/buttons/large/large.component.ts
Normal file
13
src/app/pages/ui-features/buttons/large/large.component.ts
Normal file
|
|
@ -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() { }
|
||||
|
||||
}
|
||||
|
|
@ -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>
|
||||
13
src/app/pages/ui-features/buttons/raised/raised.component.ts
Normal file
13
src/app/pages/ui-features/buttons/raised/raised.component.ts
Normal file
|
|
@ -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() { }
|
||||
|
||||
}
|
||||
18
src/app/pages/ui-features/buttons/sized/sized.component.html
Normal file
18
src/app/pages/ui-features/buttons/sized/sized.component.html
Normal file
|
|
@ -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>
|
||||
13
src/app/pages/ui-features/buttons/sized/sized.component.ts
Normal file
13
src/app/pages/ui-features/buttons/sized/sized.component.ts
Normal file
|
|
@ -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() { }
|
||||
|
||||
}
|
||||
15
src/app/pages/ui-features/grid/grid.component.ts
Normal file
15
src/app/pages/ui-features/grid/grid.component.ts
Normal file
|
|
@ -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() { }
|
||||
|
||||
}
|
||||
15
src/app/pages/ui-features/icons/icons.component.ts
Normal file
15
src/app/pages/ui-features/icons/icons.component.ts
Normal file
|
|
@ -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() { }
|
||||
|
||||
}
|
||||
15
src/app/pages/ui-features/modals/modals.component.ts
Normal file
15
src/app/pages/ui-features/modals/modals.component.ts
Normal file
|
|
@ -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() { }
|
||||
|
||||
}
|
||||
58
src/app/pages/ui-features/ui-features-routing.module.ts
Normal file
58
src/app/pages/ui-features/ui-features-routing.module.ts
Normal file
|
|
@ -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,
|
||||
];
|
||||
|
|
@ -1,12 +1,10 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ui-features',
|
||||
selector: 'ngx-ui-features',
|
||||
template: `
|
||||
<p>
|
||||
ui-features works!
|
||||
</p>
|
||||
<router-outlet></router-outlet>
|
||||
`,
|
||||
})
|
||||
export class UiFeaturesComponent {
|
||||
export class NgxUiFeaturesComponent {
|
||||
}
|
||||
|
|
|
|||
16
src/app/pages/ui-features/ui-features.module.ts
Normal file
16
src/app/pages/ui-features/ui-features.module.ts
Normal file
|
|
@ -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 { }
|
||||
Loading…
Add table
Add a link
Reference in a new issue