mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 15:40:11 +01:00
Add ripple effects to controls across application
This commit is contained in:
eugene-sinitsyn
Maksim Karatkevich
parent
bef0105a9f
commit
3f77efdabf
34 changed files with 1538 additions and 21 deletions
|
|
@ -1,12 +1,28 @@
|
|||
<div class="header-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>
|
||||
</a>
|
||||
<a class="logo" href="#" (click)="navigateHome()">ngx-<span>admin</span></a>
|
||||
</div>
|
||||
<nb-select [selected]="currentTheme" (selectedChange)="changeTheme($event)" status="primary">
|
||||
<nb-option *ngFor="let theme of themes" [value]="theme.value"> {{ theme.name }}</nb-option>
|
||||
<nb-select
|
||||
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>
|
||||
<ngx-layout-direction-switcher class="direction-switcher"></ngx-layout-direction-switcher>
|
||||
</div>
|
||||
|
|
@ -14,12 +30,32 @@
|
|||
<div class="header-container">
|
||||
<nb-actions size="small">
|
||||
|
||||
<nb-action class="control-item">
|
||||
<nb-search type="rotate-layout"></nb-search>
|
||||
</nb-action>
|
||||
<nb-action class="control-item" icon="email-outline"></nb-action>
|
||||
<nb-action class="control-item" icon="bell-outline"></nb-action>
|
||||
<nb-action class="user-action" *nbIsGranted="['view', 'user']" >
|
||||
<nb-action
|
||||
class="control-item"
|
||||
matRipple
|
||||
[matRippleUnbounded]="true"
|
||||
[matRippleCentered]="true"
|
||||
><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"
|
||||
[onlyPicture]="userPictureOnly"
|
||||
[name]="user?.name"
|
||||
|
|
|
|||
|
|
@ -33,8 +33,8 @@
|
|||
width: auto;
|
||||
|
||||
.sidebar-toggle {
|
||||
@include nb-ltr(padding-right, 1.25rem);
|
||||
@include nb-rtl(padding-left, 1.25rem);
|
||||
@include nb-ltr(margin-right, 1.25rem);
|
||||
@include nb-rtl(margin-left, 1.25rem);
|
||||
text-decoration: none;
|
||||
color: nb-theme(text-hint-color);
|
||||
nb-icon {
|
||||
|
|
|
|||
|
|
@ -6,6 +6,10 @@
|
|||
&:not(:empty) {
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
&.mat-ripple-unbounded{
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-ripple-element {
|
||||
|
|
|
|||
|
|
@ -106,9 +106,9 @@ $nb-themes: nb-register-theme((
|
|||
|
||||
select-min-width: 6rem,
|
||||
|
||||
slide-out-background: linear-gradient(270deg, #222b45 0%, #151a30 100%),
|
||||
slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,
|
||||
slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
|
||||
slide-out-background: linear-gradient(270deg, #e0e0e0 0%, #ebebeb 100%),
|
||||
slide-out-shadow-color: 0 4px 14px 0 #ebebeb,
|
||||
slide-out-shadow-color-rtl: 0 4px 14px 0 #ebebeb,
|
||||
), material-light, material-light);
|
||||
|
||||
$nb-themes: nb-register-theme((
|
||||
|
|
@ -127,7 +127,7 @@ $nb-themes: nb-register-theme((
|
|||
|
||||
select-min-width: 6rem,
|
||||
|
||||
slide-out-background: linear-gradient(270deg, #222b45 0%, #151a30 100%),
|
||||
slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,У
|
||||
slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
|
||||
slide-out-background: linear-gradient(270deg, #1f1f1f 0%, #292929 100%),
|
||||
slide-out-shadow-color: 0 4px 14px 0 #292929,
|
||||
slide-out-shadow-color-rtl: 0 4px 14px 0 #292929,
|
||||
), material-dark, material-dark);
|
||||
|
|
|
|||
23
src/app/pages/dashboard/contacts/contacts.component.html
Normal file
23
src/app/pages/dashboard/contacts/contacts.component.html
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<nb-card size="giant">
|
||||
<nb-tabset fullWidth>
|
||||
|
||||
<nb-tab tabTitle="Contacts">
|
||||
<nb-list>
|
||||
<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-icon icon="phone-outline" pack="eva"></nb-icon>
|
||||
</nb-list-item>
|
||||
</nb-list>
|
||||
</nb-tab>
|
||||
|
||||
<nb-tab tabTitle="Recent">
|
||||
<nb-list>
|
||||
<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>
|
||||
<span class="caption">{{ c.time | date: 'shortTime' }}</span>
|
||||
</nb-list-item>
|
||||
</nb-list>
|
||||
</nb-tab>
|
||||
|
||||
</nb-tabset>
|
||||
</nb-card>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<nb-card class="cards-container">
|
||||
<nb-card size="large" class="table-card">
|
||||
<nb-card-header>
|
||||
Electricity Consumption
|
||||
</nb-card-header>
|
||||
|
||||
<nb-tabset fullWidth>
|
||||
<nb-tab *ngFor="let year of listData" [tabTitle]="year.title" [active]="year.active">
|
||||
<nb-list>
|
||||
<nb-list-item *ngFor="let month of year.months">
|
||||
<span class="month">{{ month.month }}</span>
|
||||
<span>
|
||||
<nb-icon
|
||||
[class.down]="month.down"
|
||||
[class.up]="!month.down"
|
||||
[icon]="month.down ? 'arrow-down' : 'arrow-up'" pack="eva">
|
||||
</nb-icon>
|
||||
{{ month.delta }}
|
||||
</span>
|
||||
<span class="results">
|
||||
{{ month.kWatts }} <span class="caption">kWh</span> / {{ month.cost }} <span class="caption">USD</span>
|
||||
</span>
|
||||
</nb-list-item>
|
||||
</nb-list>
|
||||
</nb-tab>
|
||||
</nb-tabset>
|
||||
</nb-card>
|
||||
|
||||
<nb-card size="large" class="chart-card">
|
||||
<nb-card-header>
|
||||
<span class="stats">
|
||||
<span class="caption">Consumed</span>
|
||||
<span>816 <span class="caption">kWh</span></span>
|
||||
</span>
|
||||
<span class="stats">
|
||||
<span class="caption">Spent</span>
|
||||
<span>291 <span class="caption">USD</span></span>
|
||||
</span>
|
||||
|
||||
<nb-select matRipple [(selected)]="type" class="type-select">
|
||||
<nb-option matRipple *ngFor="let t of types" [value]="t">{{ t }}</nb-option>
|
||||
</nb-select>
|
||||
</nb-card-header>
|
||||
|
||||
<ngx-electricity-chart [data]="chartData"></ngx-electricity-chart>
|
||||
</nb-card>
|
||||
</nb-card>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<nb-card size="giant">
|
||||
|
||||
<nb-card-header>
|
||||
Security Cameras
|
||||
|
||||
<button class="single-view-button"
|
||||
nbButton
|
||||
size="small"
|
||||
[appearance]="isSingleView ? 'filled' : 'outline'"
|
||||
(click)="isSingleView = true">
|
||||
<i class="nb-square"></i>
|
||||
</button>
|
||||
<button class="grid-view-button"
|
||||
nbButton
|
||||
size="small"
|
||||
[appearance]="isSingleView ? 'outline' : 'filled'"
|
||||
(click)="isSingleView = false">
|
||||
<nb-icon icon="grid" pack="eva"></nb-icon>
|
||||
</button>
|
||||
</nb-card-header>
|
||||
|
||||
<div class="grid-container">
|
||||
|
||||
<div class="single-view" *ngIf="isSingleView">
|
||||
<div class="camera single" [style.background-image]="'url(' + selectedCamera.source + ')'">
|
||||
<span class="camera-name">{{ selectedCamera.title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid-view" *ngIf="!isSingleView">
|
||||
<div class="camera"
|
||||
*ngFor="let camera of cameras"
|
||||
[style.background-image]="'url(' + camera.source + ')'"
|
||||
(click)="selectCamera(camera)">
|
||||
<span class="camera-name">{{ camera.title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<nb-card-footer>
|
||||
<nb-actions [size]="actionSize" fullWidth>
|
||||
<nb-action matRipple>
|
||||
<nb-icon icon="pause-circle-outline" pack="eva"></nb-icon>
|
||||
Pause
|
||||
</nb-action>
|
||||
<nb-action matRipple>
|
||||
<nb-icon icon="list-outline" pack="eva"></nb-icon>
|
||||
Logs
|
||||
</nb-action>
|
||||
<nb-action matRipple>
|
||||
<nb-icon icon="search-outline" pack="eva"></nb-icon>
|
||||
Search
|
||||
</nb-action>
|
||||
<nb-action matRipple>
|
||||
<nb-icon icon="settings-2-outline" pack="eva"></nb-icon>
|
||||
Setup
|
||||
</nb-action>
|
||||
</nb-actions>
|
||||
</nb-card-footer>
|
||||
</nb-card>
|
||||
|
|
@ -72,6 +72,10 @@
|
|||
background-size: cover;
|
||||
position: relative;
|
||||
|
||||
&:not(.single) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&::before {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
content: '';
|
||||
|
|
@ -96,6 +100,9 @@
|
|||
}
|
||||
|
||||
nb-action {
|
||||
cursor: pointer;
|
||||
border-radius: 2px;
|
||||
|
||||
nb-icon {
|
||||
@include nb-ltr(margin-right, 0.5rem);
|
||||
@include nb-rtl(margin-left, 0.5rem);
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: 6rem;
|
||||
cursor: pointer;
|
||||
|
||||
.icon-container {
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,47 @@
|
|||
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsAQMAAABDsxw2AAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAACJJREFUaN7twTEBAAAAwiD7pzbFPmAAAAAAAAAAAAAAAGQOLbQAAU3zwM4AAAAASUVORK5CYII=">
|
||||
|
||||
<div class="svg-container">
|
||||
<svg #svgRoot xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
|
||||
[attr.viewBox]="styles.viewBox" preserveAspectRatio="xMinYMin meet" (mousedown)="mouseDown($event)">
|
||||
<defs>
|
||||
|
||||
<filter [attr.id]="'blurFilter' + svgControlId" x="0" y="0" width="100%" height="100%">
|
||||
<feGaussianBlur in="SourceGraphic" [attr.stdDeviation]="styles.blurRadius" />
|
||||
<feComponentTransfer>
|
||||
<feFuncA type="discrete" tableValues="1 1"/>
|
||||
</feComponentTransfer>
|
||||
</filter>
|
||||
|
||||
<clipPath [attr.id]="'sliderClip' + svgControlId">
|
||||
<path [attr.d]="styles.clipPathStr" stroke="black"></path>
|
||||
</clipPath>
|
||||
|
||||
</defs>
|
||||
<g [attr.transform]="styles.arcTranslateStr">
|
||||
|
||||
<g class="toClip" [attr.clip-path]="getUrlPath('#sliderClip')">
|
||||
<g class="toFilter" [attr.filter]="getUrlPath('#blurFilter')">
|
||||
<path [attr.d]="arc.d" [attr.fill]="off ? styles.nonSelectedArc.color : arc.color" *ngFor="let arc of styles.gradArcs"></path>
|
||||
</g>
|
||||
<!-- ngFor is a quirk fix for webkit rendering issues -->
|
||||
<path [attr.d]="styles.nonSelectedArc.d" [attr.fill]="styles.nonSelectedArc.color" *ngFor="let number of [0,1,2,3,4,5]"></path>
|
||||
</g>
|
||||
|
||||
<circle [attr.cx]="styles.thumbPosition.x"
|
||||
[attr.cy]="styles.thumbPosition.y"
|
||||
[attr.r]="pinRadius"
|
||||
[attr.stroke-width]="thumbBorder / scaleFactor"
|
||||
[attr.fill]="off ? 'none' : thumbBg"
|
||||
[attr.stroke]="off ? 'none' : thumbBorderColor">
|
||||
</circle>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="temperature-bg">
|
||||
<ng-content></ng-content>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</button>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
|
||||
@include nb-install-component() {
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.svg-container {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.temperature-bg {
|
||||
position: absolute;
|
||||
width: 88%;
|
||||
height: 88%;
|
||||
top: 13%;
|
||||
left: 6%;
|
||||
border-radius: 50%;
|
||||
z-index: 1;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
border: nb-theme(divider-width) nb-theme(divider-style) nb-theme(divider-color);
|
||||
}
|
||||
|
||||
.power-bg {
|
||||
position: absolute;
|
||||
width: 5.25rem;
|
||||
height: 5.25rem;
|
||||
background-color: nb-theme(card-background-color) !important;
|
||||
border-radius: 50%;
|
||||
bottom: 2%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 50%);
|
||||
z-index: 2;
|
||||
|
||||
cursor: pointer;
|
||||
border: nb-theme(divider-width) nb-theme(divider-style) nb-theme(divider-color);
|
||||
|
||||
&.on {
|
||||
color: nb-theme(color-primary-default);
|
||||
}
|
||||
}
|
||||
|
||||
.power-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -0.625rem;
|
||||
left: 50%;
|
||||
margin-left: -0.625rem;
|
||||
font-size: 3rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -51,16 +51,16 @@
|
|||
</div>
|
||||
|
||||
<nb-radio-group [(ngModel)]="humidityMode" name="humidity-mode">
|
||||
<nb-radio value="cool">
|
||||
<nb-radio matRipple value="cool">
|
||||
<i class="nb-snowy-circled"></i>
|
||||
</nb-radio>
|
||||
<nb-radio value="warm">
|
||||
<nb-radio matRipple value="warm">
|
||||
<i class="nb-sunny-circled"></i>
|
||||
</nb-radio>
|
||||
<nb-radio value="heat">
|
||||
<nb-radio matRipple value="heat">
|
||||
<i class="nb-flame-circled"></i>
|
||||
</nb-radio>
|
||||
<nb-radio value="fan">
|
||||
<nb-radio matRipple value="fan">
|
||||
<i class="nb-loop-circled"></i>
|
||||
</nb-radio>
|
||||
</nb-radio-group>
|
||||
|
|
|
|||
51
src/app/pages/dashboard/traffic/traffic.component.ts
Normal file
51
src/app/pages/dashboard/traffic/traffic.component.ts
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
import { Component, OnDestroy } from '@angular/core';
|
||||
import { NbThemeService } from '@nebular/theme';
|
||||
import { takeWhile } from 'rxjs/operators';
|
||||
|
||||
import { TrafficChartData } from '../../../@core/data/traffic-chart';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-traffic',
|
||||
styleUrls: ['./traffic.component.scss'],
|
||||
template: `
|
||||
<nb-card size="tiny">
|
||||
<nb-card-header>
|
||||
<span>Traffic Consumption</span>
|
||||
|
||||
<nb-select matRipple [(selected)]="type">
|
||||
<nb-option matRipple *ngFor="let t of types" [value]="t">{{ t }}</nb-option>
|
||||
</nb-select>
|
||||
</nb-card-header>
|
||||
|
||||
<ngx-traffic-chart [points]="trafficChartPoints"></ngx-traffic-chart>
|
||||
</nb-card>
|
||||
`,
|
||||
})
|
||||
export class TrafficComponent implements OnDestroy {
|
||||
|
||||
private alive = true;
|
||||
|
||||
trafficChartPoints: number[];
|
||||
type = 'month';
|
||||
types = ['week', 'month', 'year'];
|
||||
currentTheme: string;
|
||||
|
||||
constructor(private themeService: NbThemeService,
|
||||
private trafficChartService: TrafficChartData) {
|
||||
this.themeService.getJsTheme()
|
||||
.pipe(takeWhile(() => this.alive))
|
||||
.subscribe(theme => {
|
||||
this.currentTheme = theme.name;
|
||||
});
|
||||
|
||||
this.trafficChartService.getTrafficChartData()
|
||||
.pipe(takeWhile(() => this.alive))
|
||||
.subscribe((data) => {
|
||||
this.trafficChartPoints = data;
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.alive = false;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<ngx-legend-chart [legendItems]="chartLegend"></ngx-legend-chart>
|
||||
|
||||
<nb-select matRipple class="period-select" [selected]="type" (selectedChange)="changePeriod($event)">
|
||||
<nb-option matRipple *ngFor="let period of types" [value]="period">
|
||||
{{ period }}
|
||||
</nb-option>
|
||||
</nb-select>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
padding: 1.5rem 4.5rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
margin: -1rem;
|
||||
|
||||
ngx-legend-chart,
|
||||
.period-select {
|
||||
margin-top: 1rem;
|
||||
@include nb-ltr(margin-left, 0.5rem);
|
||||
@include nb-rtl(margin-right, 0.5rem);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
.period-select {
|
||||
@include nb-ltr(margin-left, auto);
|
||||
@include nb-rtl(margin-right, auto);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<nb-card-header>
|
||||
<nb-select matRipple [selected]="selectedCurrency" (selectedChange)="changeCurrency($event)">
|
||||
<nb-option matRipple *ngFor="let currency of currencies" [value]="currency">{{ currency }}</nb-option>
|
||||
</nb-select>
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="chart-info">
|
||||
<div>Daily Income</div>
|
||||
<div class="h6">{{ earningLiveUpdateCardData.dailyIncome | ngxNumberWithCommas }}</div>
|
||||
<div class="delta"
|
||||
[class.up]="earningLiveUpdateCardData.delta.up"
|
||||
[class.down]="!earningLiveUpdateCardData.delta.up">
|
||||
<nb-icon [icon]="earningLiveUpdateCardData.delta.up ? 'arrow-up' : 'arrow-down'"
|
||||
pack="eva"
|
||||
class="direction">
|
||||
</nb-icon>
|
||||
{{ earningLiveUpdateCardData.delta.value }}%
|
||||
</div>
|
||||
</div>
|
||||
<ngx-earning-live-update-chart
|
||||
[liveUpdateChartData]="liveUpdateChartData">
|
||||
</ngx-earning-live-update-chart>
|
||||
</nb-card-body>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<nb-card-header>
|
||||
<span>Traffic</span>
|
||||
<nb-select matRipple [selected]="type" (selectedChange)="changePeriod($event)">
|
||||
<nb-option matRipple *ngFor="let period of types" [value]="period">{{ period }}</nb-option>
|
||||
</nb-select>
|
||||
</nb-card-header>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<nb-card size="medium">
|
||||
|
||||
<nb-card-header>
|
||||
<span>User Activity</span>
|
||||
<nb-select matRipple [selected]="type" (selectedChange)="getUserActivity($event); type = $event">
|
||||
<nb-option matRipple *ngFor="let t of types" [value]="t">{{ t }}</nb-option>
|
||||
</nb-select>
|
||||
</nb-card-header>
|
||||
|
||||
<nb-list class="user-activity-list">
|
||||
<nb-list-item *ngFor="let item of userActivity">
|
||||
|
||||
<div class="visited-date">
|
||||
{{ item.date }}
|
||||
</div>
|
||||
|
||||
<div class="visited-pages-count">
|
||||
<div class="caption">Pages Visit</div>
|
||||
<div class="value">{{ item.pagesVisitCount }}</div>
|
||||
</div>
|
||||
|
||||
<div class="visited-percentages">
|
||||
<div class="caption">New visits, %</div>
|
||||
<div class="delta value" [class.up]="item.deltaUp" [class.down]="!item.deltaUp">
|
||||
<nb-icon [icon]="item.deltaUp ? 'arrow-up' : 'arrow-down'" pack="eva"></nb-icon>
|
||||
{{ item.newVisits }}%
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</nb-list-item>
|
||||
</nb-list>
|
||||
|
||||
</nb-card>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<nb-card>
|
||||
<nb-card-header>Button With Spinner</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="row">
|
||||
<div class="col-md-12 col-lg-12 col-xxxl-12">
|
||||
<button nbButton matRipple status="success" size="large" (click)="toggleLoadingLargeGroupAnimation()"
|
||||
[nbSpinner]="loadingLargeGroup" nbSpinnerStatus="success" nbSpinnerSize="large" nbSpinnerMessage="">
|
||||
Download
|
||||
</button>
|
||||
|
||||
<button nbButton matRipple status="primary" size="large" (click)="toggleLoadingLargeGroupAnimation()"
|
||||
[nbSpinner]="loadingLargeGroup" nbSpinnerStatus="primary" nbSpinnerSize="large" nbSpinnerMessage="">
|
||||
Download
|
||||
</button>
|
||||
|
||||
<button nbButton matRipple status="warning" size="large" (click)="toggleLoadingLargeGroupAnimation()"
|
||||
[nbSpinner]="loadingLargeGroup" nbSpinnerStatus="warning" nbSpinnerSize="large" nbSpinnerMessage="">
|
||||
Download
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-md-12 col-lg-12 col-xxxl-12 size-medium-group">
|
||||
<button nbButton matRipple status="danger" size="medium" (click)="toggleLoadingMediumGroupAnimation()"
|
||||
[nbSpinner]="loadingMediumGroup" nbSpinnerStatus="danger" nbSpinnerMessage="">
|
||||
Download
|
||||
</button>
|
||||
|
||||
<button nbButton matRipple status="info" size="medium" (click)="toggleLoadingMediumGroupAnimation()"
|
||||
[nbSpinner]="loadingMediumGroup" nbSpinnerStatus="info" nbSpinnerSize="small" nbSpinnerMessage="">
|
||||
Download
|
||||
</button>
|
||||
|
||||
<button nbButton matRipple status="primary" size="medium" (click)="toggleLoadingMediumGroupAnimation()"
|
||||
[nbSpinner]="loadingMediumGroup" nbSpinnerStatus="primary" nbSpinnerSize="tiny" nbSpinnerMessage="">
|
||||
Download
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
123
src/app/pages/forms/buttons/buttons.component.html
Normal file
123
src/app/pages/forms/buttons/buttons.component.html
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<nb-card>
|
||||
<nb-card-header>Hero Buttons</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="buttons-row">
|
||||
<button *ngFor="let status of statuses" nbButton matRipple [status]="status" hero>
|
||||
{{ status }}
|
||||
</button>
|
||||
<button disabled nbButton matRipple hero>
|
||||
disabled
|
||||
</button>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<nb-card>
|
||||
<nb-card-header>Default Buttons</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="buttons-row">
|
||||
<button *ngFor="let status of statuses" nbButton matRipple [status]="status">
|
||||
{{ status }}
|
||||
</button>
|
||||
<button disabled nbButton matRipple>
|
||||
disabled
|
||||
</button>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<nb-card>
|
||||
<nb-card-header>Outline Buttons</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="buttons-row">
|
||||
<button *ngFor="let status of statuses" nbButton matRipple [status]="status" outline>
|
||||
{{ status }}
|
||||
</button>
|
||||
<button disabled nbButton matRipple outline>
|
||||
disabled
|
||||
</button>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<nb-card>
|
||||
<nb-card-header>Ghost Buttons</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="buttons-row">
|
||||
<button *ngFor="let status of statuses" nbButton matRipple [status]="status" ghost>
|
||||
{{ status }}
|
||||
</button>
|
||||
<button disabled nbButton matRipple outline>
|
||||
disabled
|
||||
</button>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-12 col-lg-12 col-xxxl-6">
|
||||
<nb-card>
|
||||
<nb-card-header>Button shapes</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="buttons-row">
|
||||
<button *ngFor="let shape of shapes" nbButton matRipple [shape]="shape">
|
||||
{{ shape }}
|
||||
</button>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<nb-card>
|
||||
<nb-card-header>Button sizes</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="buttons-row">
|
||||
<button *ngFor="let size of sizes" nbButton matRipple [size]="size">
|
||||
{{ size }}
|
||||
</button>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-12 col-lg-12 col-xxxl-6">
|
||||
<nb-card class="actions-card">
|
||||
<nb-card-header>Action Groups</nb-card-header>
|
||||
<nb-card-body>
|
||||
<nb-actions size="medium">
|
||||
<nb-action matRipple icon="menu-outline"></nb-action>
|
||||
<nb-action matRipple icon="search-outline"></nb-action>
|
||||
<nb-action matRipple icon="email-outline"></nb-action>
|
||||
<nb-action disabled icon="bell-outline"></nb-action><nb-action>
|
||||
<nb-user matRipple name="Han Solo"></nb-user>
|
||||
</nb-action>
|
||||
<nb-action matRipple icon="settings-2-outline"></nb-action>
|
||||
</nb-actions>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<nb-card>
|
||||
<nb-card-body>
|
||||
<nb-actions size="medium" fullWidth>
|
||||
<nb-action matRipple>
|
||||
<nb-icon class="action-icon" icon="pause-circle-outline"></nb-icon>
|
||||
<span>Pause</span>
|
||||
</nb-action>
|
||||
<nb-action matRipple>
|
||||
<nb-icon class="action-icon" icon="list-outline"></nb-icon>
|
||||
<span>Logs</span>
|
||||
</nb-action>
|
||||
<nb-action matRipple>
|
||||
<nb-icon class="action-icon" icon="search-outline"></nb-icon>
|
||||
<span>Search</span>
|
||||
</nb-action>
|
||||
<nb-action matRipple>
|
||||
<nb-icon class="action-icon" icon="settings-2-outline"></nb-icon>
|
||||
<span>Setup</span>
|
||||
</nb-action>
|
||||
</nb-actions>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
</div>
|
||||
25
src/app/pages/forms/buttons/buttons.component.scss
Normal file
25
src/app/pages/forms/buttons/buttons.component.scss
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
|
||||
@include nb-install-component() {
|
||||
.buttons-row {
|
||||
margin: -0.5rem;
|
||||
}
|
||||
|
||||
button[nbButton] {
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
@include nb-ltr(margin-right, 0.5rem);
|
||||
@include nb-rtl(margin-left, 0.5rem);
|
||||
}
|
||||
|
||||
.actions-card {
|
||||
height: 8rem;
|
||||
}
|
||||
|
||||
nb-action {
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
87
src/app/pages/forms/form-inputs/form-inputs.component.html
Normal file
87
src/app/pages/forms/form-inputs/form-inputs.component.html
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<nb-card>
|
||||
<nb-card-header>Default Inputs</nb-card-header>
|
||||
<nb-card-body>
|
||||
<input type="text" nbInput fullWidth placeholder="Project">
|
||||
<div class="full-name-inputs">
|
||||
<input type="text" nbInput fullWidth placeholder="Nick">
|
||||
<input type="text" nbInput fullWidth placeholder="Last Name">
|
||||
</div>
|
||||
<input type="password" nbInput fullWidth placeholder="Password">
|
||||
<input type="text" nbInput fullWidth shape="rectangle" placeholder="Rectangle border">
|
||||
<input type="text" nbInput fullWidth shape="semi-round" placeholder="Semi-round border">
|
||||
<input type="text" nbInput fullWidth shape="round" placeholder="Rounded border">
|
||||
<input type="text" nbInput fullWidth placeholder="Disabled input" disabled/>
|
||||
<textarea rows="5" nbInput fullWidth shape="round" placeholder="Text Area"></textarea>
|
||||
<input type="text" nbInput fullWidth fieldSize="small" placeholder="Small Input">
|
||||
<input type="text" nbInput fullWidth fieldSize="medium" placeholder="Medium Input">
|
||||
<input type="text" nbInput fullWidth fieldSize="large" placeholder="Large Input">
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
|
||||
<nb-card>
|
||||
<nb-card-header>Select</nb-card-header>
|
||||
<nb-card-body>
|
||||
<nb-select matRipple selected="1">
|
||||
<nb-option matRipple value="1">Option 1</nb-option>
|
||||
<nb-option matRipple value="2">Option 2</nb-option>
|
||||
</nb-select>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<nb-card>
|
||||
<nb-card-header>Validation States</nb-card-header>
|
||||
<nb-card-body>
|
||||
<input type="text" nbInput fullWidth status="info" placeholder="Input with Info">
|
||||
<input type="text" nbInput fullWidth status="success" placeholder="Warning Input">
|
||||
<input type="text" nbInput fullWidth status="warning" placeholder="Danger Input">
|
||||
<input type="text" nbInput fullWidth status="danger" placeholder="Danger Input">
|
||||
<input type="text" nbInput fullWidth status="primary" placeholder="Input with Primary">
|
||||
<div class="validation-checkboxes">
|
||||
<nb-checkbox status="success">Success Checkbox</nb-checkbox>
|
||||
<nb-checkbox status="warning">Warning Checkbox</nb-checkbox>
|
||||
<nb-checkbox status="danger">Danger Checkbox</nb-checkbox>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<nb-card>
|
||||
<nb-card-header>Checkboxes & Radios</nb-card-header>
|
||||
<nb-card-body class="checkbox-radio">
|
||||
<div class="demo-items">
|
||||
<nb-checkbox>Checkbox 1</nb-checkbox>
|
||||
<nb-checkbox [value]="true">Checkbox 2</nb-checkbox>
|
||||
</div>
|
||||
<div class="demo-items">
|
||||
<nb-radio-group [(value)]="radioGroupValue">
|
||||
<nb-radio
|
||||
[value]="'This is value 1'">
|
||||
Radio 1
|
||||
</nb-radio>
|
||||
<nb-radio
|
||||
[value]="'This is value 2'">
|
||||
Radio 2
|
||||
</nb-radio>
|
||||
<nb-radio
|
||||
[value]="'This is value 3'">
|
||||
Radio 3
|
||||
</nb-radio>
|
||||
</nb-radio-group>
|
||||
</div>
|
||||
<div class="demo-items">
|
||||
<nb-checkbox disabled>Disabled Checkbox</nb-checkbox>
|
||||
<nb-radio-group disabled>
|
||||
<nb-radio
|
||||
[value]="'Disabled Value'">
|
||||
Disabled Radio
|
||||
</nb-radio>
|
||||
</nb-radio-group>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
</div>
|
||||
82
src/app/pages/layout/accordion/accordion.component.html
Normal file
82
src/app/pages/layout/accordion/accordion.component.html
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
<div class="accordions-container row">
|
||||
<div class="accordion-container col-md-12 col-lg-6 col-xxxl-6">
|
||||
<nb-card>
|
||||
<nb-card-header>Toggle Accordion By Button</nb-card-header>
|
||||
<nb-card-body>
|
||||
<button nbButton matRipple (click)="toggle()">Toggle First Item</button>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<nb-accordion>
|
||||
<nb-accordion-item #item>
|
||||
<nb-accordion-item-header matRipple>
|
||||
Product Details
|
||||
</nb-accordion-item-header>
|
||||
<nb-accordion-item-body>
|
||||
A nebula is an interstellar cloud of dust, hydrogen, helium and other ionized gases.
|
||||
Originally, nebula was a name for any diffuse astronomical object,
|
||||
including galaxies beyond the Milky Way.
|
||||
</nb-accordion-item-body>
|
||||
</nb-accordion-item>
|
||||
|
||||
<nb-accordion-item>
|
||||
<nb-accordion-item-header matRipple>
|
||||
Reviews
|
||||
</nb-accordion-item-header>
|
||||
<nb-accordion-item-body>
|
||||
A nebula is an interstellar cloud of dust, hydrogen, helium and other ionized gases.
|
||||
Originally, nebula was a name for any diffuse astronomical object,
|
||||
including galaxies beyond the Milky Way.
|
||||
</nb-accordion-item-body>
|
||||
</nb-accordion-item>
|
||||
|
||||
<nb-accordion-item>
|
||||
<nb-accordion-item-header matRipple>
|
||||
Edit
|
||||
</nb-accordion-item-header>
|
||||
<nb-accordion-item-body>
|
||||
A nebula is an interstellar cloud of dust, hydrogen, helium and other ionized gases.
|
||||
Originally, nebula was a name for any diffuse astronomical object,
|
||||
including galaxies beyond the Milky Way.
|
||||
</nb-accordion-item-body>
|
||||
</nb-accordion-item>
|
||||
</nb-accordion>
|
||||
</div>
|
||||
|
||||
<div class="accordion-container col-md-12 col-lg-6 col-xxxl-6">
|
||||
<nb-accordion multi>
|
||||
<nb-accordion-item>
|
||||
<nb-accordion-item-header matRipple>
|
||||
Product Details
|
||||
</nb-accordion-item-header>
|
||||
<nb-accordion-item-body>
|
||||
A nebula is an interstellar cloud of dust, hydrogen, helium and other ionized gases.
|
||||
Originally, nebula was a name for any diffuse astronomical object,
|
||||
including galaxies beyond the Milky Way.
|
||||
</nb-accordion-item-body>
|
||||
</nb-accordion-item>
|
||||
|
||||
<nb-accordion-item>
|
||||
<nb-accordion-item-header matRipple>
|
||||
Reviews
|
||||
</nb-accordion-item-header>
|
||||
<nb-accordion-item-body>
|
||||
A nebula is an interstellar cloud of dust, hydrogen, helium and other ionized gases.
|
||||
Originally, nebula was a name for any diffuse astronomical object,
|
||||
including galaxies beyond the Milky Way.
|
||||
</nb-accordion-item-body>
|
||||
</nb-accordion-item>
|
||||
|
||||
<nb-accordion-item>
|
||||
<nb-accordion-item-header matRipple>
|
||||
Edit
|
||||
</nb-accordion-item-header>
|
||||
<nb-accordion-item-body>
|
||||
A nebula is an interstellar cloud of dust, hydrogen, helium and other ionized gases.
|
||||
Originally, nebula was a name for any diffuse astronomical object,
|
||||
including galaxies beyond the Milky Way.
|
||||
</nb-accordion-item-body>
|
||||
</nb-accordion-item>
|
||||
</nb-accordion>
|
||||
</div>
|
||||
</div>
|
||||
143
src/app/pages/layout/stepper/stepper.component.html
Normal file
143
src/app/pages/layout/stepper/stepper.component.html
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
<nb-card class="col-md-12 col-lg-12 col-xxxl-12">
|
||||
<nb-card-body>
|
||||
<nb-stepper orientation="horizontal">
|
||||
<nb-step [label]="labelOne">
|
||||
<ng-template #labelOne>First step</ng-template>
|
||||
<h3>Step content #1</h3>
|
||||
<button nbButton matRipple disabled nbStepperNext>prev</button>
|
||||
<button nbButton matRipple nbStepperNext>next</button>
|
||||
</nb-step>
|
||||
<nb-step [label]="labelTwo">
|
||||
<ng-template #labelTwo>Second step</ng-template>
|
||||
<h3>Step content #2</h3>
|
||||
<button nbButton matRipple nbStepperPrevious>prev</button>
|
||||
<button nbButton matRipple nbStepperNext>next</button>
|
||||
</nb-step>
|
||||
<nb-step label="Third step">
|
||||
<h3>Step content #3</h3>
|
||||
<button nbButton matRipple nbStepperPrevious>prev</button>
|
||||
<button nbButton matRipple nbStepperNext>next</button>
|
||||
</nb-step>
|
||||
<nb-step [label]="labelFour">
|
||||
<ng-template #labelFour>Fourth step</ng-template>
|
||||
<h3>Step content #4</h3>
|
||||
<button nbButton matRipple nbStepperPrevious>prev</button>
|
||||
<button nbButton matRipple disabled nbStepperNext>next</button>
|
||||
</nb-step>
|
||||
</nb-stepper>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<div class="steppers-container row">
|
||||
<div class="col-md-12 col-lg-6 col-xxxl-6">
|
||||
<nb-card>
|
||||
<nb-card-body>
|
||||
<nb-stepper #stepper>
|
||||
<nb-step [stepControl]="firstForm" label="First step">
|
||||
<form [formGroup]="firstForm" (ngSubmit)="onFirstSubmit()" class="step-container">
|
||||
<p class="lorem">
|
||||
Lorizzle ipsum dolizzle stuff fizzle, consectetuer adipiscing break it down. Nullizzle sapien velizzle,
|
||||
my shizz pimpin', shizzle my nizzle crocodizzle shut the shizzle up, gravida vizzle, dang.
|
||||
</p>
|
||||
<div class="input-group">
|
||||
<input type="text" placeholder="Enter your name" class="form-control" formControlName="firstCtrl"
|
||||
[ngClass]="{'form-control-danger': firstForm.invalid && (firstForm.dirty || firstForm.touched)}">
|
||||
</div>
|
||||
<button nbButton matRipple nbStepperNext>next</button>
|
||||
</form>
|
||||
</nb-step>
|
||||
<nb-step [stepControl]="secondForm" label="Second step">
|
||||
<form [formGroup]="secondForm" (ngSubmit)="onSecondSubmit()" class="step-container">
|
||||
<p class="lorem">
|
||||
Pellentesque we gonna chung tortor.
|
||||
Sizzle pizzle. Fizzle izzle dolor dapibus fo shizzle mah nizzle fo rizzle, mah home g-dizzle tempus tempor.
|
||||
Maurizzle cool nibh owned turpizzle. My shizz fo shizzle tortor.
|
||||
</p>
|
||||
<div class="input-group">
|
||||
<input type="text" placeholder="Enter favorite movie" class="form-control" formControlName="secondCtrl"
|
||||
[ngClass]="{'form-control-danger': secondForm.invalid && (secondForm.dirty || secondForm.touched)}">
|
||||
</div>
|
||||
<button nbButton matRipple nbStepperPrevious>prev</button>
|
||||
<button nbButton matRipple nbStepperNext>next</button>
|
||||
</form>
|
||||
</nb-step>
|
||||
<nb-step [stepControl]="thirdForm" label="Third step">
|
||||
<form [formGroup]="thirdForm" (ngSubmit)="onThirdSubmit()" class="step-container">
|
||||
<p class="lorem">
|
||||
Things boom shackalack rhoncus yo. In fo shizzle my nizzle gangsta platea dictumst. Check it out pot.
|
||||
</p>
|
||||
<div class="input-group">
|
||||
<input type="text" placeholder="Enter something" class="form-control" formControlName="thirdCtrl"
|
||||
[ngClass]="{'form-control-danger': thirdForm.invalid && (thirdForm.dirty || thirdForm.touched)}">
|
||||
</div>
|
||||
<button nbButton matRipple nbStepperPrevious>prev</button>
|
||||
<button nbButton matRipple nbStepperNext>Confirm</button>
|
||||
</form>
|
||||
</nb-step>
|
||||
<nb-step [stepControl]="thirdForm" [hidden]="true" label="Third step">
|
||||
<div class="step-container">
|
||||
<h3>Wizard completed!</h3>
|
||||
<button nbButton matRipple (click)="stepper.reset()">Try again</button>
|
||||
</div>
|
||||
</nb-step>
|
||||
</nb-stepper>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-12 col-lg-6 col-xxxl-6">
|
||||
<nb-card size="medium">
|
||||
<nb-card-body>
|
||||
<nb-stepper orientation="vertical">
|
||||
<nb-step label="First step">
|
||||
<h3>Step content #1</h3>
|
||||
<p class="lorem">
|
||||
Proin varius accumsan semper. Praesent consequat tincidunt sagittis. Curabitur egestas sem a ipsum bibendum,
|
||||
sit amet fringilla orci efficitur. Nam bibendum lectus ut viverra tristique. Fusce eu pulvinar magna, quis
|
||||
viverra ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent metus turpis, commodo vel
|
||||
placerat quis, lobortis in ligula.
|
||||
</p>
|
||||
<button nbButton matRipple disabled nbStepperNext>prev</button>
|
||||
<button nbButton matRipple nbStepperNext>next</button>
|
||||
</nb-step>
|
||||
<nb-step label="Second step">
|
||||
<h3>Step content #2</h3>
|
||||
<p class="lorem">
|
||||
Curabitur luctus mattis risus nec condimentum. Donec at dui turpis. Sed vehicula fringilla rutrum. Nullam
|
||||
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.
|
||||
</p>
|
||||
<button nbButton matRipple nbStepperPrevious>prev</button>
|
||||
<button nbButton matRipple nbStepperNext>next</button>
|
||||
</nb-step>
|
||||
<nb-step label="Third step">
|
||||
<h3>Step content #3</h3>
|
||||
<p class="lorem">
|
||||
Proin varius accumsan semper. Praesent consequat tincidunt sagittis. Curabitur egestas sem a ipsum bibendum,
|
||||
sit amet fringilla orci efficitur. Nam bibendum lectus ut viverra tristique. Fusce eu pulvinar magna, quis
|
||||
viverra ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent metus turpis, commodo vel
|
||||
placerat quis, lobortis in ligula.
|
||||
</p>
|
||||
<p class="lorem">
|
||||
Curabitur luctus mattis risus nec condimentum. Donec at dui turpis. Sed vehicula fringilla rutrum. Nullam
|
||||
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.
|
||||
</p>
|
||||
<button nbButton matRipple nbStepperPrevious>prev</button>
|
||||
<button nbButton matRipple nbStepperNext>next</button>
|
||||
</nb-step>
|
||||
<nb-step label="Fourth step">
|
||||
<h3>Step content #4</h3>
|
||||
<p class="lorem">
|
||||
Proin varius accumsan semper. Praesent consequat tincidunt sagittis. Curabitur egestas sem a ipsum bibendum,
|
||||
sit amet fringilla orci efficitur. Nam bibendum lectus ut viverra tristique. Fusce eu pulvinar magna, quis
|
||||
viverra ex.
|
||||
</p>
|
||||
<button nbButton matRipple nbStepperPrevious>prev</button>
|
||||
<button nbButton matRipple disabled nbStepperNext>next</button>
|
||||
</nb-step>
|
||||
</nb-stepper>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<nb-card>
|
||||
<nb-card-body>
|
||||
<div class="flex-centered col-xl-4 col-lg-6 col-md-8 col-sm-12">
|
||||
<h2 class="title">404 Page Not Found</h2>
|
||||
<small class="sub-title">The page you were looking for doesn't exist</small>
|
||||
<button nbButton matRipple fullWidth (click)="goToHome()" type="button" class="home-button">
|
||||
Take me home
|
||||
</button>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<nb-card>
|
||||
<nb-card-header>Enter your name</nb-card-header>
|
||||
<nb-card-body>
|
||||
<input #name nbInput placeholder="Name">
|
||||
</nb-card-body>
|
||||
<nb-card-footer>
|
||||
<button class="cancel" nbButton matRipple status="danger" (click)="cancel()">Cancel</button>
|
||||
<button nbButton matRipple status="success" (click)="submit(name.value)">Submit</button>
|
||||
</nb-card-footer>
|
||||
</nb-card>
|
||||
70
src/app/pages/modal-overlays/dialog/dialog.component.html
Normal file
70
src/app/pages/modal-overlays/dialog/dialog.component.html
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
<div class="row">
|
||||
<div class="col-md-12 col-lg-6 col-xxxl-3">
|
||||
<nb-card>
|
||||
<nb-card-header>Open Dialog</nb-card-header>
|
||||
<nb-card-body>
|
||||
<button nbButton matRipple (click)="open()">Open Dialog with component</button>
|
||||
|
||||
<button nbButton matRipple (click)="open2(dialog)">Open Dialog with template</button>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-12 col-lg-6 col-xxxl-3">
|
||||
<nb-card>
|
||||
<nb-card-header>Open Without Backdrop</nb-card-header>
|
||||
<nb-card-body>
|
||||
<button nbButton matRipple (click)="open()">Open Dialog with backdrop</button>
|
||||
|
||||
<button nbButton matRipple (click)="openWithoutBackdrop(dialog)">Open Dialog without backdrop</button>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-12 col-lg-6 col-xxxl-3">
|
||||
<nb-card>
|
||||
<nb-card-header>Open Without Esc Close</nb-card-header>
|
||||
<nb-card-body>
|
||||
<button nbButton matRipple (click)="open()">Open Dialog with esc close</button>
|
||||
|
||||
<button nbButton matRipple (click)="openWithoutEscClose(dialog)">Open Dialog without esc close</button>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-12 col-lg-6 col-xxxl-3">
|
||||
<nb-card>
|
||||
<nb-card-header>Open Without Backdrop Click</nb-card-header>
|
||||
<nb-card-body>
|
||||
<button nbButton matRipple (click)="open()">Open Dialog with backdrop click</button>
|
||||
|
||||
<button nbButton matRipple (click)="openWithoutBackdropClick(dialog)">Open without backdrop click</button>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-12 col-lg-6 col-xxxl-3">
|
||||
<nb-card class="form-input-card">
|
||||
<nb-card-header>Return Result From Dialog</nb-card-header>
|
||||
<nb-card-body class="result-from-dialog">
|
||||
<button nbButton matRipple (click)="open3()">Enter Name</button>
|
||||
<br>
|
||||
<h3 class="title">Names:</h3>
|
||||
<ul>
|
||||
<li *ngFor="let name of names">{{ name }}</li>
|
||||
</ul>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ng-template #dialog let-data let-ref="dialogRef">
|
||||
<nb-card>
|
||||
<nb-card-header>Template Dialog</nb-card-header>
|
||||
<nb-card-body>{{ data }}</nb-card-body>
|
||||
<nb-card-footer>
|
||||
<button nbButton matRipple (click)="ref.close()">Close Dialog</button>
|
||||
</nb-card-footer>
|
||||
</nb-card>
|
||||
</ng-template>
|
||||
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<nb-card>
|
||||
<nb-card-header>{{ title }}</nb-card-header>
|
||||
<nb-card-body>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis tincidunt tincidunt.
|
||||
Vestibulum vulputate maximus massa vel tristique. Suspendisse potenti. Duis aliquet purus sed dictum dictum.
|
||||
Donec fringilla, purus at fermentum imperdiet, velit enim malesuada turpis, quis luctus arcu arcu nec orci.
|
||||
Duis eu mattis felis. Quisque sollicitudin elementum nunc vel tincidunt. Vestibulum egestas mi nec
|
||||
iaculis varius. Morbi in risus sed sapien ultricies feugiat. Quisque pulvinar mattis purus,
|
||||
in aliquet massa aliquet et.
|
||||
</nb-card-body>
|
||||
<nb-card-footer>
|
||||
<button nbButton matRipple hero status="primary" (click)="dismiss()">Dismiss Dialog</button>
|
||||
</nb-card-footer>
|
||||
</nb-card>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
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 matRipple 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>
|
||||
`,
|
||||
styles: [`
|
||||
nb-card {
|
||||
margin: 0;
|
||||
max-width: 20rem;
|
||||
}
|
||||
`],
|
||||
})
|
||||
export class NgxPopoverCardComponent {
|
||||
}
|
||||
157
src/app/pages/modal-overlays/popovers/popovers.component.html
Normal file
157
src/app/pages/modal-overlays/popovers/popovers.component.html
Normal file
|
|
@ -0,0 +1,157 @@
|
|||
<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 nbButton matRipple 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="top">Top</button>
|
||||
<button nbButton matRipple 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="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 nbButton matRipple status="success" nbPopover="Hello, how are you today?">on click</button>
|
||||
<button nbButton matRipple 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="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 matRipple 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 nbButton matRipple status="warning" [nbPopover]="tabs">With tabs</button>
|
||||
<button nbButton matRipple status="warning" [nbPopover]="form">With form</button>
|
||||
<button nbButton matRipple status="warning" [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 nbButton matRipple status="warning" [nbPopover]="tabsComponent">With tabs</button>
|
||||
<button nbButton matRipple status="warning" [nbPopover]="formComponent">With form</button>
|
||||
<button nbButton matRipple status="warning" [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 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>
|
||||
|
||||
<button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
|
||||
show hint
|
||||
</button>
|
||||
<button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
|
||||
show hint
|
||||
</button>
|
||||
<button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
|
||||
show hint
|
||||
</button>
|
||||
<button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
|
||||
show hint
|
||||
</button>
|
||||
<button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
|
||||
show hint
|
||||
</button>
|
||||
<button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
|
||||
show hint
|
||||
</button>
|
||||
<button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
|
||||
show hint
|
||||
</button>
|
||||
<button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
|
||||
show hint
|
||||
</button>
|
||||
<button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
|
||||
show hint
|
||||
</button>
|
||||
<button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
|
||||
show hint
|
||||
</button>
|
||||
<button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
|
||||
show hint
|
||||
</button>
|
||||
<button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
|
||||
show hint
|
||||
</button>
|
||||
<button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
|
||||
show hint
|
||||
</button>
|
||||
<button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
|
||||
show hint
|
||||
</button>
|
||||
<button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
|
||||
show hint
|
||||
</button>
|
||||
<button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
|
||||
show hint
|
||||
</button>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
</div>
|
||||
59
src/app/pages/modal-overlays/toastr/toastr.component.html
Normal file
59
src/app/pages/modal-overlays/toastr/toastr.component.html
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
<nb-card>
|
||||
<nb-card-header>
|
||||
Toaster configuration
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-sm-12">
|
||||
<div class="form-group">
|
||||
<label class="label">Position:</label>
|
||||
<nb-select [(selected)]="position" matRipple class="position-select">
|
||||
<nb-option *ngFor="let p of positions" [value]="p" matRipple>{{ p }}</nb-option>
|
||||
</nb-select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="label">Title:</label>
|
||||
<input nbInput [(ngModel)]="title" name="title">
|
||||
</div>
|
||||
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label class="label">Content:</label>
|
||||
<input nbInput [(ngModel)]="content" name="content">
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="label">Time to hide toast, ms. 0 to persistent toast:</label>
|
||||
<input nbInput type="number" [(ngModel)]="duration" name="timeout">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-sm-12">
|
||||
<div class="form-group">
|
||||
<label class="label">Toast type:</label>
|
||||
<nb-select [(selected)]="status" matRipple>
|
||||
<nb-option *ngFor="let t of types" [value]="t" matRipple>{{ t }}</nb-option>
|
||||
</nb-select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<nb-checkbox [(ngModel)]="destroyByClick">Hide on click</nb-checkbox>
|
||||
</div>
|
||||
<div>
|
||||
<nb-checkbox [(ngModel)]="preventDuplicates">Prevent arising of duplicate toast</nb-checkbox>
|
||||
</div>
|
||||
<div>
|
||||
<nb-checkbox [(ngModel)]="hasIcon">Show toast with icon</nb-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
|
||||
<nb-card-footer>
|
||||
<button nbButton matRipple (click)="makeToast()">Show toast</button>
|
||||
<button nbButton matRipple status="success" (click)="openRandomToast()">Random toast</button>
|
||||
</nb-card-footer>
|
||||
</nb-card>
|
||||
37
src/app/pages/modal-overlays/tooltip/tooltip.component.html
Normal file
37
src/app/pages/modal-overlays/tooltip/tooltip.component.html
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<div class="row">
|
||||
<div class="col-md-12 col-lg-6 col-xxxl-4">
|
||||
<nb-card>
|
||||
<nb-card-header>Tooltip With Icon</nb-card-header>
|
||||
<nb-card-body>
|
||||
<button nbTooltip="This is a tooltip" nbTooltipIcon="home-outline" nbButton matRipple>Show Tooltip</button>
|
||||
<button nbTooltip="" nbTooltipIcon="alert-triangle" nbTooltipStatus="danger" nbButton matRipple>Show Tooltip</button>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-12 col-lg-6 col-xxxl-4">
|
||||
<nb-card>
|
||||
<nb-card-header>Tooltip Placements</nb-card-header>
|
||||
<nb-card-body>
|
||||
<button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbButton matRipple>Top</button>
|
||||
<button nbTooltip="This is a tooltip" nbTooltipPlacement="right" nbButton matRipple>Right</button>
|
||||
<button nbTooltip="This is a tooltip" nbTooltipPlacement="bottom" nbButton matRipple>Bottom</button>
|
||||
<button nbTooltip="This is a tooltip" nbTooltipPlacement="left" nbButton matRipple>Left</button>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-12 col-lg-6 col-xxxl-4">
|
||||
<nb-card>
|
||||
<nb-card-header>Colored Tooltips</nb-card-header>
|
||||
<nb-card-body>
|
||||
<button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbButton matRipple>Default</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 matRipple>Success</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 matRipple>Info</button>
|
||||
<button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbTooltipStatus="warning" nbButton matRipple>Warning</button>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
</div>
|
||||
31
src/app/pages/modal-overlays/window/window.component.html
Normal file
31
src/app/pages/modal-overlays/window/window.component.html
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<div class="row">
|
||||
<div class="col-md-12 col-lg-12 col-xxxl-6">
|
||||
<nb-card>
|
||||
<nb-card-header>Window Form</nb-card-header>
|
||||
<nb-card-body>
|
||||
<button (click)="openWindowForm()" nbButton matRipple>Open window form</button>
|
||||
|
||||
<button (click)="openWindow(contentTemplate)" nbButton matRipple>Open window with template</button>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-12 col-lg-12 col-xxxl-6">
|
||||
<nb-card>
|
||||
<nb-card-header>Window Without Backdrop</nb-card-header>
|
||||
<nb-card-body>
|
||||
<button (click)="openWindow(contentTemplate)" nbButton matRipple>Open window with backdrop</button>
|
||||
|
||||
<button (click)="openWindowWithoutBackdrop()" nbButton matRipple>Open window without backdrop</button>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ng-template #contentTemplate let-data>
|
||||
<p>Here is the text provided via config: "{{ data.text }}"</p>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #disabledEsc>
|
||||
Disabled close on escape click.
|
||||
</ng-template>
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<nb-card>
|
||||
<nb-card-header>
|
||||
Layout Rotate Search
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<nb-search
|
||||
matRipple
|
||||
[matRippleUnbounded]="true"
|
||||
[matRippleCentered]="true"
|
||||
[matRippleRadius]="36"
|
||||
type="rotate-layout"
|
||||
tag="rotate-layout"
|
||||
></nb-search>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<nb-card>
|
||||
<nb-card-header>
|
||||
Modal Zoomin Search
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<nb-search
|
||||
matRipple
|
||||
[matRippleUnbounded]="true"
|
||||
[matRippleCentered]="true"
|
||||
[matRippleRadius]="36"
|
||||
type="modal-zoomin"
|
||||
tag="modal-zoomin"
|
||||
></nb-search>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<nb-card>
|
||||
<nb-card-header>
|
||||
Modal Move Search
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<nb-search
|
||||
matRipple
|
||||
[matRippleUnbounded]="true"
|
||||
[matRippleCentered]="true"
|
||||
[matRippleRadius]="36"
|
||||
type="modal-move"
|
||||
tag="modal-move"
|
||||
></nb-search>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<nb-card>
|
||||
<nb-card-header>
|
||||
Modal Drop Search
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<nb-search
|
||||
matRipple
|
||||
[matRippleUnbounded]="true"
|
||||
[matRippleCentered]="true"
|
||||
[matRippleRadius]="36"
|
||||
type="modal-drop"
|
||||
tag="modal-drop"
|
||||
></nb-search>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<nb-card>
|
||||
<nb-card-header>
|
||||
Modal Half Search
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<nb-search
|
||||
matRipple
|
||||
[matRippleUnbounded]="true"
|
||||
[matRippleCentered]="true"
|
||||
[matRippleRadius]="36"
|
||||
type="modal-half"
|
||||
tag="modal-half"
|
||||
></nb-search>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<nb-card>
|
||||
<nb-card-header>
|
||||
Curtain Search
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<nb-search
|
||||
matRipple
|
||||
[matRippleUnbounded]="true"
|
||||
[matRippleCentered]="true"
|
||||
[matRippleRadius]="36"
|
||||
type="curtain"
|
||||
tag="curtain"
|
||||
></nb-search>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<nb-card>
|
||||
<nb-card-header>
|
||||
Column Curtain Search
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<nb-search
|
||||
matRipple
|
||||
[matRippleUnbounded]="true"
|
||||
[matRippleCentered]="true"
|
||||
[matRippleRadius]="36"
|
||||
type="column-curtain"
|
||||
tag="column-curtain"
|
||||
></nb-search>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue