Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2026-01-30 21:25:18 +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 Maksim Karatkevich
parent bef0105a9f
commit 3f77efdabf
34 changed files with 1538 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

123
src/app/pages/forms/buttons/buttons.component.html Normal file
View 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
View 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;
}
}