Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2026-01-15 22:15:30 +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;
}
}

87
src/app/pages/forms/form-inputs/form-inputs.component.html Normal file
View 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>