Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2026-01-06 01:28:50 +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

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

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

@ -17,4 +17,9 @@
.actions-card {
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-header>Select</nb-card-header>
<nb-card-body>
<nb-select selected="1">
<nb-option value="1">Option 1</nb-option>
<nb-option value="2">Option 2</nb-option>
<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>