Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-16 15:40:11 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add ripple effects to controls across application

Browse source
This commit is contained in:
eugene-sinitsyn 2020-03-05 18:17:17 +03:00 • committed by Sergey Andrievskiy
parent ea9d7d56ea
commit 70ac56b28a
34 changed files with 284 additions and 180 deletions
Download patch file Download diff file Expand all files Collapse all files

54
src/app/@theme/components/header/header.component.html
View file

@ -1,24 +1,60 @@
<div class="header-container"> <div class="header-container">
<div class="logo-container"> <div class="logo-container">
<a (click)="toggleSidebar()" href="#" class="sidebar-toggle"> <a
href="#"
class="sidebar-toggle"
matRipple
[matRippleUnbounded]="true"
[matRippleCentered]="true"
(click)="toggleSidebar()"
>
<nb-icon icon="menu-2-outline"></nb-icon> <nb-icon icon="menu-2-outline"></nb-icon>
</a> </a>
<a class="logo" href="#" (click)="navigateHome()">ngx-<span>admin</span></a> <a class="logo" href="#" (click)="navigateHome()">ngx-<span>admin</span></a>
</div> </div>
<nb-select [selected]="currentTheme" (selectedChange)="changeTheme($event)" status="primary"> <nb-select
<nb-option *ngFor="let theme of themes" [value]="theme.value"> {{ theme.name }}</nb-option> status="primary"
matRipple
[selected]="currentTheme"
(selectedChange)="changeTheme($event)"
>
<nb-option
*ngFor="let theme of themes"
[value]="theme.value"
matRipple
>{{ theme.name }}</nb-option>
</nb-select> </nb-select>
</div> </div>
<div class="header-container"> <div class="header-container">
<nb-actions size="small"> <nb-actions size="small">
<nb-action class="control-item"> <nb-action
<nb-search type="rotate-layout"></nb-search> class="control-item"
</nb-action> matRipple
<nb-action class="control-item" icon="email-outline"></nb-action> [matRippleUnbounded]="true"
<nb-action class="control-item" icon="bell-outline"></nb-action> [matRippleCentered]="true"
<nb-action class="user-action" *nbIsGranted="['view', 'user']" > ><nb-search type="rotate-layout"></nb-search></nb-action>
<nb-action
class="control-item"
icon="email-outline"
matRipple
[matRippleUnbounded]="true"
[matRippleCentered]="true"
></nb-action>
<nb-action
class="control-item"
icon="bell-outline"
matRipple
[matRippleUnbounded]="true"
[matRippleCentered]="true"
></nb-action>
<nb-action
class="user-action"
*nbIsGranted="['view', 'user']"
matRipple
[matRippleUnbounded]="true"
[matRippleCentered]="true">
<nb-user [nbContextMenu]="userMenu" <nb-user [nbContextMenu]="userMenu"
[onlyPicture]="userPictureOnly" [onlyPicture]="userPictureOnly"
[name]="user?.name" [name]="user?.name"

4
src/app/@theme/components/header/header.component.scss
View file

@ -33,8 +33,8 @@
width: auto; width: auto;
.sidebar-toggle { .sidebar-toggle {
@include nb-ltr(padding-right, 1.25rem); @include nb-ltr(margin-right, 1.25rem);
@include nb-rtl(padding-left, 1.25rem); @include nb-rtl(margin-left, 1.25rem);
text-decoration: none; text-decoration: none;
color: nb-theme(text-hint-color); color: nb-theme(text-hint-color);
nb-icon { nb-icon {

4
src/app/@theme/styles/material/_ripple.scss
View file

@ -6,6 +6,10 @@
&:not(:empty) { &:not(:empty) {
transform: translateZ(0); transform: translateZ(0);
} }
&.mat-ripple-unbounded{
overflow: visible;
}
} }
.mat-ripple-element { .mat-ripple-element {

12
src/app/@theme/styles/themes.scss
View file

@ -106,9 +106,9 @@ $nb-themes: nb-register-theme((
select-min-width: 6rem, select-min-width: 6rem,
slide-out-background: linear-gradient(270deg, #222b45 0%, #151a30 100%), slide-out-background: linear-gradient(270deg, #e0e0e0 0%, #ebebeb 100%),
slide-out-shadow-color: 0 4px 14px 0 #8f9bb3, slide-out-shadow-color: 0 4px 14px 0 #ebebeb,
slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3, slide-out-shadow-color-rtl: 0 4px 14px 0 #ebebeb,
), material-light, material-light); ), material-light, material-light);
$nb-themes: nb-register-theme(( $nb-themes: nb-register-theme((
@ -127,7 +127,7 @@ $nb-themes: nb-register-theme((
select-min-width: 6rem, select-min-width: 6rem,
slide-out-background: linear-gradient(270deg, #222b45 0%, #151a30 100%), slide-out-background: linear-gradient(270deg, #1f1f1f 0%, #292929 100%),
slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,У slide-out-shadow-color: 0 4px 14px 0 #292929,
slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3, slide-out-shadow-color-rtl: 0 4px 14px 0 #292929,
), material-dark, material-dark); ), material-dark, material-dark);

4
src/app/pages/dashboard/contacts/contacts.component.html
View file

@ -3,7 +3,7 @@
<nb-tab tabTitle="Contacts"> <nb-tab tabTitle="Contacts">
<nb-list> <nb-list>
<nb-list-item class="contact" *ngFor="let c of contacts"> <nb-list-item matRipple class="contact" *ngFor="let c of contacts">
<nb-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="large"></nb-user> <nb-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="large"></nb-user>
<nb-icon icon="phone-outline" pack="eva"></nb-icon> <nb-icon icon="phone-outline" pack="eva"></nb-icon>
</nb-list-item> </nb-list-item>
@ -12,7 +12,7 @@
<nb-tab tabTitle="Recent"> <nb-tab tabTitle="Recent">
<nb-list> <nb-list>
<nb-list-item class="contact" *ngFor="let c of recent"> <nb-list-item matRipple class="contact" *ngFor="let c of recent">
<nb-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="large"></nb-user> <nb-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="large"></nb-user>
<span class="caption">{{ c.time | date: 'shortTime' }}</span> <span class="caption">{{ c.time | date: 'shortTime' }}</span>
</nb-list-item> </nb-list-item>

4
src/app/pages/dashboard/electricity/electricity.component.html
View file

@ -37,8 +37,8 @@
<span>291 <span class="caption">USD</span></span> <span>291 <span class="caption">USD</span></span>
</span> </span>
<nb-select [(selected)]="type" class="type-select"> <nb-select matRipple [(selected)]="type" class="type-select">
<nb-option *ngFor="let t of types" [value]="t">{{ t }}</nb-option> <nb-option matRipple *ngFor="let t of types" [value]="t">{{ t }}</nb-option>
</nb-select> </nb-select>
</nb-card-header> </nb-card-header>

10
src/app/pages/dashboard/security-cameras/security-cameras.component.html
View file

@ -22,7 +22,7 @@
<div class="grid-container"> <div class="grid-container">
<div class="single-view" *ngIf="isSingleView"> <div class="single-view" *ngIf="isSingleView">
<div class="camera" [style.background-image]="'url(' + selectedCamera.source + ')'"> <div class="camera single" [style.background-image]="'url(' + selectedCamera.source + ')'">
<span class="camera-name">{{ selectedCamera.title }}</span> <span class="camera-name">{{ selectedCamera.title }}</span>
</div> </div>
</div> </div>
@ -40,19 +40,19 @@
<nb-card-footer> <nb-card-footer>
<nb-actions [size]="actionSize" fullWidth> <nb-actions [size]="actionSize" fullWidth>
<nb-action> <nb-action matRipple>
<nb-icon icon="pause-circle-outline" pack="eva"></nb-icon> <nb-icon icon="pause-circle-outline" pack="eva"></nb-icon>
Pause Pause
</nb-action> </nb-action>
<nb-action> <nb-action matRipple>
<nb-icon icon="list-outline" pack="eva"></nb-icon> <nb-icon icon="list-outline" pack="eva"></nb-icon>
Logs Logs
</nb-action> </nb-action>
<nb-action> <nb-action matRipple>
<nb-icon icon="search-outline" pack="eva"></nb-icon> <nb-icon icon="search-outline" pack="eva"></nb-icon>
Search Search
</nb-action> </nb-action>
<nb-action> <nb-action matRipple>
<nb-icon icon="settings-2-outline" pack="eva"></nb-icon> <nb-icon icon="settings-2-outline" pack="eva"></nb-icon>
Setup Setup
</nb-action> </nb-action>

7
src/app/pages/dashboard/security-cameras/security-cameras.component.scss
View file

@ -72,6 +72,10 @@
background-size: cover; background-size: cover;
position: relative; position: relative;
&:not(.single) {
cursor: pointer;
}
&::before { &::before {
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
content: ''; content: '';
@ -96,6 +100,9 @@
} }
nb-action { nb-action {
cursor: pointer;
border-radius: 2px;
nb-icon { nb-icon {
@include nb-ltr(margin-right, 0.5rem); @include nb-ltr(margin-right, 0.5rem);
@include nb-rtl(margin-left, 0.5rem); @include nb-rtl(margin-left, 0.5rem);

1
src/app/pages/dashboard/status-card/status-card.component.scss
View file

@ -5,6 +5,7 @@
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
height: 6rem; height: 6rem;
cursor: pointer;
.icon-container { .icon-container {
height: 100%; height: 100%;

2
src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.html
View file

@ -42,6 +42,6 @@
<ng-content></ng-content> <ng-content></ng-content>
</div> </div>
<button nbButton appearance="ghost" class="power-bg" [class.on]="!off" (click)="switchPower()"> <button nbButton matRipple appearance="ghost" class="power-bg" [class.on]="!off" (click)="switchPower()">
<nb-icon class="power-icon" icon="power-outline" pack="eva"></nb-icon> <nb-icon class="power-icon" icon="power-outline" pack="eva"></nb-icon>
</button> </button>

12
src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss
View file

@ -39,25 +39,27 @@
position: absolute; position: absolute;
width: 5.25rem; width: 5.25rem;
height: 5.25rem; height: 5.25rem;
background-color: nb-theme(card-background-color); background-color: nb-theme(card-background-color) !important;
border-radius: 50%; border-radius: 50%;
bottom: 2%; bottom: 2%;
left: 50%; left: 50%;
transform: translate(-50%, 50%); transform: translate(-50%, 50%);
z-index: 2; z-index: 2;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer; cursor: pointer;
border: nb-theme(divider-width) nb-theme(divider-style) nb-theme(divider-color); border: nb-theme(divider-width) nb-theme(divider-style) nb-theme(divider-color);
&.on { &.on {
color: nb-theme(text-hint-color); color: nb-theme(color-primary-default);
} }
} }
.power-icon { .power-icon {
position: absolute;
top: 50%;
margin-top: -0.625rem;
left: 50%;
margin-left: -0.625rem;
font-size: 3rem; font-size: 3rem;
} }
} }

8
src/app/pages/dashboard/temperature/temperature.component.html
View file

@ -51,16 +51,16 @@
</div> </div>
<nb-radio-group [(ngModel)]="humidityMode" name="humidity-mode"> <nb-radio-group [(ngModel)]="humidityMode" name="humidity-mode">
<nb-radio value="cool"> <nb-radio matRipple value="cool">
<i class="nb-snowy-circled"></i> <i class="nb-snowy-circled"></i>
</nb-radio> </nb-radio>
<nb-radio value="warm"> <nb-radio matRipple value="warm">
<i class="nb-sunny-circled"></i> <i class="nb-sunny-circled"></i>
</nb-radio> </nb-radio>
<nb-radio value="heat"> <nb-radio matRipple value="heat">
<i class="nb-flame-circled"></i> <i class="nb-flame-circled"></i>
</nb-radio> </nb-radio>
<nb-radio value="fan"> <nb-radio matRipple value="fan">
<i class="nb-loop-circled"></i> <i class="nb-loop-circled"></i>
</nb-radio> </nb-radio>
</nb-radio-group> </nb-radio-group>

4
src/app/pages/dashboard/traffic/traffic.component.ts
View file

@ -12,8 +12,8 @@ import { TrafficChartData } from '../../../@core/data/traffic-chart';
<nb-card-header> <nb-card-header>
<span>Traffic Consumption</span> <span>Traffic Consumption</span>
<nb-select [(selected)]="type"> <nb-select matRipple [(selected)]="type">
<nb-option *ngFor="let t of types" [value]="t">{{ t }}</nb-option> <nb-option matRipple *ngFor="let t of types" [value]="t">{{ t }}</nb-option>
</nb-select> </nb-select>
</nb-card-header> </nb-card-header>

4
src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.html
View file

@ -1,7 +1,7 @@
<ngx-legend-chart [legendItems]="chartLegend"></ngx-legend-chart> <ngx-legend-chart [legendItems]="chartLegend"></ngx-legend-chart>
<nb-select class="period-select" [selected]="type" (selectedChange)="changePeriod($event)"> <nb-select matRipple class="period-select" [selected]="type" (selectedChange)="changePeriod($event)">
<nb-option *ngFor="let period of types" [value]="period"> <nb-option matRipple *ngFor="let period of types" [value]="period">
{{ period }} {{ period }}
</nb-option> </nb-option>
</nb-select> </nb-select>

6
src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.scss
View file

@ -11,9 +11,9 @@
ngx-legend-chart, ngx-legend-chart,
.period-select { .period-select {
padding-top: 1rem; margin-top: 1rem;
@include nb-ltr(padding-left, 0.5rem); @include nb-ltr(margin-left, 0.5rem);
@include nb-rtl(padding-right, 0.5rem); @include nb-rtl(margin-right, 0.5rem);
} }
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {

4
src/app/pages/e-commerce/earning-card/front-side/earning-card-front.component.html
View file

@ -1,6 +1,6 @@
<nb-card-header> <nb-card-header>
<nb-select [selected]="selectedCurrency" (selectedChange)="changeCurrency($event)"> <nb-select matRipple [selected]="selectedCurrency" (selectedChange)="changeCurrency($event)">
<nb-option *ngFor="let currency of currencies" [value]="currency">{{ currency }}</nb-option> <nb-option matRipple *ngFor="let currency of currencies" [value]="currency">{{ currency }}</nb-option>
</nb-select> </nb-select>
</nb-card-header> </nb-card-header>
<nb-card-body> <nb-card-body>

4
src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.html
View file

@ -1,6 +1,6 @@
<nb-card-header> <nb-card-header>
<span>Traffic</span> <span>Traffic</span>
<nb-select [selected]="type" (selectedChange)="changePeriod($event)"> <nb-select matRipple [selected]="type" (selectedChange)="changePeriod($event)">
<nb-option *ngFor="let period of types" [value]="period">{{ period }}</nb-option> <nb-option matRipple *ngFor="let period of types" [value]="period">{{ period }}</nb-option>
</nb-select> </nb-select>
</nb-card-header> </nb-card-header>

4
src/app/pages/e-commerce/user-activity/user-activity.component.html
View file

@ -2,8 +2,8 @@
<nb-card-header> <nb-card-header>
<span>User Activity</span> <span>User Activity</span>
<nb-select [selected]="type" (selectedChange)="getUserActivity($event); type = $event"> <nb-select matRipple [selected]="type" (selectedChange)="getUserActivity($event); type = $event">
<nb-option *ngFor="let t of types" [value]="t">{{ t }}</nb-option> <nb-option matRipple *ngFor="let t of types" [value]="t">{{ t }}</nb-option>
</nb-select> </nb-select>
</nb-card-header> </nb-card-header>

12
src/app/pages/extra-components/spinner/spinner-in-buttons/spinner-in-buttons.component.html
View file

@ -3,33 +3,33 @@
<nb-card-body> <nb-card-body>
<div class="row"> <div class="row">
<div class="col-md-12 col-lg-12 col-xxxl-12"> <div class="col-md-12 col-lg-12 col-xxxl-12">
<button nbButton status="success" size="large" (click)="toggleLoadingLargeGroupAnimation()" <button nbButton matRipple status="success" size="large" (click)="toggleLoadingLargeGroupAnimation()"
[nbSpinner]="loadingLargeGroup" nbSpinnerStatus="success" nbSpinnerSize="large" nbSpinnerMessage=""> [nbSpinner]="loadingLargeGroup" nbSpinnerStatus="success" nbSpinnerSize="large" nbSpinnerMessage="">
Download Download
</button> </button>
<button nbButton status="primary" size="large" (click)="toggleLoadingLargeGroupAnimation()" <button nbButton matRipple status="primary" size="large" (click)="toggleLoadingLargeGroupAnimation()"
[nbSpinner]="loadingLargeGroup" nbSpinnerStatus="primary" nbSpinnerSize="large" nbSpinnerMessage=""> [nbSpinner]="loadingLargeGroup" nbSpinnerStatus="primary" nbSpinnerSize="large" nbSpinnerMessage="">
Download Download
</button> </button>
<button nbButton status="warning" size="large" (click)="toggleLoadingLargeGroupAnimation()" <button nbButton matRipple status="warning" size="large" (click)="toggleLoadingLargeGroupAnimation()"
[nbSpinner]="loadingLargeGroup" nbSpinnerStatus="warning" nbSpinnerSize="large" nbSpinnerMessage=""> [nbSpinner]="loadingLargeGroup" nbSpinnerStatus="warning" nbSpinnerSize="large" nbSpinnerMessage="">
Download Download
</button> </button>
</div> </div>
<div class="col-md-12 col-lg-12 col-xxxl-12 size-medium-group"> <div class="col-md-12 col-lg-12 col-xxxl-12 size-medium-group">
<button nbButton status="danger" size="medium" (click)="toggleLoadingMediumGroupAnimation()" <button nbButton matRipple status="danger" size="medium" (click)="toggleLoadingMediumGroupAnimation()"
[nbSpinner]="loadingMediumGroup" nbSpinnerStatus="danger" nbSpinnerMessage=""> [nbSpinner]="loadingMediumGroup" nbSpinnerStatus="danger" nbSpinnerMessage="">
Download Download
</button> </button>
<button nbButton status="info" size="medium" (click)="toggleLoadingMediumGroupAnimation()" <button nbButton matRipple status="info" size="medium" (click)="toggleLoadingMediumGroupAnimation()"
[nbSpinner]="loadingMediumGroup" nbSpinnerStatus="info" nbSpinnerSize="small" nbSpinnerMessage=""> [nbSpinner]="loadingMediumGroup" nbSpinnerStatus="info" nbSpinnerSize="small" nbSpinnerMessage="">
Download Download
</button> </button>
<button nbButton status="primary" size="medium" (click)="toggleLoadingMediumGroupAnimation()" <button nbButton matRipple status="primary" size="medium" (click)="toggleLoadingMediumGroupAnimation()"
[nbSpinner]="loadingMediumGroup" nbSpinnerStatus="primary" nbSpinnerSize="tiny" nbSpinnerMessage=""> [nbSpinner]="loadingMediumGroup" nbSpinnerStatus="primary" nbSpinnerSize="tiny" nbSpinnerMessage="">
Download Download
</button> </button>

38
src/app/pages/forms/buttons/buttons.component.html
View file

@ -4,10 +4,10 @@
<nb-card-header>Hero Buttons</nb-card-header> <nb-card-header>Hero Buttons</nb-card-header>
<nb-card-body> <nb-card-body>
<div class="buttons-row"> <div class="buttons-row">
<button *ngFor="let status of statuses" nbButton [status]="status" hero> <button *ngFor="let status of statuses" nbButton matRipple [status]="status" hero>
{{ status }} {{ status }}
</button> </button>
<button disabled nbButton hero> <button disabled nbButton matRipple hero>
disabled disabled
</button> </button>
</div> </div>
@ -18,10 +18,10 @@
<nb-card-header>Default Buttons</nb-card-header> <nb-card-header>Default Buttons</nb-card-header>
<nb-card-body> <nb-card-body>
<div class="buttons-row"> <div class="buttons-row">
<button *ngFor="let status of statuses" nbButton [status]="status"> <button *ngFor="let status of statuses" nbButton matRipple [status]="status">
{{ status }} {{ status }}
</button> </button>
<button disabled nbButton> <button disabled nbButton matRipple>
disabled disabled
</button> </button>
</div> </div>
@ -32,10 +32,10 @@
<nb-card-header>Outline Buttons</nb-card-header> <nb-card-header>Outline Buttons</nb-card-header>
<nb-card-body> <nb-card-body>
<div class="buttons-row"> <div class="buttons-row">
<button *ngFor="let status of statuses" nbButton [status]="status" outline> <button *ngFor="let status of statuses" nbButton matRipple [status]="status" outline>
{{ status }} {{ status }}
</button> </button>
<button disabled nbButton outline> <button disabled nbButton matRipple outline>
disabled disabled
</button> </button>
</div> </div>
@ -46,10 +46,10 @@
<nb-card-header>Ghost Buttons</nb-card-header> <nb-card-header>Ghost Buttons</nb-card-header>
<nb-card-body> <nb-card-body>
<div class="buttons-row"> <div class="buttons-row">
<button *ngFor="let status of statuses" nbButton [status]="status" ghost> <button *ngFor="let status of statuses" nbButton matRipple [status]="status" ghost>
{{ status }} {{ status }}
</button> </button>
<button disabled nbButton outline> <button disabled nbButton matRipple outline>
disabled disabled
</button> </button>
</div> </div>
@ -62,7 +62,7 @@
<nb-card-header>Button shapes</nb-card-header> <nb-card-header>Button shapes</nb-card-header>
<nb-card-body> <nb-card-body>
<div class="buttons-row"> <div class="buttons-row">
<button *ngFor="let shape of shapes" nbButton [shape]="shape"> <button *ngFor="let shape of shapes" nbButton matRipple [shape]="shape">
{{ shape }} {{ shape }}
</button> </button>
</div> </div>
@ -73,7 +73,7 @@
<nb-card-header>Button sizes</nb-card-header> <nb-card-header>Button sizes</nb-card-header>
<nb-card-body> <nb-card-body>
<div class="buttons-row"> <div class="buttons-row">
<button *ngFor="let size of sizes" nbButton [size]="size"> <button *ngFor="let size of sizes" nbButton matRipple [size]="size">
{{ size }} {{ size }}
</button> </button>
</div> </div>
@ -86,13 +86,13 @@
<nb-card-header>Action Groups</nb-card-header> <nb-card-header>Action Groups</nb-card-header>
<nb-card-body> <nb-card-body>
<nb-actions size="medium"> <nb-actions size="medium">
<nb-action icon="menu-outline"></nb-action> <nb-action matRipple icon="menu-outline"></nb-action>
<nb-action icon="search-outline"></nb-action> <nb-action matRipple icon="search-outline"></nb-action>
<nb-action icon="email-outline"></nb-action> <nb-action matRipple icon="email-outline"></nb-action>
<nb-action disabled icon="bell-outline"></nb-action><nb-action> <nb-action disabled icon="bell-outline"></nb-action><nb-action>
<nb-user name="Han Solo"></nb-user> <nb-user matRipple name="Han Solo"></nb-user>
</nb-action> </nb-action>
<nb-action icon="settings-2-outline"></nb-action> <nb-action matRipple icon="settings-2-outline"></nb-action>
</nb-actions> </nb-actions>
</nb-card-body> </nb-card-body>
</nb-card> </nb-card>
@ -100,19 +100,19 @@
<nb-card> <nb-card>
<nb-card-body> <nb-card-body>
<nb-actions size="medium" fullWidth> <nb-actions size="medium" fullWidth>
<nb-action> <nb-action matRipple>
<nb-icon class="action-icon" icon="pause-circle-outline"></nb-icon> <nb-icon class="action-icon" icon="pause-circle-outline"></nb-icon>
<span>Pause</span> <span>Pause</span>
</nb-action> </nb-action>
<nb-action> <nb-action matRipple>
<nb-icon class="action-icon" icon="list-outline"></nb-icon> <nb-icon class="action-icon" icon="list-outline"></nb-icon>
<span>Logs</span> <span>Logs</span>
</nb-action> </nb-action>
<nb-action> <nb-action matRipple>
<nb-icon class="action-icon" icon="search-outline"></nb-icon> <nb-icon class="action-icon" icon="search-outline"></nb-icon>
<span>Search</span> <span>Search</span>
</nb-action> </nb-action>
<nb-action> <nb-action matRipple>
<nb-icon class="action-icon" icon="settings-2-outline"></nb-icon> <nb-icon class="action-icon" icon="settings-2-outline"></nb-icon>
<span>Setup</span> <span>Setup</span>
</nb-action> </nb-action>

5
src/app/pages/forms/buttons/buttons.component.scss
View file

@ -17,4 +17,9 @@
.actions-card { .actions-card {
height: 8rem; height: 8rem;
} }
nb-action {
border-radius: 2px;
cursor: pointer;
}
} }

6
src/app/pages/forms/form-inputs/form-inputs.component.html
View file

@ -26,9 +26,9 @@
<nb-card> <nb-card>
<nb-card-header>Select</nb-card-header> <nb-card-header>Select</nb-card-header>
<nb-card-body> <nb-card-body>
<nb-select selected="1"> <nb-select matRipple selected="1">
<nb-option value="1">Option 1</nb-option> <nb-option matRipple value="1">Option 1</nb-option>
<nb-option value="2">Option 2</nb-option> <nb-option matRipple value="2">Option 2</nb-option>
</nb-select> </nb-select>
</nb-card-body> </nb-card-body>
</nb-card> </nb-card>

14
src/app/pages/layout/accordion/accordion.component.html
View file

@ -3,13 +3,13 @@
<nb-card> <nb-card>
<nb-card-header>Toggle Accordion By Button</nb-card-header> <nb-card-header>Toggle Accordion By Button</nb-card-header>
<nb-card-body> <nb-card-body>
<button nbButton (click)="toggle()">Toggle First Item</button> <button nbButton matRipple (click)="toggle()">Toggle First Item</button>
</nb-card-body> </nb-card-body>
</nb-card> </nb-card>
<nb-accordion> <nb-accordion>
<nb-accordion-item #item> <nb-accordion-item #item>
<nb-accordion-item-header> <nb-accordion-item-header matRipple>
Product Details Product Details
</nb-accordion-item-header> </nb-accordion-item-header>
<nb-accordion-item-body> <nb-accordion-item-body>
@ -20,7 +20,7 @@
</nb-accordion-item> </nb-accordion-item>
<nb-accordion-item> <nb-accordion-item>
<nb-accordion-item-header> <nb-accordion-item-header matRipple>
Reviews Reviews
</nb-accordion-item-header> </nb-accordion-item-header>
<nb-accordion-item-body> <nb-accordion-item-body>
@ -31,7 +31,7 @@
</nb-accordion-item> </nb-accordion-item>
<nb-accordion-item> <nb-accordion-item>
<nb-accordion-item-header> <nb-accordion-item-header matRipple>
Edit Edit
</nb-accordion-item-header> </nb-accordion-item-header>
<nb-accordion-item-body> <nb-accordion-item-body>
@ -46,7 +46,7 @@
<div class="accordion-container col-md-12 col-lg-6 col-xxxl-6"> <div class="accordion-container col-md-12 col-lg-6 col-xxxl-6">
<nb-accordion multi> <nb-accordion multi>
<nb-accordion-item> <nb-accordion-item>
<nb-accordion-item-header> <nb-accordion-item-header matRipple>
Product Details Product Details
</nb-accordion-item-header> </nb-accordion-item-header>
<nb-accordion-item-body> <nb-accordion-item-body>
@ -57,7 +57,7 @@
</nb-accordion-item> </nb-accordion-item>
<nb-accordion-item> <nb-accordion-item>
<nb-accordion-item-header> <nb-accordion-item-header matRipple>
Reviews Reviews
</nb-accordion-item-header> </nb-accordion-item-header>
<nb-accordion-item-body> <nb-accordion-item-body>
@ -68,7 +68,7 @@
</nb-accordion-item> </nb-accordion-item>
<nb-accordion-item> <nb-accordion-item>
<nb-accordion-item-header> <nb-accordion-item-header matRipple>
Edit Edit
</nb-accordion-item-header> </nb-accordion-item-header>
<nb-accordion-item-body> <nb-accordion-item-body>

44
src/app/pages/layout/stepper/stepper.component.html
View file

@ -4,25 +4,25 @@
<nb-step [label]="labelOne"> <nb-step [label]="labelOne">
<ng-template #labelOne>First step</ng-template> <ng-template #labelOne>First step</ng-template>
<h3>Step content #1</h3> <h3>Step content #1</h3>
<button nbButton disabled nbStepperNext>prev</button> <button nbButton matRipple disabled nbStepperNext>prev</button>
<button nbButton nbStepperNext>next</button> <button nbButton matRipple nbStepperNext>next</button>
</nb-step> </nb-step>
<nb-step [label]="labelTwo"> <nb-step [label]="labelTwo">
<ng-template #labelTwo>Second step</ng-template> <ng-template #labelTwo>Second step</ng-template>
<h3>Step content #2</h3> <h3>Step content #2</h3>
<button nbButton nbStepperPrevious>prev</button> <button nbButton matRipple nbStepperPrevious>prev</button>
<button nbButton nbStepperNext>next</button> <button nbButton matRipple nbStepperNext>next</button>
</nb-step> </nb-step>
<nb-step label="Third step"> <nb-step label="Third step">
<h3>Step content #3</h3> <h3>Step content #3</h3>
<button nbButton nbStepperPrevious>prev</button> <button nbButton matRipple nbStepperPrevious>prev</button>
<button nbButton nbStepperNext>next</button> <button nbButton matRipple nbStepperNext>next</button>
</nb-step> </nb-step>
<nb-step [label]="labelFour"> <nb-step [label]="labelFour">
<ng-template #labelFour>Fourth step</ng-template> <ng-template #labelFour>Fourth step</ng-template>
<h3>Step content #4</h3> <h3>Step content #4</h3>
<button nbButton nbStepperPrevious>prev</button> <button nbButton matRipple nbStepperPrevious>prev</button>
<button nbButton disabled nbStepperNext>next</button> <button nbButton matRipple disabled nbStepperNext>next</button>
</nb-step> </nb-step>
</nb-stepper> </nb-stepper>
</nb-card-body> </nb-card-body>
@ -43,7 +43,7 @@
<input type="text" placeholder="Enter your name" class="form-control" formControlName="firstCtrl" <input type="text" placeholder="Enter your name" class="form-control" formControlName="firstCtrl"
[ngClass]="{'form-control-danger': firstForm.invalid && (firstForm.dirty || firstForm.touched)}"> [ngClass]="{'form-control-danger': firstForm.invalid && (firstForm.dirty || firstForm.touched)}">
</div> </div>
<button nbButton nbStepperNext>next</button> <button nbButton matRipple nbStepperNext>next</button>
</form> </form>
</nb-step> </nb-step>
<nb-step [stepControl]="secondForm" label="Second step"> <nb-step [stepControl]="secondForm" label="Second step">
@ -57,8 +57,8 @@
<input type="text" placeholder="Enter favorite movie" class="form-control" formControlName="secondCtrl" <input type="text" placeholder="Enter favorite movie" class="form-control" formControlName="secondCtrl"
[ngClass]="{'form-control-danger': secondForm.invalid && (secondForm.dirty || secondForm.touched)}"> [ngClass]="{'form-control-danger': secondForm.invalid && (secondForm.dirty || secondForm.touched)}">
</div> </div>
<button nbButton nbStepperPrevious>prev</button> <button nbButton matRipple nbStepperPrevious>prev</button>
<button nbButton nbStepperNext>next</button> <button nbButton matRipple nbStepperNext>next</button>
</form> </form>
</nb-step> </nb-step>
<nb-step [stepControl]="thirdForm" label="Third step"> <nb-step [stepControl]="thirdForm" label="Third step">
@ -70,14 +70,14 @@
<input type="text" placeholder="Enter something" class="form-control" formControlName="thirdCtrl" <input type="text" placeholder="Enter something" class="form-control" formControlName="thirdCtrl"
[ngClass]="{'form-control-danger': thirdForm.invalid && (thirdForm.dirty || thirdForm.touched)}"> [ngClass]="{'form-control-danger': thirdForm.invalid && (thirdForm.dirty || thirdForm.touched)}">
</div> </div>
<button nbButton nbStepperPrevious>prev</button> <button nbButton matRipple nbStepperPrevious>prev</button>
<button nbButton nbStepperNext>Confirm</button> <button nbButton matRipple nbStepperNext>Confirm</button>
</form> </form>
</nb-step> </nb-step>
<nb-step [stepControl]="thirdForm" [hidden]="true" label="Third step"> <nb-step [stepControl]="thirdForm" [hidden]="true" label="Third step">
<div class="step-container"> <div class="step-container">
<h3>Wizard completed!</h3> <h3>Wizard completed!</h3>
<button nbButton (click)="stepper.reset()">Try again</button> <button nbButton matRipple (click)="stepper.reset()">Try again</button>
</div> </div>
</nb-step> </nb-step>
</nb-stepper> </nb-stepper>
@ -97,8 +97,8 @@
viverra ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent metus turpis, commodo vel viverra ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent metus turpis, commodo vel
placerat quis, lobortis in ligula. placerat quis, lobortis in ligula.
</p> </p>
<button nbButton disabled nbStepperNext>prev</button> <button nbButton matRipple disabled nbStepperNext>prev</button>
<button nbButton nbStepperNext>next</button> <button nbButton matRipple nbStepperNext>next</button>
</nb-step> </nb-step>
<nb-step label="Second step"> <nb-step label="Second step">
<h3>Step content #2</h3> <h3>Step content #2</h3>
@ -107,8 +107,8 @@
sed ornare magna. Mauris vitae laoreet diam. Mauris fermentum ligula at lacinia semper. Nulla placerat dui sed ornare magna. Mauris vitae laoreet diam. Mauris fermentum ligula at lacinia semper. Nulla placerat dui
eu sapien pellentesque, eu placerat leo luctus. Cras pharetra blandit fermentum. eu sapien pellentesque, eu placerat leo luctus. Cras pharetra blandit fermentum.
</p> </p>
<button nbButton nbStepperPrevious>prev</button> <button nbButton matRipple nbStepperPrevious>prev</button>
<button nbButton nbStepperNext>next</button> <button nbButton matRipple nbStepperNext>next</button>
</nb-step> </nb-step>
<nb-step label="Third step"> <nb-step label="Third step">
<h3>Step content #3</h3> <h3>Step content #3</h3>
@ -123,8 +123,8 @@
sed ornare magna. Mauris vitae laoreet diam. Mauris fermentum ligula at lacinia semper. Nulla placerat dui sed ornare magna. Mauris vitae laoreet diam. Mauris fermentum ligula at lacinia semper. Nulla placerat dui
eu sapien pellentesque, eu placerat leo luctus. Cras pharetra blandit fermentum. eu sapien pellentesque, eu placerat leo luctus. Cras pharetra blandit fermentum.
</p> </p>
<button nbButton nbStepperPrevious>prev</button> <button nbButton matRipple nbStepperPrevious>prev</button>
<button nbButton nbStepperNext>next</button> <button nbButton matRipple nbStepperNext>next</button>
</nb-step> </nb-step>
<nb-step label="Fourth step"> <nb-step label="Fourth step">
<h3>Step content #4</h3> <h3>Step content #4</h3>
@ -133,8 +133,8 @@
sit amet fringilla orci efficitur. Nam bibendum lectus ut viverra tristique. Fusce eu pulvinar magna, quis sit amet fringilla orci efficitur. Nam bibendum lectus ut viverra tristique. Fusce eu pulvinar magna, quis
viverra ex. viverra ex.
</p> </p>
<button nbButton nbStepperPrevious>prev</button> <button nbButton matRipple nbStepperPrevious>prev</button>
<button nbButton disabled nbStepperNext>next</button> <button nbButton matRipple disabled nbStepperNext>next</button>
</nb-step> </nb-step>
</nb-stepper> </nb-stepper>
</nb-card-body> </nb-card-body>

2
src/app/pages/miscellaneous/not-found/not-found.component.html
View file

@ -5,7 +5,7 @@
<div class="flex-centered col-xl-4 col-lg-6 col-md-8 col-sm-12"> <div class="flex-centered col-xl-4 col-lg-6 col-md-8 col-sm-12">
<h2 class="title">404 Page Not Found</h2> <h2 class="title">404 Page Not Found</h2>
<small class="sub-title">The page you were looking for doesn't exist</small> <small class="sub-title">The page you were looking for doesn't exist</small>
<button nbButton fullWidth (click)="goToHome()" type="button" class="home-button"> <button nbButton matRipple fullWidth (click)="goToHome()" type="button" class="home-button">
Take me home Take me home
</button> </button>
</div> </div>

4
src/app/pages/modal-overlays/dialog/dialog-name-prompt/dialog-name-prompt.component.html
View file

@ -4,7 +4,7 @@
<input #name nbInput placeholder="Name"> <input #name nbInput placeholder="Name">
</nb-card-body> </nb-card-body>
<nb-card-footer> <nb-card-footer>
<button class="cancel" nbButton status="danger" (click)="cancel()">Cancel</button> <button class="cancel" nbButton matRipple status="danger" (click)="cancel()">Cancel</button>
<button nbButton status="success" (click)="submit(name.value)">Submit</button> <button nbButton matRipple status="success" (click)="submit(name.value)">Submit</button>
</nb-card-footer> </nb-card-footer>
</nb-card> </nb-card>

20
src/app/pages/modal-overlays/dialog/dialog.component.html
View file

@ -3,9 +3,9 @@
<nb-card> <nb-card>
<nb-card-header>Open Dialog</nb-card-header> <nb-card-header>Open Dialog</nb-card-header>
<nb-card-body> <nb-card-body>
<button nbButton (click)="open()">Open Dialog with component</button> <button nbButton matRipple (click)="open()">Open Dialog with component</button>
<button nbButton (click)="open2(dialog)">Open Dialog with template</button> <button nbButton matRipple (click)="open2(dialog)">Open Dialog with template</button>
</nb-card-body> </nb-card-body>
</nb-card> </nb-card>
</div> </div>
@ -14,9 +14,9 @@
<nb-card> <nb-card>
<nb-card-header>Open Without Backdrop</nb-card-header> <nb-card-header>Open Without Backdrop</nb-card-header>
<nb-card-body> <nb-card-body>
<button nbButton (click)="open()">Open Dialog with backdrop</button> <button nbButton matRipple (click)="open()">Open Dialog with backdrop</button>
<button nbButton (click)="openWithoutBackdrop(dialog)">Open Dialog without backdrop</button> <button nbButton matRipple (click)="openWithoutBackdrop(dialog)">Open Dialog without backdrop</button>
</nb-card-body> </nb-card-body>
</nb-card> </nb-card>
</div> </div>
@ -25,9 +25,9 @@
<nb-card> <nb-card>
<nb-card-header>Open Without Esc Close</nb-card-header> <nb-card-header>Open Without Esc Close</nb-card-header>
<nb-card-body> <nb-card-body>
<button nbButton (click)="open()">Open Dialog with esc close</button> <button nbButton matRipple (click)="open()">Open Dialog with esc close</button>
<button nbButton (click)="openWithoutEscClose(dialog)">Open Dialog without esc close</button> <button nbButton matRipple (click)="openWithoutEscClose(dialog)">Open Dialog without esc close</button>
</nb-card-body> </nb-card-body>
</nb-card> </nb-card>
</div> </div>
@ -36,9 +36,9 @@
<nb-card> <nb-card>
<nb-card-header>Open Without Backdrop Click</nb-card-header> <nb-card-header>Open Without Backdrop Click</nb-card-header>
<nb-card-body> <nb-card-body>
<button nbButton (click)="open()">Open Dialog with backdrop click</button> <button nbButton matRipple (click)="open()">Open Dialog with backdrop click</button>
<button nbButton (click)="openWithoutBackdropClick(dialog)">Open without backdrop click</button> <button nbButton matRipple (click)="openWithoutBackdropClick(dialog)">Open without backdrop click</button>
</nb-card-body> </nb-card-body>
</nb-card> </nb-card>
</div> </div>
@ -47,7 +47,7 @@
<nb-card class="form-input-card"> <nb-card class="form-input-card">
<nb-card-header>Return Result From Dialog</nb-card-header> <nb-card-header>Return Result From Dialog</nb-card-header>
<nb-card-body class="result-from-dialog"> <nb-card-body class="result-from-dialog">
<button nbButton (click)="open3()">Enter Name</button> <button nbButton matRipple (click)="open3()">Enter Name</button>
<br> <br>
<h3 class="title">Names:</h3> <h3 class="title">Names:</h3>
<ul> <ul>
@ -63,7 +63,7 @@
<nb-card-header>Template Dialog</nb-card-header> <nb-card-header>Template Dialog</nb-card-header>
<nb-card-body>{{ data }}</nb-card-body> <nb-card-body>{{ data }}</nb-card-body>
<nb-card-footer> <nb-card-footer>
<button nbButton (click)="ref.close()">Close Dialog</button> <button nbButton matRipple (click)="ref.close()">Close Dialog</button>
</nb-card-footer> </nb-card-footer>
</nb-card> </nb-card>
</ng-template> </ng-template>

2
src/app/pages/modal-overlays/dialog/showcase-dialog/showcase-dialog.component.html
View file

@ -9,6 +9,6 @@
in aliquet massa aliquet et. in aliquet massa aliquet et.
</nb-card-body> </nb-card-body>
<nb-card-footer> <nb-card-footer>
<button nbButton hero status="primary" (click)="dismiss()">Dismiss Dialog</button> <button nbButton matRipple hero status="primary" (click)="dismiss()">Dismiss Dialog</button>
</nb-card-footer> </nb-card-footer>
</nb-card> </nb-card>

2
src/app/pages/modal-overlays/popovers/popover-examples.component.ts
View file

@ -34,7 +34,7 @@ export class NgxPopoverTabsComponent {
<div class="form-group"> <div class="form-group">
<textarea class="form-control" placeholder="Message"></textarea> <textarea class="form-control" placeholder="Message"></textarea>
</div> </div>
<button type="submit" class="btn btn-primary w-100">Send</button> <button matRipple type="submit" class="btn btn-primary w-100">Send</button>
</form> </form>
</div> </div>
`, `,

60
src/app/pages/modal-overlays/popovers/popovers.component.html
View file

@ -4,10 +4,10 @@
<nb-card-header>Popover Position</nb-card-header> <nb-card-header>Popover Position</nb-card-header>
<nb-card-body> <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> <p>When popover has not enough space based on the configured placement, it will adjust accordingly trying to fit the screen.</p>
<button nbButton status="danger" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint" nbPopoverPlacement="left">Left</button> <button nbButton matRipple status="danger" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint" nbPopoverPlacement="left">Left</button>
<button nbButton status="danger" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint" nbPopoverPlacement="top">Top</button> <button nbButton matRipple status="danger" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint" nbPopoverPlacement="top">Top</button>
<button nbButton status="danger" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint" nbPopoverPlacement="bottom">Bottom</button> <button nbButton matRipple status="danger" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint" nbPopoverPlacement="bottom">Bottom</button>
<button nbButton status="danger" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint" nbPopoverPlacement="right">Right</button> <button nbButton matRipple status="danger" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint" nbPopoverPlacement="right">Right</button>
</nb-card-body> </nb-card-body>
</nb-card> </nb-card>
</div> </div>
@ -17,9 +17,9 @@
<nb-card-header>Simple Popovers</nb-card-header> <nb-card-header>Simple Popovers</nb-card-header>
<nb-card-body> <nb-card-body>
<p>In a simples form popover can take a string of text to render.</p> <p>In a simples form popover can take a string of text to render.</p>
<button nbButton status="success" nbPopover="Hello, how are you today?">on click</button> <button nbButton matRipple status="success" nbPopover="Hello, how are you today?">on click</button>
<button nbButton status="success" nbPopover="Hello, how are you today?" nbPopoverTrigger="hover">on hover</button> <button nbButton matRipple status="success" nbPopover="Hello, how are you today?" nbPopoverTrigger="hover">on hover</button>
<button nbButton status="success" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint">on hint</button> <button nbButton matRipple status="success" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint">on hint</button>
</nb-card-body> </nb-card-body>
</nb-card> </nb-card>
</div> </div>
@ -55,7 +55,7 @@
<div class="form-group"> <div class="form-group">
<textarea class="form-control" placeholder="Message"></textarea> <textarea class="form-control" placeholder="Message"></textarea>
</div> </div>
<button type="submit" class="btn btn-primary w-100">Send</button> <button matRipple type="submit" class="btn btn-primary w-100">Send</button>
</form> </form>
</div> </div>
</ng-template> </ng-template>
@ -76,9 +76,9 @@
<nb-card-header>Template Popovers</nb-card-header> <nb-card-header>Template Popovers</nb-card-header>
<nb-card-body> <nb-card-body>
<p>You can pass a refference to `ng-template` to be rendered.</p> <p>You can pass a refference to `ng-template` to be rendered.</p>
<button nbButton status="warning" [nbPopover]="tabs">With tabs</button> <button nbButton matRipple status="warning" [nbPopover]="tabs">With tabs</button>
<button nbButton status="warning" [nbPopover]="form">With form</button> <button nbButton matRipple status="warning" [nbPopover]="form">With form</button>
<button nbButton status="warning" [nbPopover]="card">With card</button> <button nbButton matRipple status="warning" [nbPopover]="card">With card</button>
</nb-card-body> </nb-card-body>
</nb-card> </nb-card>
</div> </div>
@ -88,9 +88,9 @@
<nb-card-header>Component Popovers</nb-card-header> <nb-card-header>Component Popovers</nb-card-header>
<nb-card-body> <nb-card-body>
<p>Same way popover can render any angular compnoent.</p> <p>Same way popover can render any angular compnoent.</p>
<button nbButton status="warning" [nbPopover]="tabsComponent">With tabs</button> <button nbButton matRipple status="warning" [nbPopover]="tabsComponent">With tabs</button>
<button nbButton status="warning" [nbPopover]="formComponent">With form</button> <button nbButton matRipple status="warning" [nbPopover]="formComponent">With form</button>
<button nbButton status="warning" [nbPopover]="cardComponent">With card</button> <button nbButton matRipple status="warning" [nbPopover]="cardComponent">With card</button>
</nb-card-body> </nb-card-body>
</nb-card> </nb-card>
</div> </div>
@ -103,52 +103,52 @@
<nb-card-body class="debounce-card"> <nb-card-body class="debounce-card">
<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> <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 nbButton nbPopover="Popover!" nbPopoverTrigger="hint"> <button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
show hint show hint
</button> </button>
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint"> <button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
show hint show hint
</button> </button>
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint"> <button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
show hint show hint
</button> </button>
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint"> <button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
show hint show hint
</button> </button>
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint"> <button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
show hint show hint
</button> </button>
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint"> <button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
show hint show hint
</button> </button>
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint"> <button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
show hint show hint
</button> </button>
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint"> <button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
show hint show hint
</button> </button>
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint"> <button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
show hint show hint
</button> </button>
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint"> <button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
show hint show hint
</button> </button>
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint"> <button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
show hint show hint
</button> </button>
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint"> <button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
show hint show hint
</button> </button>
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint"> <button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
show hint show hint
</button> </button>
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint"> <button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
show hint show hint
</button> </button>
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint"> <button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
show hint show hint
</button> </button>
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint"> <button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
show hint show hint
</button> </button>
</nb-card-body> </nb-card-body>

12
src/app/pages/modal-overlays/toastr/toastr.component.html
View file

@ -8,8 +8,8 @@
<div class="col-md-6 col-sm-12"> <div class="col-md-6 col-sm-12">
<div class="form-group"> <div class="form-group">
<label class="label">Position:</label> <label class="label">Position:</label>
<nb-select [(selected)]="position" class="position-select"> <nb-select [(selected)]="position" matRipple class="position-select">
<nb-option *ngFor="let p of positions" [value]="p">{{ p }}</nb-option> <nb-option *ngFor="let p of positions" [value]="p" matRipple>{{ p }}</nb-option>
</nb-select> </nb-select>
</div> </div>
@ -34,8 +34,8 @@
<div class="col-md-6 col-sm-12"> <div class="col-md-6 col-sm-12">
<div class="form-group"> <div class="form-group">
<label class="label">Toast type:</label> <label class="label">Toast type:</label>
<nb-select [(selected)]="status"> <nb-select [(selected)]="status" matRipple>
<nb-option *ngFor="let t of types" [value]="t">{{ t }}</nb-option> <nb-option *ngFor="let t of types" [value]="t" matRipple>{{ t }}</nb-option>
</nb-select> </nb-select>
</div> </div>
@ -53,7 +53,7 @@
</nb-card-body> </nb-card-body>
<nb-card-footer> <nb-card-footer>
<button nbButton (click)="makeToast()">Show toast</button> <button nbButton matRipple (click)="makeToast()">Show toast</button>
<button nbButton status="success" (click)="openRandomToast()">Random toast</button> <button nbButton matRipple status="success" (click)="openRandomToast()">Random toast</button>
</nb-card-footer> </nb-card-footer>
</nb-card> </nb-card>

24
src/app/pages/modal-overlays/tooltip/tooltip.component.html
View file

@ -3,8 +3,8 @@
<nb-card> <nb-card>
<nb-card-header>Tooltip With Icon</nb-card-header> <nb-card-header>Tooltip With Icon</nb-card-header>
<nb-card-body> <nb-card-body>
<button nbTooltip="This is a tooltip" nbTooltipIcon="home-outline" nbButton>Show Tooltip</button> <button nbTooltip="This is a tooltip" nbTooltipIcon="home-outline" nbButton matRipple>Show Tooltip</button>
<button nbTooltip="" nbTooltipIcon="alert-triangle" nbTooltipStatus="danger" nbButton>Show Tooltip</button> <button nbTooltip="" nbTooltipIcon="alert-triangle" nbTooltipStatus="danger" nbButton matRipple>Show Tooltip</button>
</nb-card-body> </nb-card-body>
</nb-card> </nb-card>
</div> </div>
@ -13,10 +13,10 @@
<nb-card> <nb-card>
<nb-card-header>Tooltip Placements</nb-card-header> <nb-card-header>Tooltip Placements</nb-card-header>
<nb-card-body> <nb-card-body>
<button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbButton>Top</button> <button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbButton matRipple>Top</button>
<button nbTooltip="This is a tooltip" nbTooltipPlacement="right" nbButton>Right</button> <button nbTooltip="This is a tooltip" nbTooltipPlacement="right" nbButton matRipple>Right</button>
<button nbTooltip="This is a tooltip" nbTooltipPlacement="bottom" nbButton>Bottom</button> <button nbTooltip="This is a tooltip" nbTooltipPlacement="bottom" nbButton matRipple>Bottom</button>
<button nbTooltip="This is a tooltip" nbTooltipPlacement="left" nbButton>Left</button> <button nbTooltip="This is a tooltip" nbTooltipPlacement="left" nbButton matRipple>Left</button>
</nb-card-body> </nb-card-body>
</nb-card> </nb-card>
</div> </div>
@ -25,12 +25,12 @@
<nb-card> <nb-card>
<nb-card-header>Colored Tooltips</nb-card-header> <nb-card-header>Colored Tooltips</nb-card-header>
<nb-card-body> <nb-card-body>
<button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbButton>Default</button> <button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbButton matRipple>Default</button>
<button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbTooltipStatus="primary" nbButton>Primary</button> <button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbTooltipStatus="primary" nbButton matRipple>Primary</button>
<button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbTooltipStatus="success" nbButton>Success</button> <button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbTooltipStatus="success" nbButton matRipple>Success</button>
<button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbTooltipStatus="danger" nbButton>Danger</button> <button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbTooltipStatus="danger" nbButton matRipple>Danger</button>
<button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbTooltipStatus="info" nbButton>Info</button> <button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbTooltipStatus="info" nbButton matRipple>Info</button>
<button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbTooltipStatus="warning" nbButton>Warning</button> <button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbTooltipStatus="warning" nbButton matRipple>Warning</button>
</nb-card-body> </nb-card-body>
</nb-card> </nb-card>
</div> </div>

8
src/app/pages/modal-overlays/window/window.component.html
View file

@ -3,9 +3,9 @@
<nb-card> <nb-card>
<nb-card-header>Window Form</nb-card-header> <nb-card-header>Window Form</nb-card-header>
<nb-card-body> <nb-card-body>
<button (click)="openWindowForm()" nbButton>Open window form</button> <button (click)="openWindowForm()" nbButton matRipple>Open window form</button>
<button (click)="openWindow(contentTemplate)" nbButton>Open window with template</button> <button (click)="openWindow(contentTemplate)" nbButton matRipple>Open window with template</button>
</nb-card-body> </nb-card-body>
</nb-card> </nb-card>
</div> </div>
@ -14,9 +14,9 @@
<nb-card> <nb-card>
<nb-card-header>Window Without Backdrop</nb-card-header> <nb-card-header>Window Without Backdrop</nb-card-header>
<nb-card-body> <nb-card-body>
<button (click)="openWindow(contentTemplate)" nbButton>Open window with backdrop</button> <button (click)="openWindow(contentTemplate)" nbButton matRipple>Open window with backdrop</button>
<button (click)="openWindowWithoutBackdrop()" nbButton>Open window without backdrop</button> <button (click)="openWindowWithoutBackdrop()" nbButton matRipple>Open window without backdrop</button>
</nb-card-body> </nb-card-body>
</nb-card> </nb-card>
</div> </div>

63
src/app/pages/ui-features/search-fields/search-fields.component.html
View file

@ -5,7 +5,14 @@
Layout Rotate Search Layout Rotate Search
</nb-card-header> </nb-card-header>
<nb-card-body> <nb-card-body>
<nb-search type="rotate-layout" tag="rotate-layout"></nb-search> <nb-search
matRipple
[matRippleUnbounded]="true"
[matRippleCentered]="true"
[matRippleRadius]="36"
type="rotate-layout"
tag="rotate-layout"
></nb-search>
</nb-card-body> </nb-card-body>
</nb-card> </nb-card>
</div> </div>
@ -15,7 +22,14 @@
Modal Zoomin Search Modal Zoomin Search
</nb-card-header> </nb-card-header>
<nb-card-body> <nb-card-body>
<nb-search type="modal-zoomin" tag="modal-zoomin"></nb-search> <nb-search
matRipple
[matRippleUnbounded]="true"
[matRippleCentered]="true"
[matRippleRadius]="36"
type="modal-zoomin"
tag="modal-zoomin"
></nb-search>
</nb-card-body> </nb-card-body>
</nb-card> </nb-card>
</div> </div>
@ -25,7 +39,14 @@
Modal Move Search Modal Move Search
</nb-card-header> </nb-card-header>
<nb-card-body> <nb-card-body>
<nb-search type="modal-move" tag="modal-move"></nb-search> <nb-search
matRipple
[matRippleUnbounded]="true"
[matRippleCentered]="true"
[matRippleRadius]="36"
type="modal-move"
tag="modal-move"
></nb-search>
</nb-card-body> </nb-card-body>
</nb-card> </nb-card>
</div> </div>
@ -35,7 +56,14 @@
Modal Drop Search Modal Drop Search
</nb-card-header> </nb-card-header>
<nb-card-body> <nb-card-body>
<nb-search type="modal-drop" tag="modal-drop"></nb-search> <nb-search
matRipple
[matRippleUnbounded]="true"
[matRippleCentered]="true"
[matRippleRadius]="36"
type="modal-drop"
tag="modal-drop"
></nb-search>
</nb-card-body> </nb-card-body>
</nb-card> </nb-card>
</div> </div>
@ -45,7 +73,14 @@
Modal Half Search Modal Half Search
</nb-card-header> </nb-card-header>
<nb-card-body> <nb-card-body>
<nb-search type="modal-half" tag="modal-half"></nb-search> <nb-search
matRipple
[matRippleUnbounded]="true"
[matRippleCentered]="true"
[matRippleRadius]="36"
type="modal-half"
tag="modal-half"
></nb-search>
</nb-card-body> </nb-card-body>
</nb-card> </nb-card>
</div> </div>
@ -55,7 +90,14 @@
Curtain Search Curtain Search
</nb-card-header> </nb-card-header>
<nb-card-body> <nb-card-body>
<nb-search type="curtain" tag="curtain"></nb-search> <nb-search
matRipple
[matRippleUnbounded]="true"
[matRippleCentered]="true"
[matRippleRadius]="36"
type="curtain"
tag="curtain"
></nb-search>
</nb-card-body> </nb-card-body>
</nb-card> </nb-card>
</div> </div>
@ -65,7 +107,14 @@
Column Curtain Search Column Curtain Search
</nb-card-header> </nb-card-header>
<nb-card-body> <nb-card-body>
<nb-search type="column-curtain" tag="column-curtain"></nb-search> <nb-search
matRipple
[matRippleUnbounded]="true"
[matRippleCentered]="true"
[matRippleRadius]="36"
type="column-curtain"
tag="column-curtain"
></nb-search>
</nb-card-body> </nb-card-body>
</nb-card> </nb-card>
</div> </div>