mirror of
https://github.com/akveo/ngx-admin.git
synced 2026-03-03 20:30:15 +01:00
feat: add a bunch of new Nebular demos (#1911)
This commit is contained in:
Denis Strigo
GitHub
parent
c594a5a4c5
commit
3f1f4c558b
185 changed files with 5176 additions and 422 deletions
|
|
@ -1,17 +0,0 @@
|
|||
<nb-card>
|
||||
<nb-card-body>
|
||||
<div class="action-groups-header">
|
||||
Action Groups
|
||||
</div>
|
||||
<nb-actions size="medium">
|
||||
<nb-action icon="nb-menu"></nb-action>
|
||||
<nb-action icon="nb-search"></nb-action>
|
||||
<nb-action icon="nb-email"></nb-action>
|
||||
<nb-action disabled icon="nb-notifications"></nb-action>
|
||||
<nb-action>
|
||||
<nb-user name="Han Solo"></nb-user>
|
||||
</nb-action>
|
||||
<nb-action icon="nb-gear"></nb-action>
|
||||
</nb-actions>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
@import '~@nebular/theme/components/card/card.component.theme';
|
||||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
|
||||
nb-card-body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.action-groups-header {
|
||||
flex-basis: 20%;
|
||||
|
||||
color: nb-theme(card-header-fg-heading);
|
||||
font-family: nb-theme(card-header-font-family);
|
||||
font-size: nb-theme(card-header-font-size);
|
||||
font-weight: nb-theme(card-header-font-weight);
|
||||
}
|
||||
|
||||
.nb-actions {
|
||||
flex-basis: 80%;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
nb-card-body {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 0.75rem;
|
||||
|
||||
.action-groups-header {
|
||||
@include nb-ltr(margin, 0 0 0.5rem 0.25rem);
|
||||
@include nb-rtl(margin, 0 0.25rem 0.5rem 0);
|
||||
}
|
||||
}
|
||||
|
||||
nb-action {
|
||||
padding: 0 0.5rem;
|
||||
/deep/ .control-icon {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
}
|
||||
nb-user /deep/ {
|
||||
.user-container {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.user-picture {
|
||||
height: 1.75rem;
|
||||
width: 1.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
|
||||
nb-action {
|
||||
padding: 0 0.375rem;
|
||||
/deep/ .control-icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
nb-user /deep/ {
|
||||
.user-container {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.user-picture {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
}
|
||||
nb-card-body {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-action-groups',
|
||||
styleUrls: ['./action-groups.component.scss'],
|
||||
templateUrl: './action-groups.component.html',
|
||||
})
|
||||
export class ActionGroupsComponent {
|
||||
}
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
<nb-card>
|
||||
<nb-card-header>Block Level Buttons</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="row block-level-buttons">
|
||||
<div class="col-md-12">
|
||||
<div class="btn-group btn-group-full-width" role="group">
|
||||
<button type="button" class="btn btn-primary btn-group-icon btn-group-divider btn-fixed">
|
||||
<i class="nb-home"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary">Icon Block Button</button>
|
||||
</div>
|
||||
<button type="button" class="btn btn-outline-primary btn-block">Block Button</button>
|
||||
</div>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-block-level-buttons',
|
||||
templateUrl: './block-level-buttons.component.html',
|
||||
})
|
||||
export class BlockLevelButtonsComponent {
|
||||
}
|
||||
|
|
@ -1,144 +0,0 @@
|
|||
<nb-card>
|
||||
<nb-card-header>Button Groups</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="example-container toggle-types">
|
||||
<div class="container-title">Toggle Types</div>
|
||||
<div [(ngModel)]="radioModel" ngbRadioGroup
|
||||
class="btn-group btn-group-toggle btn-outline-toggle-group btn-group-full-width btn-toggle-radio-group">
|
||||
<label ngbButtonLabel class="btn btn-outline-primary">
|
||||
<input ngbButton type="radio" value="left"> Left
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-outline-primary">
|
||||
<input ngbButton type="radio" value="middle"> Middle
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-outline-primary">
|
||||
<input ngbButton type="radio" value="right"> Right
|
||||
</label>
|
||||
</div>
|
||||
<div class="btn-group btn-group-toggle btn-group-full-width" data-toggle="buttons">
|
||||
<label ngbButtonLabel class="btn btn-primary" [class.active]="checkboxModel.left">
|
||||
<input ngbButton type="checkbox" [(ngModel)]="checkboxModel.left"> Left
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-primary" [class.active]="checkboxModel.middle">
|
||||
<input ngbButton type="checkbox" [(ngModel)]="checkboxModel.middle"> Middle
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-primary" [class.active]="checkboxModel.right">
|
||||
<input ngbButton type="checkbox" [(ngModel)]="checkboxModel.right"> Right
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="example-container toolbars-container">
|
||||
<div class="pagination-container">
|
||||
<div class="container-title">Pagination</div>
|
||||
<div class="btn-group btn-group-toggle btn-outline-toggle-group" data-toggle="buttons"
|
||||
[(ngModel)]="paginationModel" ngbRadioGroup>
|
||||
<label ngbButtonLabel class="btn btn-outline-success">
|
||||
<input ngbButton type="radio" [value]="1"> 1
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-outline-success">
|
||||
<input ngbButton type="radio" [value]="2"> 2
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-outline-success">
|
||||
<input ngbButton type="radio" [value]="3"> 3
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-outline-success">
|
||||
<input ngbButton type="radio" [value]="4"> 4
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-outline-success">
|
||||
<input ngbButton type="radio" [value]="5"> 5
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="icon-toolbar-container">
|
||||
<div class="container-title">Icon Toolbar</div>
|
||||
<div class="btn-group btn-group-toggle" data-toggle="buttons">
|
||||
<label ngbButtonLabel class="btn btn-success" [class.active]="iconToolbarModel.one">
|
||||
<input ngbButton type="checkbox" [(ngModel)]="iconToolbarModel.one"> 1
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-success" [class.active]="iconToolbarModel.two">
|
||||
<input ngbButton type="checkbox" [(ngModel)]="iconToolbarModel.two"> 2
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-success" [class.active]="iconToolbarModel.three">
|
||||
<input ngbButton type="checkbox" [(ngModel)]="iconToolbarModel.three"> 3
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-success" [class.active]="iconToolbarModel.four">
|
||||
<input ngbButton type="checkbox" [(ngModel)]="iconToolbarModel.four"> 4
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-success" [class.active]="iconToolbarModel.five">
|
||||
<input ngbButton type="checkbox" [(ngModel)]="iconToolbarModel.five"> 5
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="example-container">
|
||||
<div class="container-title divided-button-group">Divided Button Group</div>
|
||||
<div class="btn-group btn-group-toggle btn-divided-group btn-outline-divided-group btn-group-full-width btn-divided-checkbox-group "
|
||||
data-toggle="buttons">
|
||||
<label ngbButtonLabel class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.monday">
|
||||
<input ngbButton type="checkbox" [(ngModel)]="dividedCheckboxModel.monday"> <i
|
||||
class="nb-arrow-thin-down"></i>
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.tuesday">
|
||||
<input ngbButton type="checkbox" [(ngModel)]="dividedCheckboxModel.tuesday"> <i
|
||||
class="nb-arrow-thin-up"></i>
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.wednesday">
|
||||
<input ngbButton type="checkbox" [(ngModel)]="dividedCheckboxModel.wednesday"> <i class="nb-arrow-thin-left"></i>
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.thursday">
|
||||
<input ngbButton type="checkbox" [(ngModel)]="dividedCheckboxModel.thursday"> <i
|
||||
class="nb-arrow-thin-right"></i>
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.friday">
|
||||
<input ngbButton type="checkbox" [(ngModel)]="dividedCheckboxModel.friday"> <i class="nb-arrow-left"></i>
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.saturday">
|
||||
<input ngbButton type="checkbox" [(ngModel)]="dividedCheckboxModel.saturday"> <i
|
||||
class="nb-arrow-right"></i>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="example-container">
|
||||
<div class="container-title">Divided Button Group</div>
|
||||
<div class="row">
|
||||
<div [(ngModel)]="dividedButtonGroupOne" ngbRadioGroup
|
||||
class="btn-group btn-group-toggle btn-divided-group btn-outline-divided-group btn-group-full-width col-md-12">
|
||||
<label ngbButtonLabel class="btn btn-outline-primary">
|
||||
<input ngbButton type="radio" value="left"> Left
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-outline-primary">
|
||||
<input ngbButton type="radio" value="middle"> Middle
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-outline-primary">
|
||||
<input ngbButton type="radio" value="right"> Right
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group btn-group-toggle btn-divided-group btn-group-full-width" data-toggle="buttons">
|
||||
<label ngbButtonLabel
|
||||
class="btn btn-primary"
|
||||
[class.active]="dividedButtonGroupTwo.left"
|
||||
[class.focus]="dividedButtonGroupTwo.left">
|
||||
<input ngbButton type="checkbox" [(ngModel)]="dividedButtonGroupTwo.left"> Left
|
||||
</label>
|
||||
<label ngbButtonLabel
|
||||
class="btn btn-primary"
|
||||
[class.active]="dividedButtonGroupTwo.middle"
|
||||
[class.focus]="dividedButtonGroupTwo.middle">
|
||||
<input ngbButton type="checkbox" [(ngModel)]="dividedButtonGroupTwo.middle"> Middle
|
||||
</label>
|
||||
<label ngbButtonLabel
|
||||
class="btn btn-primary"
|
||||
[class.active]="dividedButtonGroupTwo.right"
|
||||
[class.focus]="dividedButtonGroupTwo.right">
|
||||
<input ngbButton type="checkbox" [(ngModel)]="dividedButtonGroupTwo.right"> Right
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
|
||||
.toolbars-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
@include nb-ltr(margin-right, 1rem);
|
||||
@include nb-rtl(margin-left, 1rem);
|
||||
|
||||
.btn-group > .btn {
|
||||
padding-left: 1.125rem;
|
||||
padding-right: 1.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-toolbar-container {
|
||||
.btn-group > .btn {
|
||||
padding-left: 1.125rem;
|
||||
padding-right: 1.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-types {
|
||||
.btn-toggle-radio-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.divided-button-group {
|
||||
.btn-divided-checkbox-group {
|
||||
margin-bottom: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
.example-container:not(:last-child) {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.example-container > div {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.example-container > .btn-divided-checkbox-group {
|
||||
flex-wrap: wrap;
|
||||
|
||||
> label {
|
||||
flex-basis: 10%;
|
||||
@include nb-ltr(margin, 0 0.25rem 0.5rem 0);
|
||||
@include nb-rtl(margin, 0 0 0.5rem 0.25rem);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
.btn {
|
||||
padding: 0.75rem 0.7rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-button-groups',
|
||||
styleUrls: ['./button-groups.component.scss'],
|
||||
templateUrl: './button-groups.component.html',
|
||||
})
|
||||
export class ButtonGroupsComponent {
|
||||
|
||||
radioModel = 'left';
|
||||
|
||||
checkboxModel = {
|
||||
left: false,
|
||||
middle: false,
|
||||
right: false,
|
||||
};
|
||||
|
||||
dividedCheckboxModel = {
|
||||
monday: true,
|
||||
tuesday: true,
|
||||
wednesday: false,
|
||||
thursday: false,
|
||||
friday: false,
|
||||
saturday: false,
|
||||
};
|
||||
|
||||
paginationModel = 1;
|
||||
|
||||
iconToolbarModel = {
|
||||
one: false,
|
||||
two: false,
|
||||
three: true,
|
||||
four: false,
|
||||
five: false,
|
||||
};
|
||||
|
||||
dividedButtonGroupOne = 'left';
|
||||
|
||||
dividedButtonGroupTwo = {
|
||||
left: false,
|
||||
middle: false,
|
||||
right: false,
|
||||
};
|
||||
}
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<ngx-hero-buttons></ngx-hero-buttons>
|
||||
</div>
|
||||
<div class="col-md-12 col-lg-12 col-xxxl-6">
|
||||
<ngx-shape-buttons></ngx-shape-buttons>
|
||||
<ngx-action-groups></ngx-action-groups>
|
||||
<ngx-labeled-actions-group></ngx-labeled-actions-group>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-5">
|
||||
<ngx-dropdown-buttons></ngx-dropdown-buttons>
|
||||
<ngx-icon-buttons></ngx-icon-buttons>
|
||||
</div>
|
||||
<div class="col-lg-7">
|
||||
<ngx-button-groups></ngx-button-groups>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12 col-lg-12 col-xxxl-6">
|
||||
<ngx-size-buttons></ngx-size-buttons>
|
||||
<ngx-default-buttons></ngx-default-buttons>
|
||||
<ngx-block-level-buttons></ngx-block-level-buttons>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,103 +0,0 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
@import '~@nebular/bootstrap/styles/buttons';
|
||||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
/deep/ {
|
||||
$button-size: 50px;
|
||||
|
||||
.container-title {
|
||||
color: nb-theme(color-fg);
|
||||
font-family: nb-theme(font-secondary);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.header {
|
||||
color: nb-theme(color-fg-header);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.subheader {
|
||||
font-size: 0.75rem;
|
||||
font-weight: nb-theme(font-weight-light);
|
||||
color: nb-theme(color-fg);
|
||||
}
|
||||
|
||||
.btn-demo {
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.state-container {
|
||||
display: flex;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.state-value {
|
||||
width: $button-size;
|
||||
height: $button-size;
|
||||
border-radius: nb-theme(btn-border-radius);
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
border-radius: nb-theme(btn-semi-round-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
.state-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
height: $button-size;
|
||||
}
|
||||
}
|
||||
|
||||
.example-container {
|
||||
@include nb-ltr(padding-right, 0);
|
||||
@include nb-rtl(padding-left, 0);
|
||||
}
|
||||
|
||||
.example-container .container-btn {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.block-level-buttons .btn-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(is) {
|
||||
ngx-default-buttons /deep/ nb-card-header {
|
||||
flex-direction: column;
|
||||
align-items: left;
|
||||
|
||||
span {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
|
||||
/deep/.icon-buttons .icon-button-examples {
|
||||
button {
|
||||
@include nb-ltr(margin-right, 1rem);
|
||||
@include nb-rtl(margin-left, 1rem);
|
||||
}
|
||||
}
|
||||
|
||||
ngx-default-buttons /deep/ nb-card-header {
|
||||
flex-direction: column;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
ngx-block-level-buttons /deep/ {
|
||||
.btn-primary {
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-buttons',
|
||||
styleUrls: ['./buttons.component.scss'],
|
||||
templateUrl: './buttons.component.html',
|
||||
})
|
||||
export class ButtonsComponent {
|
||||
}
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
|
||||
import { ThemeModule } from '../../../@theme/theme.module';
|
||||
import { DefaultButtonsComponent } from './default-buttons/default-buttons.component';
|
||||
import { HeroButtonComponent } from './hero-buttons/hero-buttons.component';
|
||||
import { ShapeButtonsComponent } from './shape-buttons/shape-buttons.component';
|
||||
import { SizeButtonsComponent } from './size-buttons/size-buttons.component';
|
||||
import { ButtonsComponent } from './buttons.component';
|
||||
import { ActionGroupsComponent } from './action-groups/action-groups.component';
|
||||
import { DropdownButtonsComponent } from './dropdown-buttons/dropdown-button.component';
|
||||
import { BlockLevelButtonsComponent } from './block-level-buttons/block-level-buttons.component';
|
||||
import { ButtonGroupsComponent } from './button-groups/button-groups.component';
|
||||
import { IconButtonsComponent } from './icon-buttons/icon-buttons.component';
|
||||
import { LabeledActionsGroupComponent } from './labeled-actions-group/labeled-actions-group.component';
|
||||
|
||||
const components = [
|
||||
ButtonsComponent,
|
||||
DefaultButtonsComponent,
|
||||
HeroButtonComponent,
|
||||
ShapeButtonsComponent,
|
||||
SizeButtonsComponent,
|
||||
ActionGroupsComponent,
|
||||
DropdownButtonsComponent,
|
||||
BlockLevelButtonsComponent,
|
||||
ButtonGroupsComponent,
|
||||
IconButtonsComponent,
|
||||
LabeledActionsGroupComponent,
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
ThemeModule,
|
||||
],
|
||||
exports: [
|
||||
...components,
|
||||
],
|
||||
declarations: [
|
||||
...components,
|
||||
],
|
||||
providers: [],
|
||||
})
|
||||
export class ButtonsModule { }
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
<nb-card>
|
||||
<nb-card-header>
|
||||
<span>Default Buttons</span>
|
||||
<div class="dropdown" ngbDropdown>
|
||||
<button class="btn btn-primary" type="button" ngbDropdownToggle>
|
||||
{{ selectedView.title }}
|
||||
</button>
|
||||
<ul class="dropdown-menu" ngbDropdownMenu>
|
||||
<li class="dropdown-item" *ngFor="let v of buttonsViews" (click)="this.selectedView = v">{{ v.title }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="row">
|
||||
<div class="example-container col-md-4" *ngFor="let b of buttons[selectedView.key]">
|
||||
<div class="container-title">
|
||||
<span>{{ b.containerTitle }}</span>
|
||||
</div>
|
||||
<div class="container-btn">
|
||||
<button class="btn {{ b.class }} btn-demo">{{ b.title }}</button>
|
||||
</div>
|
||||
<div class="{{ b.container }}">
|
||||
<div class="state-container">
|
||||
<div class="state-value original"></div>
|
||||
<div class="state-details">
|
||||
<span class="header">Default</span>
|
||||
<span class="subheader">{{ b.default }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="state-container">
|
||||
<div class="state-value hover"></div>
|
||||
<div class="state-details">
|
||||
<span class="header">Hover</span>
|
||||
<span class="subheader">14% white</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="state-container">
|
||||
<div class="state-value active"></div>
|
||||
<div class="state-details">
|
||||
<span class="header">Active</span>
|
||||
<span class="subheader">14% black</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
@ -1,126 +0,0 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
@import '~@nebular/bootstrap/styles/buttons';
|
||||
|
||||
@include nb-install-component() {
|
||||
|
||||
nb-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.dropdown {
|
||||
flex-basis: 30%;
|
||||
min-width: 220px;
|
||||
}
|
||||
}
|
||||
|
||||
nb-card-body {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.example-container {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.primary-container {
|
||||
.original {
|
||||
background-color: nb-theme(btn-primary-bg);
|
||||
}
|
||||
.hover {
|
||||
@include btn-primary-hover();
|
||||
}
|
||||
.active {
|
||||
@include btn-primary-active();
|
||||
}
|
||||
}
|
||||
|
||||
.primary-container.outline .original {
|
||||
background-color: transparent;
|
||||
border: 2px solid nb-theme(btn-primary-bg);
|
||||
}
|
||||
|
||||
.success-container {
|
||||
.original {
|
||||
background-color: nb-theme(btn-success-bg);
|
||||
}
|
||||
.hover {
|
||||
@include btn-success-hover();
|
||||
}
|
||||
.active {
|
||||
@include btn-success-active();
|
||||
}
|
||||
}
|
||||
|
||||
.success-container.outline .original {
|
||||
background-color: transparent;
|
||||
border: 2px solid nb-theme(btn-success-bg);
|
||||
}
|
||||
|
||||
.warning-container {
|
||||
.original {
|
||||
background-color: nb-theme(btn-warning-bg);
|
||||
}
|
||||
.hover {
|
||||
@include btn-warning-hover();
|
||||
}
|
||||
.active {
|
||||
@include btn-warning-active();
|
||||
}
|
||||
}
|
||||
|
||||
.warning-container.outline .original {
|
||||
background-color: transparent;
|
||||
border: 2px solid nb-theme(btn-warning-bg);
|
||||
}
|
||||
|
||||
.info-container {
|
||||
.original {
|
||||
background-color: nb-theme(btn-info-bg);
|
||||
}
|
||||
.hover {
|
||||
@include btn-info-hover();
|
||||
}
|
||||
.active {
|
||||
@include btn-info-active();
|
||||
}
|
||||
}
|
||||
|
||||
.info-container.outline .original {
|
||||
background-color: transparent;
|
||||
border: 2px solid nb-theme(btn-info-bg);
|
||||
}
|
||||
|
||||
.danger-container {
|
||||
.original {
|
||||
background-color: nb-theme(btn-danger-bg);
|
||||
}
|
||||
.hover {
|
||||
@include btn-danger-hover();
|
||||
}
|
||||
.active {
|
||||
@include btn-danger-active();
|
||||
}
|
||||
}
|
||||
|
||||
.danger-container.outline .original {
|
||||
background-color: transparent;
|
||||
border: 2px solid nb-theme(btn-danger-bg);
|
||||
}
|
||||
|
||||
.secondary-container {
|
||||
.original {
|
||||
border: 2px solid nb-theme(btn-secondary-border);
|
||||
}
|
||||
.hover {
|
||||
@include btn-secondary-hover();
|
||||
}
|
||||
.active {
|
||||
@include btn-secondary-active();
|
||||
}
|
||||
}
|
||||
|
||||
.secondary-container.outline .original {
|
||||
background-color: transparent;
|
||||
border: 2px solid nb-theme(btn-secondary-border);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,101 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-default-buttons',
|
||||
styleUrls: ['./default-buttons.component.scss'],
|
||||
templateUrl: './default-buttons.component.html',
|
||||
})
|
||||
export class DefaultButtonsComponent {
|
||||
|
||||
buttonsViews = [{
|
||||
title: 'Default Buttons',
|
||||
key: 'default',
|
||||
}, {
|
||||
title: 'Outline Buttons',
|
||||
key: 'outline',
|
||||
}];
|
||||
|
||||
selectedView = this.buttonsViews[0];
|
||||
|
||||
buttons = {
|
||||
'default': [
|
||||
{
|
||||
class: 'btn-primary',
|
||||
container: 'primary-container',
|
||||
containerTitle: 'Primary Button',
|
||||
title: 'Primary',
|
||||
default: '#7659ff',
|
||||
}, {
|
||||
class: 'btn-warning',
|
||||
container: 'warning-container',
|
||||
containerTitle: 'Warning Button',
|
||||
title: 'Warning',
|
||||
default: '#ffcb17',
|
||||
}, {
|
||||
class: 'btn-success',
|
||||
container: 'success-container',
|
||||
containerTitle: 'Success Button',
|
||||
title: 'Success',
|
||||
default: '#00d977',
|
||||
}, {
|
||||
class: 'btn-info',
|
||||
container: 'info-container',
|
||||
containerTitle: 'Info Button',
|
||||
title: 'Info',
|
||||
default: '#0088ff',
|
||||
}, {
|
||||
class: 'btn-danger',
|
||||
container: 'danger-container',
|
||||
containerTitle: 'Danger Button',
|
||||
title: 'Danger',
|
||||
default: '#ff386a',
|
||||
}, {
|
||||
class: 'btn-secondary',
|
||||
container: 'secondary-container',
|
||||
containerTitle: 'Default Button',
|
||||
title: 'Default',
|
||||
default: '#bdbaff',
|
||||
},
|
||||
],
|
||||
|
||||
'outline': [
|
||||
{
|
||||
class: 'btn-outline-primary',
|
||||
container: 'primary-container outline',
|
||||
containerTitle: 'Primary Button',
|
||||
title: 'Primary',
|
||||
default: '#7659ff',
|
||||
}, {
|
||||
class: 'btn-outline-warning',
|
||||
container: 'warning-container outline',
|
||||
containerTitle: 'Warning Button',
|
||||
title: 'Warning',
|
||||
default: '#ffcb17',
|
||||
}, {
|
||||
class: 'btn-outline-success',
|
||||
container: 'success-container outline',
|
||||
containerTitle: 'Success Button',
|
||||
title: 'Success',
|
||||
default: '#00d977',
|
||||
}, {
|
||||
class: 'btn-outline-info',
|
||||
container: 'info-container',
|
||||
containerTitle: 'Info Button',
|
||||
title: 'Info',
|
||||
default: '#0088ff',
|
||||
}, {
|
||||
class: 'btn-outline-danger',
|
||||
container: 'danger-container outline',
|
||||
containerTitle: 'Danger Button',
|
||||
title: 'Danger',
|
||||
default: '#ff386a',
|
||||
}, {
|
||||
class: 'btn-outline-secondary',
|
||||
container: 'secondary-container outline',
|
||||
containerTitle: 'Default Button',
|
||||
title: 'Default',
|
||||
default: '#bdbaff',
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
<nb-card>
|
||||
<nb-card-header>Button Dropdowns</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="dropdown btn-group" ngbDropdown>
|
||||
<button type="button" class="btn btn-primary">Dropdown</button>
|
||||
<button type="button" class="btn btn-primary" ngbDropdownToggle></button>
|
||||
<ul class="dropdown-menu" ngbDropdownMenu>
|
||||
<li class="dropdown-item">Icon Button</li>
|
||||
<li class="dropdown-item">Hero Button</li>
|
||||
<li class="dropdown-item">Default</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="dropdown" ngbDropdown>
|
||||
<button class="btn btn-primary" type="button" ngbDropdownToggle>
|
||||
Dropdown
|
||||
</button>
|
||||
<ul class="dropdown-menu" ngbDropdownMenu>
|
||||
<li class="dropdown-item">Icon Button</li>
|
||||
<li class="dropdown-item">Hero Button</li>
|
||||
<li class="dropdown-item">Default</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="dropdown" placement="top" ngbDropdown>
|
||||
<button class="btn btn-outline-primary" type="button" ngbDropdownToggle>
|
||||
Dropup
|
||||
</button>
|
||||
<ul class="dropdown-menu" ngbDropdownMenu>
|
||||
<li class="dropdown-item">Icon Button</li>
|
||||
<li class="dropdown-item">Hero Button</li>
|
||||
<li class="dropdown-item">Default</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="dropdown ghost-dropdown" ngbDropdown>
|
||||
<button class="btn btn-primary" type="button" ngbDropdownToggle>
|
||||
Dropdown
|
||||
</button>
|
||||
<ul class="dropdown-menu" ngbDropdownMenu>
|
||||
<li class="dropdown-item">Icon Button</li>
|
||||
<li class="dropdown-item">Hero Button</li>
|
||||
<li class="dropdown-item">Default</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
|
||||
@include nb-install-component() {
|
||||
text-align: center;
|
||||
|
||||
.dropdown, .dropup, .btn-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
nb-card-body {
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-dropdown-buttons',
|
||||
styleUrls: ['./dropdown-button.component.scss'],
|
||||
templateUrl: './dropdown-button.component.html',
|
||||
})
|
||||
|
||||
export class DropdownButtonsComponent {
|
||||
}
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
<nb-card>
|
||||
<nb-card-header>Hero Buttons</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="row">
|
||||
<div class="example-container col-sm-6 col-md-4 col-xl-3 col-xxxl-2" *ngFor="let hb of settings">
|
||||
<div class="container-title">
|
||||
<span>{{ hb.title }}</span>
|
||||
</div>
|
||||
<div class="container-btn">
|
||||
<button class="btn {{ hb.class }} btn-demo">{{ hb.buttonTitle }}</button>
|
||||
</div>
|
||||
<div class="{{ hb.container }}">
|
||||
<div class="state-container" *ngIf="hb[themeName].border">
|
||||
<div class="state-value border"></div>
|
||||
<div class="state-details">
|
||||
<span class="header">Border</span>
|
||||
<span class="subheader">{{ hb[themeName].border }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="state-container" *ngIf="hb[themeName].color">
|
||||
<div class="state-value color"></div>
|
||||
<div class="state-details">
|
||||
<span class="header">Color</span>
|
||||
<span class="subheader">{{ hb[themeName].color }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="state-container" *ngIf="hb[themeName].gradientLeft">
|
||||
<div class="state-value gradient"></div>
|
||||
<div class="state-details">
|
||||
<span class="header">Linear Gradient</span>
|
||||
<span class="subheader">{{ hb[themeName].gradientLeft }}</span>
|
||||
<span class="subheader">{{ hb[themeName].gradientRight }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="state-container">
|
||||
<div class="state-value bevel" [ngClass]="{ 'none': !hb[themeName].bevel }"></div>
|
||||
<div class="state-details" *ngIf="hb[themeName].bevel">
|
||||
<span class="header">Bevel</span>
|
||||
<span class="subheader">0 3px 0 0</span>
|
||||
<span class="subheader">{{ hb[themeName].bevel }}</span>
|
||||
</div>
|
||||
<div class="state-details" *ngIf="!hb[themeName].bevel">
|
||||
<span class="header">No Bevel</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="state-container">
|
||||
<div class="state-value shadow" [ngClass]="{ 'none': !hb[themeName].shadow }"></div>
|
||||
<div class="state-details" *ngIf="hb[themeName].shadow">
|
||||
<span class="header">Shadow</span>
|
||||
<span class="subheader">0 4px 10px 0</span>
|
||||
<span class="subheader">{{ hb[themeName].shadow }}</span>
|
||||
</div>
|
||||
<div class="state-details" *ngIf="!hb[themeName].shadow">
|
||||
<span class="header">No Shadow</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="state-container">
|
||||
<div class="state-value glow" [ngClass]="{ 'none': !hb[themeName].glow }"></div>
|
||||
<div class="state-details" *ngIf="hb[themeName].glow">
|
||||
<span class="header">Glow</span>
|
||||
<span class="subheader">{{ hb[themeName].glow.params }}</span>
|
||||
<span class="subheader">{{ hb[themeName].glow.color }}</span>
|
||||
</div>
|
||||
<div class="state-details" *ngIf="!hb[themeName].glow">
|
||||
<span class="header">No Glow</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
@ -1,135 +0,0 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
@import '~@nebular/bootstrap/styles/buttons';
|
||||
|
||||
@include nb-install-component() {
|
||||
|
||||
nb-card-body {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.none {
|
||||
position: relative;
|
||||
transform: rotate(45deg);
|
||||
|
||||
&::before, &::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
background: nb-theme(form-control-border-color);
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: 50%;
|
||||
top: 10%;
|
||||
transform: translateX(-50%);
|
||||
width: 1px;
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: 50%;
|
||||
left: 10%;
|
||||
transform: translateY(-50%);
|
||||
height: 1px;
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.shadow {
|
||||
box-shadow: nb-theme(btn-hero-shadow);
|
||||
}
|
||||
|
||||
.primary-container {
|
||||
.color {
|
||||
background-color: nb-theme(color-primary);
|
||||
}
|
||||
.gradient {
|
||||
@include btn-hero-primary-gradient();
|
||||
}
|
||||
.glow {
|
||||
box-shadow: btn-hero-primary-glow();
|
||||
}
|
||||
.bevel {
|
||||
box-shadow: btn-hero-primary-bevel();
|
||||
}
|
||||
}
|
||||
|
||||
.warning-container {
|
||||
.color {
|
||||
background-color: nb-theme(color-warning);
|
||||
}
|
||||
.gradient {
|
||||
@include btn-hero-warning-gradient();
|
||||
}
|
||||
.glow {
|
||||
box-shadow: btn-hero-warning-glow();
|
||||
}
|
||||
.bevel {
|
||||
box-shadow: btn-hero-warning-bevel();
|
||||
}
|
||||
}
|
||||
|
||||
.success-container {
|
||||
.color {
|
||||
background-color: nb-theme(color-success);
|
||||
}
|
||||
.gradient {
|
||||
@include btn-hero-success-gradient();
|
||||
}
|
||||
.glow {
|
||||
box-shadow: btn-hero-success-glow();
|
||||
}
|
||||
.bevel {
|
||||
box-shadow: btn-hero-success-bevel();
|
||||
}
|
||||
}
|
||||
|
||||
.info-container {
|
||||
.color {
|
||||
background-color: nb-theme(color-info);
|
||||
}
|
||||
.gradient {
|
||||
@include btn-hero-info-gradient();
|
||||
}
|
||||
.glow {
|
||||
box-shadow: btn-hero-info-glow();
|
||||
}
|
||||
.bevel {
|
||||
box-shadow: btn-hero-info-bevel();
|
||||
}
|
||||
}
|
||||
|
||||
.danger-container {
|
||||
.color {
|
||||
background-color: nb-theme(color-danger);
|
||||
}
|
||||
.gradient {
|
||||
@include btn-hero-danger-gradient();
|
||||
}
|
||||
.glow {
|
||||
box-shadow: btn-hero-danger-glow();
|
||||
}
|
||||
.bevel {
|
||||
box-shadow: btn-hero-danger-bevel();
|
||||
}
|
||||
}
|
||||
|
||||
.secondary-container {
|
||||
.color {
|
||||
background-color: nb-theme(btn-secondary-bg);
|
||||
}
|
||||
.border {
|
||||
color: nb-theme(btn-secondary-color);
|
||||
border: nb-theme(btn-secondary-border-width) solid nb-theme(btn-secondary-border);
|
||||
}
|
||||
.glow {
|
||||
box-shadow: btn-hero-secondary-glow();
|
||||
}
|
||||
.bevel {
|
||||
box-shadow: btn-hero-secondary-bevel();
|
||||
}
|
||||
}
|
||||
|
||||
.example-container {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,180 +0,0 @@
|
|||
import { Component, OnDestroy } from '@angular/core';
|
||||
import { NbThemeService } from '@nebular/theme';
|
||||
import { Subscription } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-hero-buttons',
|
||||
styleUrls: ['./hero-buttons.component.scss'],
|
||||
templateUrl: './hero-buttons.component.html',
|
||||
})
|
||||
export class HeroButtonComponent implements OnDestroy {
|
||||
|
||||
themeName = 'default';
|
||||
settings: Array<any>;
|
||||
themeSubscription: Subscription;
|
||||
|
||||
constructor(private themeService: NbThemeService) {
|
||||
this.themeSubscription = this.themeService.getJsTheme().subscribe(theme => {
|
||||
this.themeName = theme.name;
|
||||
this.init(theme.variables);
|
||||
});
|
||||
}
|
||||
|
||||
init(colors: any) {
|
||||
this.settings = [{
|
||||
class: 'btn-hero-primary',
|
||||
container: 'primary-container',
|
||||
title: 'Primary Button',
|
||||
buttonTitle: 'Primary',
|
||||
default: {
|
||||
gradientLeft: `adjust-hue(${colors.primary}, 20deg)`,
|
||||
gradientRight: colors.primary,
|
||||
},
|
||||
corporate: {
|
||||
color: colors.primary,
|
||||
glow: {
|
||||
params: '0 0 20px 0',
|
||||
color: 'rgba (115, 161, 255, 0.5)',
|
||||
},
|
||||
},
|
||||
cosmic: {
|
||||
gradientLeft: `adjust-hue(${colors.primary}, 20deg)`,
|
||||
gradientRight: colors.primary,
|
||||
bevel: `shade(${colors.primary}, 14%)`,
|
||||
shadow: 'rgba (6, 7, 64, 0.5)',
|
||||
glow: {
|
||||
params: '0 2px 12px 0',
|
||||
color: `adjust-hue(${colors.primary}, 10deg)`,
|
||||
},
|
||||
},
|
||||
}, {
|
||||
class: 'btn-hero-warning',
|
||||
container: 'warning-container',
|
||||
title: 'Warning Button',
|
||||
buttonTitle: 'Warning',
|
||||
default: {
|
||||
gradientLeft: `adjust-hue(${colors.warning}, 10deg)`,
|
||||
gradientRight: colors.warning,
|
||||
},
|
||||
corporate: {
|
||||
color: colors.warning,
|
||||
glow: {
|
||||
params: '0 0 20px 0',
|
||||
color: 'rgba (256, 163, 107, 0.5)',
|
||||
},
|
||||
},
|
||||
cosmic: {
|
||||
gradientLeft: `adjust-hue(${colors.warning}, 10deg)`,
|
||||
gradientRight: colors.warning,
|
||||
bevel: `shade(${colors.warning}, 14%)`,
|
||||
shadow: 'rgba (33, 7, 77, 0.5)',
|
||||
glow: {
|
||||
params: '0 2px 12px 0',
|
||||
color: `adjust-hue(${colors.warning}, 5deg)`,
|
||||
},
|
||||
},
|
||||
}, {
|
||||
class: 'btn-hero-success',
|
||||
container: 'success-container',
|
||||
title: 'Success Button',
|
||||
buttonTitle: 'Success',
|
||||
default: {
|
||||
gradientLeft: `adjust-hue(${colors.success}, 20deg)`,
|
||||
gradientRight: colors.success,
|
||||
},
|
||||
corporate: {
|
||||
color: colors.success,
|
||||
glow: {
|
||||
params: '0 0 20px 0',
|
||||
color: 'rgba (93, 207, 227, 0.5)',
|
||||
},
|
||||
},
|
||||
cosmic: {
|
||||
gradientLeft: `adjust-hue(${colors.success}, 20deg)`,
|
||||
gradientRight: colors.success,
|
||||
bevel: `shade(${colors.success}, 14%)`,
|
||||
shadow: 'rgba (33, 7, 77, 0.5)',
|
||||
glow: {
|
||||
params: '0 2px 12px 0',
|
||||
color: `adjust-hue(${colors.success}, 10deg)`,
|
||||
},
|
||||
},
|
||||
}, {
|
||||
class: 'btn-hero-info',
|
||||
container: 'info-container',
|
||||
title: 'Info Button',
|
||||
buttonTitle: 'Info',
|
||||
default: {
|
||||
gradientLeft: `adjust-hue(${colors.info}, -10deg)`,
|
||||
gradientRight: colors.info,
|
||||
},
|
||||
corporate: {
|
||||
color: colors.info,
|
||||
glow: {
|
||||
params: '0 0 20px 0',
|
||||
color: 'rgba (186, 127, 236, 0.5)',
|
||||
},
|
||||
},
|
||||
cosmic: {
|
||||
gradientLeft: `adjust-hue(${colors.info}, -10deg)`,
|
||||
gradientRight: colors.info,
|
||||
bevel: `shade(${colors.info}, 14%)`,
|
||||
shadow: 'rgba (33, 7, 77, 0.5)',
|
||||
glow: {
|
||||
params: '0 2px 12px 0',
|
||||
color: `adjust-hue(${colors.info}, -5deg)`,
|
||||
},
|
||||
},
|
||||
}, {
|
||||
class: 'btn-hero-danger',
|
||||
container: 'danger-container',
|
||||
title: 'Danger Button',
|
||||
buttonTitle: 'Danger',
|
||||
default: {
|
||||
gradientLeft: `adjust-hue(${colors.danger}, -20deg)`,
|
||||
gradientRight: colors.danger,
|
||||
},
|
||||
corporate: {
|
||||
color: colors.danger,
|
||||
glow: {
|
||||
params: '0 0 20px 0',
|
||||
color: 'rgba (255, 107, 131, 0.5)',
|
||||
},
|
||||
},
|
||||
cosmic: {
|
||||
gradientLeft: `adjust-hue(${colors.danger}, -20deg)`,
|
||||
gradientRight: colors.danger,
|
||||
bevel: `shade(${colors.danger}, 14%)`,
|
||||
shadow: 'rgba (33, 7, 77, 0.5)',
|
||||
glow: {
|
||||
params: '0 2px 12px 0',
|
||||
color: `adjust-hue(${colors.danger}, -10deg)`,
|
||||
},
|
||||
},
|
||||
}, {
|
||||
class: 'btn-hero-secondary',
|
||||
container: 'secondary-container',
|
||||
title: 'Ghost Button',
|
||||
buttonTitle: 'Ghost',
|
||||
default: {
|
||||
border: '#dadfe6',
|
||||
},
|
||||
corporate: {
|
||||
color: '#edf2f5',
|
||||
},
|
||||
cosmic: {
|
||||
border: colors.primary,
|
||||
bevel: '#665ebd',
|
||||
shadow: 'rgba (33, 7, 77, 0.5)',
|
||||
glow: {
|
||||
params: '0 2px 12px 0',
|
||||
color: 'rgba (146, 141, 255, 1)',
|
||||
},
|
||||
},
|
||||
}];
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.themeSubscription.unsubscribe();
|
||||
}
|
||||
}
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
<nb-card>
|
||||
<nb-card-header>Icon buttons</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="row icon-buttons">
|
||||
<div class="col-md-12">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-primary btn-group-icon btn-group-divider">
|
||||
<i class="nb-home"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary">Icon Button</button>
|
||||
</div>
|
||||
<div class="btn-with-icon-example">
|
||||
<button type="button" class="btn btn-primary btn-with-icon">
|
||||
<i class="nb-home"></i>
|
||||
<span>Icon Button</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="icon-button-examples">
|
||||
<button type="button" class="btn btn-outline-primary btn-icon">
|
||||
<i class="nb-layout-centre"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-success btn-icon">
|
||||
<i class="nb-layout-default"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-danger btn-icon">
|
||||
<i class="nb-layout-one-column"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="icon-button-examples">
|
||||
<button type="button" class="btn btn-primary btn-icon">
|
||||
<i class="nb-shuffle"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-success btn-icon">
|
||||
<i class="nb-skip-backward-outline"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger btn-icon">
|
||||
<i class="nb-skip-forward-outline"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
nb-card-body {
|
||||
div:not(:last-child) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-with-icon-example {
|
||||
width: 100%;
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group:not(:last-child) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.icon-button-examples {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
button {
|
||||
min-width: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-button-examples:not(:last-child) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-icon-buttons',
|
||||
styleUrls: ['./icon-buttons.component.scss'],
|
||||
templateUrl: './icon-buttons.component.html',
|
||||
})
|
||||
export class IconButtonsComponent {
|
||||
}
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<nb-card>
|
||||
<nb-card-body>
|
||||
<nb-actions size="medium" fullWidth>
|
||||
<nb-action>
|
||||
<i class="nb-pause-outline"></i><span>Pause</span>
|
||||
</nb-action>
|
||||
<nb-action>
|
||||
<i class="nb-list"></i><span>Logs</span>
|
||||
</nb-action>
|
||||
<nb-action>
|
||||
<i class="nb-search"></i><span>Search</span>
|
||||
</nb-action>
|
||||
<nb-action>
|
||||
<i class="nb-gear"></i><span>Setup</span>
|
||||
</nb-action>
|
||||
</nb-actions>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
|
||||
nb-actions > nb-action {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
nb-action {
|
||||
i {
|
||||
color: nb-theme(color-fg);
|
||||
font-size: 2.5rem;
|
||||
@include nb-ltr(margin-right, 1rem);
|
||||
@include nb-rtl(margin-left, 1rem);
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
color: nb-theme(actions-fg);
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
font-family: nb-theme(font-secondary);
|
||||
font-weight: nb-theme(font-weight-bold);
|
||||
color: nb-theme(color-fg-heading);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
nb-actions nb-action {
|
||||
padding: 0 0.75rem;
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-down(sm) {
|
||||
nb-card-body {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
nb-action {
|
||||
font-size: 0.75rem;
|
||||
i {
|
||||
font-size: 2rem;
|
||||
@include nb-ltr(margin-right, 0.5rem);
|
||||
@include nb-rtl(margin-left, 0.5rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(is) {
|
||||
nb-action i {
|
||||
font-size: 1.75rem;
|
||||
margin: 0;
|
||||
}
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-labeled-actions-group',
|
||||
styleUrls: ['./labeled-actions-group.component.scss'],
|
||||
templateUrl: './labeled-actions-group.component.html',
|
||||
})
|
||||
export class LabeledActionsGroupComponent {
|
||||
}
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
<nb-card>
|
||||
<nb-card-header>Button Shapes</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="shape-container">
|
||||
<div class="container-title">
|
||||
<span>Rectangle Button</span>
|
||||
</div>
|
||||
<div class="subheader">
|
||||
<span>Border radius:</span>
|
||||
<span>4px</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-success btn-rectangle btn-demo">Rectangle</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="shape-container">
|
||||
<div class="container-title">
|
||||
<span>Semi-round Button</span>
|
||||
</div>
|
||||
<div class="subheader">
|
||||
<span>Border radius:</span>
|
||||
<span>12px</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-success btn-semi-round btn-demo">Semi-round</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="shape-container">
|
||||
<div class="container-title">
|
||||
<span>Rounded Button</span>
|
||||
</div>
|
||||
<div class="subheader">
|
||||
<span>Border radius:</span>
|
||||
<span>round</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-success btn-round btn-demo">Round</button>
|
||||
</div>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
@import '~@nebular/bootstrap/styles/buttons';
|
||||
|
||||
@include nb-install-component() {
|
||||
|
||||
nb-card-body {
|
||||
padding: 0 0 29px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.shape-container {
|
||||
margin: 1.25rem 1.25rem 0;
|
||||
}
|
||||
|
||||
.container-title {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.subheader {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.875rem;
|
||||
|
||||
span:nth-child(2) {
|
||||
color: nb-theme(color-fg-heading);
|
||||
font-weight: nb-theme(font-weight-bold);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-shape-buttons',
|
||||
styleUrls: ['./shape-buttons.component.scss'],
|
||||
templateUrl: './shape-buttons.component.html',
|
||||
})
|
||||
export class ShapeButtonsComponent {
|
||||
}
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
<nb-card>
|
||||
<nb-card-header>Button Sizes</nb-card-header>
|
||||
|
||||
<nb-card-body>
|
||||
<div class="size-container">
|
||||
<div class="container-title">
|
||||
<span>Large Button</span>
|
||||
</div>
|
||||
<div class="subheader">
|
||||
<span>0.875rem 1.75rem</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-primary btn-lg">Large Button</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="size-container">
|
||||
<div class="container-title">
|
||||
<span>Medium Button</span>
|
||||
</div>
|
||||
<div class="subheader">
|
||||
<span>0.75rem 1.5rem</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-primary btn-md">Medium Button</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="size-container">
|
||||
<div class="container-title">
|
||||
<span>Small Button</span>
|
||||
</div>
|
||||
<div class="subheader">
|
||||
<span>0.675rem 1.5rem</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-primary btn-sm">Small Button</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="size-container">
|
||||
<div class="container-title">
|
||||
<span>X-Small Button</span>
|
||||
</div>
|
||||
<div class="subheader">
|
||||
<span>0.5rem 1.25rem</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-primary btn-xs">X-Small Button</button>
|
||||
</div>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
@import '~@nebular/bootstrap/styles/buttons';
|
||||
|
||||
@include nb-install-component() {
|
||||
|
||||
nb-card-body {
|
||||
padding: 0 1.25rem 1.25rem 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.container-title {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.size-container {
|
||||
margin: 1.25rem 0 0 1.25rem;
|
||||
}
|
||||
|
||||
.subheader {
|
||||
margin-bottom: 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: nb-theme(font-weight-bolder);
|
||||
color: nb-theme(color-fg-heading);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-size-buttons',
|
||||
styleUrls: ['./size-buttons.component.scss'],
|
||||
templateUrl: './size-buttons.component.html',
|
||||
})
|
||||
export class SizeButtonsComponent {
|
||||
}
|
||||
|
|
@ -27,7 +27,7 @@ export class IconsComponent {
|
|||
'nb-skip-backward-outline', 'nb-skip-forward', 'nb-skip-forward-outline', 'nb-snowy-circled',
|
||||
'nb-square', 'nb-square-outline', 'nb-star', 'nb-sunny', 'nb-sunny-circled', 'nb-tables', 'nb-title',
|
||||
'nb-trash', 'nb-volume-high', 'nb-volume-mute', 'nb-drop', 'nb-drops', 'nb-info', 'nb-expand', 'nb-collapse',
|
||||
'nb-e-commerce'],
|
||||
'nb-e-commerce', 'nb-danger', 'nb-checkmark-circle', 'nb-help'],
|
||||
|
||||
ionicons: [
|
||||
'ion-ionic', 'ion-arrow-right-b', 'ion-arrow-down-b', 'ion-arrow-left-b', 'ion-arrow-up-c', 'ion-arrow-right-c',
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-modal',
|
||||
template: `
|
||||
<div class="modal-header">
|
||||
<span>{{ modalHeader }}</span>
|
||||
<button class="close" aria-label="Close" (click)="closeModal()">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
{{ modalContent }}
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-md btn-primary" (click)="closeModal()">Save changes</button>
|
||||
</div>
|
||||
`,
|
||||
})
|
||||
export class ModalComponent {
|
||||
|
||||
modalHeader: string;
|
||||
modalContent = `Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
|
||||
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
|
||||
nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.`;
|
||||
|
||||
constructor(private activeModal: NgbActiveModal) { }
|
||||
|
||||
closeModal() {
|
||||
this.activeModal.close();
|
||||
}
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<nb-card>
|
||||
<nb-card-header>Modals</nb-card-header>
|
||||
<nb-card-body>
|
||||
<button class="btn btn-success" (click)="showLargeModal()">Large modal</button>
|
||||
<button class="btn btn-warning" (click)="showSmallModal()">Small modal</button>
|
||||
<button class="btn btn-primary" (click)="showStaticModal()">Static modal</button>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
@import '~@nebular/theme/styles/core/mixins';
|
||||
|
||||
:host {
|
||||
button {
|
||||
@include nb-ltr(margin, 0 0.75rem 2rem 0);
|
||||
@include nb-rtl(margin, 0 0 2rem 0.75rem);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
|
||||
|
||||
import { ModalComponent } from './modal/modal.component';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-modals',
|
||||
styleUrls: ['./modals.component.scss'],
|
||||
templateUrl: './modals.component.html',
|
||||
})
|
||||
export class ModalsComponent {
|
||||
|
||||
constructor(private modalService: NgbModal) { }
|
||||
|
||||
showLargeModal() {
|
||||
const activeModal = this.modalService.open(ModalComponent, { size: 'lg', container: 'nb-layout' });
|
||||
|
||||
activeModal.componentInstance.modalHeader = 'Large Modal';
|
||||
}
|
||||
showSmallModal() {
|
||||
const activeModal = this.modalService.open(ModalComponent, { size: 'sm', container: 'nb-layout' });
|
||||
|
||||
activeModal.componentInstance.modalHeader = 'Small Modal';
|
||||
}
|
||||
|
||||
showStaticModal() {
|
||||
const activeModal = this.modalService.open(ModalComponent, {
|
||||
size: 'sm',
|
||||
backdrop: 'static',
|
||||
container: 'nb-layout',
|
||||
});
|
||||
|
||||
activeModal.componentInstance.modalHeader = 'Static modal';
|
||||
activeModal.componentInstance.modalContent = `This is static modal, backdrop click
|
||||
will not close it. Click × or confirmation button to close modal.`;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-popover-tabs',
|
||||
template: `
|
||||
<nb-tabset>
|
||||
<nb-tab tabTitle="What's up?">
|
||||
<div class="p-4">
|
||||
Such a wonderful day!
|
||||
</div>
|
||||
</nb-tab>
|
||||
<nb-tab tabTitle="Second Tab">
|
||||
<div class="p-4">
|
||||
Indeed!
|
||||
</div>
|
||||
</nb-tab>
|
||||
</nb-tabset>
|
||||
`,
|
||||
})
|
||||
export class NgxPopoverTabsComponent {
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-popover-form',
|
||||
template: `
|
||||
<div class="p-4">
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" placeholder="Recipients">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" placeholder="Subject">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<textarea class="form-control" placeholder="Message"></textarea>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary w-100">Send</button>
|
||||
</form>
|
||||
</div>
|
||||
`,
|
||||
})
|
||||
export class NgxPopoverFormComponent {
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-popover-card',
|
||||
template: `
|
||||
<nb-card class="popover-card">
|
||||
<nb-card-header status="warning">
|
||||
Hello!
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia,
|
||||
there live the blind texts.
|
||||
Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
`,
|
||||
})
|
||||
export class NgxPopoverCardComponent {
|
||||
}
|
||||
|
|
@ -1,157 +0,0 @@
|
|||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<nb-card size="small">
|
||||
<nb-card-header>Popover Position</nb-card-header>
|
||||
<nb-card-body>
|
||||
<p>When popover has not enough space based on the configured placement, it will adjust accordingly trying to fit the screen.</p>
|
||||
<button class="btn btn-danger with-margins" nbPopover="Hello, how are you today?" nbPopoverMode="hint" nbPopoverPlacement="left">Left</button>
|
||||
<button class="btn btn-danger with-margins" nbPopover="Hello, how are you today?" nbPopoverMode="hint" nbPopoverPlacement="top">Top</button>
|
||||
<button class="btn btn-danger with-margins" nbPopover="Hello, how are you today?" nbPopoverMode="hint" nbPopoverPlacement="bottom">Bottom</button>
|
||||
<button class="btn btn-danger with-margins" nbPopover="Hello, how are you today?" nbPopoverMode="hint" nbPopoverPlacement="right">Right</button>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<nb-card size="small">
|
||||
<nb-card-header>Simple Popovers</nb-card-header>
|
||||
<nb-card-body>
|
||||
<p>In a simples form popover can take a string of text to render.</p>
|
||||
<button class="btn btn-success with-margins" nbPopover="Hello, how are you today?">on click</button>
|
||||
<button class="btn btn-success with-margins" nbPopover="Hello, how are you today?" nbPopoverMode="hover">on hover</button>
|
||||
<button class="btn btn-success with-margins" nbPopover="Hello, how are you today?" nbPopoverMode="hint">on hint</button>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
|
||||
<ng-template #tabs>
|
||||
<nb-tabset>
|
||||
<nb-tab tabTitle="What's up?">
|
||||
<div class="p-4">
|
||||
Such a wonderful day!
|
||||
</div>
|
||||
</nb-tab>
|
||||
<nb-tab tabTitle="Second Tab">
|
||||
<div class="p-4">
|
||||
Indeed!
|
||||
</div>
|
||||
</nb-tab>
|
||||
</nb-tabset>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #form>
|
||||
<div class="p-4">
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" placeholder="Recipients">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" placeholder="Subject">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<textarea class="form-control" placeholder="Message"></textarea>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary w-100">Send</button>
|
||||
</form>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #card>
|
||||
<nb-card class="popover-card">
|
||||
<nb-card-header status="warning">
|
||||
Hello!
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
|
||||
Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</ng-template>
|
||||
|
||||
<nb-card size="small">
|
||||
<nb-card-header>Template Popovers</nb-card-header>
|
||||
<nb-card-body>
|
||||
<p>You can pass a refference to `ng-template` to be rendered.</p>
|
||||
<button class="btn btn-warning with-margins" [nbPopover]="tabs">With tabs</button>
|
||||
<button class="btn btn-warning with-margins" [nbPopover]="form">With form</button>
|
||||
<button class="btn btn-warning with-margins" [nbPopover]="card">With card</button>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<nb-card size="small">
|
||||
<nb-card-header>Component Popovers</nb-card-header>
|
||||
<nb-card-body>
|
||||
<p>Same way popover can render any angular compnoent.</p>
|
||||
<button class="btn btn-warning with-margins" [nbPopover]="tabsComponent">With tabs</button>
|
||||
<button class="btn btn-warning with-margins" [nbPopover]="formComponent">With form</button>
|
||||
<button class="btn btn-warning with-margins" [nbPopover]="cardComponent">With card</button>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<nb-card>
|
||||
<nb-card-header>Event Debouncing</nb-card-header>
|
||||
<nb-card-body>
|
||||
<p>Quickly move mouse cursor over the buttons, only the last popover will be created. It allows us to avoid excess white improving page performance.</p>
|
||||
|
||||
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
|
||||
show hint
|
||||
</button>
|
||||
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
|
||||
show hint
|
||||
</button>
|
||||
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
|
||||
show hint
|
||||
</button>
|
||||
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
|
||||
show hint
|
||||
</button>
|
||||
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
|
||||
show hint
|
||||
</button>
|
||||
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
|
||||
show hint
|
||||
</button>
|
||||
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
|
||||
show hint
|
||||
</button>
|
||||
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
|
||||
show hint
|
||||
</button>
|
||||
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
|
||||
show hint
|
||||
</button>
|
||||
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
|
||||
show hint
|
||||
</button>
|
||||
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
|
||||
show hint
|
||||
</button>
|
||||
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
|
||||
show hint
|
||||
</button>
|
||||
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
|
||||
show hint
|
||||
</button>
|
||||
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
|
||||
show hint
|
||||
</button>
|
||||
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
|
||||
show hint
|
||||
</button>
|
||||
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
|
||||
show hint
|
||||
</button>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
@import '~@nebular/theme/styles/core/mixins';
|
||||
|
||||
/deep/ nb-card.popover-card {
|
||||
margin-bottom: 0;
|
||||
width: 300px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
:host {
|
||||
button.with-margins {
|
||||
@include nb-ltr(margin, 0 0.75rem 2rem 0);
|
||||
@include nb-rtl(margin, 0 0 2rem 0.75rem);
|
||||
}
|
||||
|
||||
/deep/ .btn-outline-secondary {
|
||||
@include nb-ltr(margin, 0 0.5rem 0.5rem 0);
|
||||
@include nb-rtl(margin, 0 0 0.5rem 0.5rem);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
import {
|
||||
NgxPopoverCardComponent, NgxPopoverFormComponent,
|
||||
NgxPopoverTabsComponent,
|
||||
} from './popover-examples.component';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-popovers',
|
||||
styleUrls: ['./popovers.component.scss'],
|
||||
templateUrl: './popovers.component.html',
|
||||
})
|
||||
export class PopoversComponent {
|
||||
tabsComponent = NgxPopoverTabsComponent;
|
||||
cardComponent = NgxPopoverCardComponent;
|
||||
formComponent = NgxPopoverFormComponent;
|
||||
}
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
<div class="row">
|
||||
<div class="col-md-12 col-lg-6">
|
||||
<nb-card size="small">
|
||||
<nb-tabset>
|
||||
<nb-tab tabTitle="Simple Tab #1">
|
||||
<p>In 1975, the first general purpose home automation network technology, <a target="_blank" href="https://en.wikipedia.org/wiki/X10_(industry_standard)" title="X10 (industry standard)">X10</a>, was developed. It is a communication protocol for electronic devices. It primarily uses <a target="_blank" href="https://en.wikipedia.org/wiki/Electric_power_transmission" title="Electric power transmission">electric power transmission</a> wiring for signalling and control, where the signals involve brief <a target="_blank" href="https://en.wikipedia.org/wiki/Radio_frequency" title="Radio frequency">radio frequency</a> bursts of <a target="_blank" href="https://en.wikipedia.org/wiki/Digital_data" title="Digital data">digital data</a>, and remains the most widely available.<sup id="cite_ref-8" class="reference"><a target="_blank" href="https://en.wikipedia.org#cite_note-8">[8]</a></sup> By 1978, X10 products included a 16 channel command console, a lamp module, and an appliance module. Soon after came the wall switch module and the first X10 timer.</p>
|
||||
</nb-tab>
|
||||
<nb-tab tabTitle="Simple Tab #2">
|
||||
<span>Content #2</span>
|
||||
</nb-tab>
|
||||
<nb-tab tabTitle="Simple Tab #3">
|
||||
<span>Content #3</span>
|
||||
</nb-tab>
|
||||
</nb-tabset>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<nb-card size="small">
|
||||
<nb-tabset fullWidth>
|
||||
<nb-tab tabTitle="Full width tab #1">
|
||||
<p><b>Home automation</b> or <b>smart home</b><sup id="cite_ref-Smart_Home_1-0" class="reference"><a target="_blank" href="https://en.wikipedia.org#cite_note-Smart_Home-1">[1]</a></sup> (also known as <b>domotics</b><sup id="cite_ref-t3_2-0" class="reference"><a target="_blank" href="https://en.wikipedia.org#cite_note-t3-2">[2]</a></sup>) is <a target="_blank" href="https://en.wikipedia.org/wiki/Building_automation" title="Building automation">building automation</a> for the home. It involves the control and automation of lighting, heating (such as <a target="_blank" href="https://en.wikipedia.org/wiki/Smart_thermostat" title="Smart thermostat">smart thermostats</a>), ventilation, air conditioning (<a target="_blank" href="https://en.wikipedia.org/wiki/HVAC" title="HVAC">HVAC</a>), and security, as well as <a target="_blank" href="https://en.wikipedia.org/wiki/Home_appliance" title="Home appliance">home appliances</a> such as washer/dryers, ovens or refrigerators/freezers. <a target="_blank" href="https://en.wikipedia.org/wiki/Wi-Fi" title="Wi-Fi">Wi-Fi</a> is often used for remote monitoring and control. Home devices, when remotely monitored and controlled via the Internet, are an important constituent of the <a target="_blank" href="https://en.wikipedia.org/wiki/Internet_of_Things" class="mw-redirect" title="Internet of Things">Internet of Things</a>. Modern systems generally consist of switches and sensors connected to a central hub sometimes called a "gateway" from which the system is controlled with a <a target="_blank" href="https://en.wikipedia.org/wiki/User_interface" title="User interface">user interface</a> that is interacted either with a wall-mounted terminal, mobile phone software, <a target="_blank" href="https://en.wikipedia.org/wiki/Tablet_computer" title="Tablet computer">tablet computer</a> or a web interface, often but not always via Internet cloud services.</p>
|
||||
<p>While there are many competing vendors, there are very few worldwide accepted industry standards and the smart home space is heavily fragmented.<sup id="cite_ref-3" class="reference"><a target="_blank" href="https://en.wikipedia.org#cite_note-3">[3]</a></sup> Popular <a target="_blank" href="https://en.wikipedia.org/wiki/Communications_protocol" title="Communications protocol">communications protocol</a> for products include <a target="_blank" href="https://en.wikipedia.org/wiki/X10_(industry_standard)" title="X10 (industry standard)">X10</a>, <a target="_blank" href="https://en.wikipedia.org/wiki/Ethernet" title="Ethernet">Ethernet</a>, <a target="_blank" href="https://en.wikipedia.org/wiki/RS-485" title="RS-485">RS-485</a>, <a target="_blank" href="https://en.wikipedia.org/wiki/6LoWPAN" title="6LoWPAN">6LoWPAN</a>, <a target="_blank" href="https://en.wikipedia.org/wiki/Bluetooth_low_energy" class="mw-redirect" title="Bluetooth low energy">Bluetooth LE (BLE)</a>, <a target="_blank" href="https://en.wikipedia.org/wiki/ZigBee" class="mw-redirect" title="ZigBee">ZigBee</a> and <a target="_blank" href="https://en.wikipedia.org/wiki/Z-Wave" title="Z-Wave">Z-Wave</a>, or other proprietary protocols all of which are incompatible with each other.<sup id="cite_ref-crhomephone_4-0" class="reference"><a target="_blank" href="https://en.wikipedia.org#cite_note-crhomephone-4">[4]</a></sup> Manufacturers often prevent independent implementations by withholding documentation and by litigation.<sup id="cite_ref-5" class="reference"><a target="_blank" href="https://en.wikipedia.org#cite_note-5">[5]</a></sup></p>
|
||||
</nb-tab>
|
||||
<nb-tab tabTitle="Full width tab #2">
|
||||
<span>Content #2</span>
|
||||
</nb-tab>
|
||||
<nb-tab tabTitle="Full width tab #3">
|
||||
<span>Content #3</span>
|
||||
</nb-tab>
|
||||
</nb-tabset>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<nb-card size="small">
|
||||
<nb-route-tabset [tabs]="tabs"></nb-route-tabset>
|
||||
</nb-card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
nb-tabset {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
nb-tab {
|
||||
padding: nb-theme(padding);
|
||||
}
|
||||
|
||||
/deep/ ngx-tab1, /deep/ ngx-tab2 {
|
||||
display: block;
|
||||
padding: nb-theme(padding);
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
nb-tabset /deep/ul {
|
||||
font-size: 1rem;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-tab1',
|
||||
template: `
|
||||
<p>Early home automation began with labor-saving machines. Self-contained electric or gas powered
|
||||
<a target="_blank" href="https://en.wikipedia.org/wiki/Home_appliances">home appliances</a>
|
||||
became viable in the 1900s with the introduction of
|
||||
<a target="_blank" href="https://en.wikipedia.org/wiki/Electric_power_distribution">electric power distribution
|
||||
</a> and led to the introduction of washing machines (1904), water heaters (1889), refrigerators, sewing machines,
|
||||
dishwashers, and clothes dryers.
|
||||
</p>
|
||||
`,
|
||||
})
|
||||
export class Tab1Component { }
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-tab2',
|
||||
template: `
|
||||
<p>Tab 2 works!</p>
|
||||
`,
|
||||
})
|
||||
export class Tab2Component { }
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-tabs',
|
||||
styleUrls: ['./tabs.component.scss'],
|
||||
templateUrl: './tabs.component.html',
|
||||
})
|
||||
export class TabsComponent {
|
||||
|
||||
tabs: any[] = [
|
||||
{
|
||||
title: 'Route tab #1',
|
||||
route: '/pages/ui-features/tabs/tab1',
|
||||
},
|
||||
{
|
||||
title: 'Route tab #2',
|
||||
route: '/pages/ui-features/tabs/tab2',
|
||||
},
|
||||
];
|
||||
|
||||
}
|
||||
|
|
@ -2,53 +2,26 @@ import { NgModule } from '@angular/core';
|
|||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { UiFeaturesComponent } from './ui-features.component';
|
||||
import { ButtonsComponent } from './buttons/buttons.component';
|
||||
import { GridComponent } from './grid/grid.component';
|
||||
import { IconsComponent } from './icons/icons.component';
|
||||
import { ModalsComponent } from './modals/modals.component';
|
||||
import { TypographyComponent } from './typography/typography.component';
|
||||
import { TabsComponent, Tab1Component, Tab2Component } from './tabs/tabs.component';
|
||||
import { SearchComponent } from './search-fields/search-fields.component';
|
||||
import { PopoversComponent } from './popovers/popovers.component';
|
||||
|
||||
const routes: Routes = [{
|
||||
path: '',
|
||||
component: UiFeaturesComponent,
|
||||
children: [{
|
||||
path: 'buttons',
|
||||
component: ButtonsComponent,
|
||||
}, {
|
||||
children: [ {
|
||||
path: 'grid',
|
||||
component: GridComponent,
|
||||
}, {
|
||||
path: 'icons',
|
||||
component: IconsComponent,
|
||||
}, {
|
||||
path: 'modals',
|
||||
component: ModalsComponent,
|
||||
}, {
|
||||
path: 'popovers',
|
||||
component: PopoversComponent,
|
||||
}, {
|
||||
path: 'typography',
|
||||
component: TypographyComponent,
|
||||
}, {
|
||||
path: 'search-fields',
|
||||
component: SearchComponent,
|
||||
}, {
|
||||
path: 'tabs',
|
||||
component: TabsComponent,
|
||||
children: [{
|
||||
path: '',
|
||||
redirectTo: 'tab1',
|
||||
pathMatch: 'full',
|
||||
}, {
|
||||
path: 'tab1',
|
||||
component: Tab1Component,
|
||||
}, {
|
||||
path: 'tab2',
|
||||
component: Tab2Component,
|
||||
}],
|
||||
}],
|
||||
}];
|
||||
|
||||
|
|
|
|||
|
|
@ -1,53 +1,28 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
|
||||
import { ThemeModule } from '../../@theme/theme.module';
|
||||
import { ButtonsModule } from './buttons/buttons.module';
|
||||
import { UiFeaturesRoutingModule } from './ui-features-routing.module';
|
||||
import { UiFeaturesComponent } from './ui-features.component';
|
||||
import { GridComponent } from './grid/grid.component';
|
||||
import { ModalsComponent } from './modals/modals.component';
|
||||
import { IconsComponent } from './icons/icons.component';
|
||||
import { ModalComponent } from './modals/modal/modal.component';
|
||||
import { TypographyComponent } from './typography/typography.component';
|
||||
import { TabsComponent, Tab1Component, Tab2Component } from './tabs/tabs.component';
|
||||
import { SearchComponent } from './search-fields/search-fields.component';
|
||||
import { PopoversComponent } from './popovers/popovers.component';
|
||||
import {
|
||||
NgxPopoverCardComponent, NgxPopoverFormComponent,
|
||||
NgxPopoverTabsComponent,
|
||||
} from './popovers/popover-examples.component';
|
||||
|
||||
const components = [
|
||||
UiFeaturesComponent,
|
||||
GridComponent,
|
||||
ModalsComponent,
|
||||
IconsComponent,
|
||||
ModalComponent,
|
||||
TypographyComponent,
|
||||
TabsComponent,
|
||||
Tab1Component,
|
||||
Tab2Component,
|
||||
SearchComponent,
|
||||
PopoversComponent,
|
||||
NgxPopoverCardComponent,
|
||||
NgxPopoverFormComponent,
|
||||
NgxPopoverTabsComponent,
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
ThemeModule,
|
||||
UiFeaturesRoutingModule,
|
||||
ButtonsModule,
|
||||
],
|
||||
declarations: [
|
||||
...components,
|
||||
],
|
||||
entryComponents: [
|
||||
ModalComponent,
|
||||
NgxPopoverCardComponent,
|
||||
NgxPopoverFormComponent,
|
||||
NgxPopoverTabsComponent,
|
||||
],
|
||||
})
|
||||
export class UiFeaturesModule { }
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue