Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-23 02:40:14 +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
parent 6c81379740
commit 7ac5287e55
34 changed files with 284 additions and 180 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -4,25 +4,25 @@
<nb-step [label]="labelOne">
<ng-template #labelOne>First step</ng-template>
<h3>Step content #1</h3>
<button nbButton disabled nbStepperNext>prev</button>
<button nbButton nbStepperNext>next</button>
<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 nbStepperPrevious>prev</button>
<button nbButton nbStepperNext>next</button>
<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 nbStepperPrevious>prev</button>
<button nbButton nbStepperNext>next</button>
<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 nbStepperPrevious>prev</button>
<button nbButton disabled nbStepperNext>next</button>
<button nbButton matRipple nbStepperPrevious>prev</button>
<button nbButton matRipple disabled nbStepperNext>next</button>
</nb-step>
</nb-stepper>
</nb-card-body>
@ -43,7 +43,7 @@
<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 nbStepperNext>next</button>
<button nbButton matRipple nbStepperNext>next</button>
</form>
</nb-step>
<nb-step [stepControl]="secondForm" label="Second step">
@ -57,8 +57,8 @@
<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 nbStepperPrevious>prev</button>
<button nbButton nbStepperNext>next</button>
<button nbButton matRipple nbStepperPrevious>prev</button>
<button nbButton matRipple nbStepperNext>next</button>
</form>
</nb-step>
<nb-step [stepControl]="thirdForm" label="Third step">
@ -70,14 +70,14 @@
<input type="text" placeholder="Enter something" class="form-control" formControlName="thirdCtrl"
[ngClass]="{'form-control-danger': thirdForm.invalid && (thirdForm.dirty || thirdForm.touched)}">
</div>
<button nbButton nbStepperPrevious>prev</button>
<button nbButton nbStepperNext>Confirm</button>
<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 (click)="stepper.reset()">Try again</button>
<button nbButton matRipple (click)="stepper.reset()">Try again</button>
</div>
</nb-step>
</nb-stepper>
@ -97,8 +97,8 @@
viverra ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent metus turpis, commodo vel
placerat quis, lobortis in ligula.
</p>
<button nbButton disabled nbStepperNext>prev</button>
<button nbButton nbStepperNext>next</button>
<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>
@ -107,8 +107,8 @@
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 nbStepperPrevious>prev</button>
<button nbButton nbStepperNext>next</button>
<button nbButton matRipple nbStepperPrevious>prev</button>
<button nbButton matRipple nbStepperNext>next</button>
</nb-step>
<nb-step label="Third step">
<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
eu sapien pellentesque, eu placerat leo luctus. Cras pharetra blandit fermentum.
</p>
<button nbButton nbStepperPrevious>prev</button>
<button nbButton nbStepperNext>next</button>
<button nbButton matRipple nbStepperPrevious>prev</button>
<button nbButton matRipple nbStepperNext>next</button>
</nb-step>
<nb-step label="Fourth step">
<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
viverra ex.
</p>
<button nbButton nbStepperPrevious>prev</button>
<button nbButton disabled nbStepperNext>next</button>
<button nbButton matRipple nbStepperPrevious>prev</button>
<button nbButton matRipple disabled nbStepperNext>next</button>
</nb-step>
</nb-stepper>
</nb-card-body>