Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-17 16:00:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(buttons): add new examples

Browse source
This commit is contained in:
Alexander Zhukov 2017-06-26 15:33:19 +03:00
parent 95edada0e9
commit 224e0d3390
5 changed files with 74 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

86
src/app/pages/ui-features/buttons/button-groups/button-groups.component.html
View file

@ -5,26 +5,26 @@
<div class="col-md-12"> <div class="col-md-12">
<div> <div>
<div>Toogle Types</div> <div>Toogle Types</div>
<div class="btn-group btn-group-block btn-group-divider" data-toggle="buttons"> <div [(ngModel)]="radioModel" ngbRadioGroup class="btn-group-block btn-group-divider" data-toggle="buttons">
<label class="btn btn-primary"> <label class="btn btn-primary">
<input type="checkbox" autocomplete="off"/> Left <input type="radio" value="Left"/> Left
</label> </label>
<label class="btn btn-primary"> <label class="btn btn-primary">
<input type="checkbox" autocomplete="off"/> Middle <input type="radio" value="Middle"/> Middle
</label> </label>
<label class="btn btn-primary"> <label class="btn btn-primary">
<input type="checkbox" autocomplete="off"/> Right <input type="radio" value="Right"/> Right
</label> </label>
</div> </div>
<div class="btn-group btn-group-block btn-group-divider" data-toggle="buttons"> <div class="btn-group btn-group-block btn-group-divider" data-toggle="buttons">
<label class="btn btn-primary"> <label class="btn btn-primary" [class.active]="checkboxModel.left">
<input type="radio" autocomplete="off"/> Left <input type="checkbox" [(ngModel)]="checkboxModel.left"/> Left
</label> </label>
<label class="btn btn-primary"> <label class="btn btn-primary" [class.active]="checkboxModel.middle">
<input type="radio" autocomplete="off"/> Middle <input type="checkbox" [(ngModel)]="checkboxModel.middle"/> Middle
</label> </label>
<label class="btn btn-primary"> <label class="btn btn-primary" [class.active]="checkboxModel.right">
<input type="radio" autocomplete="off"/> Right <input type="checkbox" [(ngModel)]="checkboxModel.right"/> Right
</label> </label>
</div> </div>
</div> </div>
@ -33,19 +33,19 @@
<div>Pagination</div> <div>Pagination</div>
<div class="btn-group btn-group-divider btn-group-pagination" data-toggle="buttons"> <div class="btn-group btn-group-divider btn-group-pagination" data-toggle="buttons">
<label class="btn btn-success"> <label class="btn btn-success">
<input type="radio" autocomplete="off"/> 1 <input type="radio"/> 1
</label> </label>
<label class="btn btn-success"> <label class="btn btn-success">
<input type="radio" autocomplete="off"/> 2 <input type="radio"/> 2
</label> </label>
<label class="btn btn-success"> <label class="btn btn-success">
<input type="radio" autocomplete="off"/> 3 <input type="radio"/> 3
</label> </label>
<label class="btn btn-success"> <label class="btn btn-success">
<input type="radio" autocomplete="off"/> 4 <input type="radio"/> 4
</label> </label>
<label class="btn btn-success"> <label class="btn btn-success">
<input type="radio" autocomplete="off"/> 5 <input type="radio" /> 5
</label> </label>
</div> </div>
</div> </div>
@ -53,65 +53,65 @@
<div>Icon Toolbar</div> <div>Icon Toolbar</div>
<div class="btn-group btn-group-divider btn-group-pagination" data-toggle="buttons"> <div class="btn-group btn-group-divider btn-group-pagination" data-toggle="buttons">
<label class="btn btn-success"> <label class="btn btn-success">
<input type="radio" autocomplete="off"/> <i class="ion-ionic"></i> <input type="radio"/> <i class="ion-ionic"></i>
</label> </label>
<label class="btn btn-success"> <label class="btn btn-success">
<input type="radio" autocomplete="off"/> <i class="ion-ionic"></i> <input type="radio"/> <i class="ion-ionic"></i>
</label> </label>
<label class="btn btn-success"> <label class="btn btn-success">
<input type="radio" autocomplete="off"/> <i class="ion-ionic"></i> <input type="radio"/> <i class="ion-ionic"></i>
</label> </label>
<label class="btn btn-success"> <label class="btn btn-success">
<input type="radio" autocomplete="off"/> <i class="ion-ionic"></i> <input type="radio"/> <i class="ion-ionic"></i>
</label> </label>
</div> </div>
</div> </div>
</div> </div>
<div> <div>
<div>Divided Button Group</div> <div>Divided Button Group</div>
<div class="btn-group btn-group-block btn-group-ghost" data-toggle="buttons"> <div class="btn-group btn-group-block btn-group-divided" data-toggle="buttons">
<label class="btn btn-success"> <label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.monday">
<input type="checkbox" autocomplete="off"/> <input type="checkbox" [(ngModel)]="dividedCheckboxModel.monday"/> <i class="ion-paper-airplane"></i>
</label> </label>
<label class="btn btn-success"> <label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.tuesday">
<input type="checkbox" autocomplete="off"/> <input type="checkbox" [(ngModel)]="dividedCheckboxModel.tuesday"/> <i class="ion-paper-airplane"></i>
</label> </label>
<label class="btn btn-success"> <label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.wednesday">
<input type="checkbox" autocomplete="off"/> <input type="checkbox" [(ngModel)]="dividedCheckboxModel.wednesday"/> <i class="ion-paper-airplane"></i>
</label> </label>
<label class="btn btn-success"> <label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.thursday">
<input type="checkbox" autocomplete="off"/> <input type="checkbox" [(ngModel)]="dividedCheckboxModel.thursday"/> <i class="ion-paper-airplane"></i>
</label> </label>
<label class="btn btn-success"> <label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.friday">
<input type="checkbox" autocomplete="off"/> <input type="checkbox" [(ngModel)]="dividedCheckboxModel.friday"/> <i class="ion-paper-airplane"></i>
</label> </label>
<label class="btn btn-success"> <label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.saturday">
<input type="checkbox" autocomplete="off"/> Right <input type="checkbox" [(ngModel)]="dividedCheckboxModel.saturday"/> <i class="ion-paper-airplane"></i>
</label> </label>
</div> </div>
</div> </div>
<div> <div>
<div>Divided Button Group</div> <div>Divided Button Group</div>
<div class="btn-group btn-group-block btn-group-hidden" data-toggle="buttons"> <div [(ngModel)]="radioModel" ngbRadioGroup class="btn-group btn-group-block btn-group-divided-hidden" data-toggle="buttons">
<label class="btn btn-primary"> <label class="btn btn-primary">
<input type="checkbox" autocomplete="off"/> Left <input type="radio" value="Left"/> Left
</label> </label>
<label class="btn btn-primary"> <label class="btn btn-primary">
<input type="checkbox" autocomplete="off"/> Middle <input type="radio" value="Middle"/> Middle
</label> </label>
<label class="btn btn-primary"> <label class="btn btn-primary">
<input type="checkbox" autocomplete="off"/> Right <input type="radio" value="Right"/> Right
</label> </label>
</div> </div>
<div class="btn-group btn-group-block btn-group-hidden" data-toggle="buttons"> <div class="btn-group btn-group-block btn-group-divided-hidden" data-toggle="buttons">
<label class="btn btn-primary"> <label class="btn btn-primary" [class.active]="checkboxModel.left">
<input type="checkbox" autocomplete="off"/> Left <input type="checkbox" [(ngModel)]="checkboxModel.left"/> Left
</label> </label>
<label class="btn btn-primary"> <label class="btn btn-primary" [class.active]="checkboxModel.middle">
<input type="checkbox" autocomplete="off"/> Middle <input type="checkbox" [(ngModel)]="checkboxModel.middle"/> Middle
</label> </label>
<label class="btn btn-primary"> <label class="btn btn-primary" [class.active]="checkboxModel.right">
<input type="checkbox" autocomplete="off"/> Right <input type="checkbox" [(ngModel)]="checkboxModel.right"/> Right
</label> </label>
</div> </div>
</div> </div>

17
src/app/pages/ui-features/buttons/button-groups/button-groups.component.ts
View file

@ -5,4 +5,21 @@ import { Component } from '@angular/core';
templateUrl: './button-groups.component.html', templateUrl: './button-groups.component.html',
}) })
export class ButtonGroupsComponent { export class ButtonGroupsComponent {
radioModel = 'Left';
checkboxModel = {
left: true,
middle: false,
right: true,
};
dividedCheckboxModel = {
monday: true,
tuesday: true,
wednesday: false,
thursday: false,
friday: false,
saturday: false,
};
} }

16
src/app/pages/ui-features/buttons/dropdown-buttons/dropdown-button.component.html
View file

@ -1,9 +1,9 @@
<nga-card> <nga-card>
<nga-card-header>Button Dropdowns</nga-card-header> <nga-card-header>Button Dropdowns</nga-card-header>
<nga-card-body> <nga-card-body>
<div class="btn-group btn-group-dropdown-divider"> <div class="btn-group btn-group-dropdown-divider" ngbDropdown>
<button type="button" class="btn btn-primary">Dropdown</button> <button type="button" class="btn btn-primary">Dropdown</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button type="button" class="btn btn-primary" ngbDropdownToggle>
<span class="sr-only">Dropdown</span> <span class="sr-only">Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
@ -14,9 +14,9 @@
<a class="dropdown-item" href="#">Separated link</a> <a class="dropdown-item" href="#">Separated link</a>
</div> </div>
</div> </div>
<div class="btn-group"> <div class="btn-group" ngbDropdown>
<button type="button" class="btn btn-primary">Dropdown</button> <button type="button" class="btn btn-primary">Dropdown</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button type="button" class="btn btn-primary" ngbDropdownToggle>
<span class="sr-only">Dropdown</span> <span class="sr-only">Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
@ -27,9 +27,9 @@
<a class="dropdown-item" href="#">Separated link</a> <a class="dropdown-item" href="#">Separated link</a>
</div> </div>
</div> </div>
<div class="btn-group"> <div class="btn-group" ngbDropdown>
<button type="button" class="btn btn-outline-primary">Dropdown</button> <button type="button" class="btn btn-outline-primary">Dropdown</button>
<button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button type="button" class="btn btn-outline-primary" ngbDropdownToggle>
<span class="sr-only">Dropdown</span> <span class="sr-only">Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
@ -40,9 +40,9 @@
<a class="dropdown-item" href="#">Separated link</a> <a class="dropdown-item" href="#">Separated link</a>
</div> </div>
</div> </div>
<div class="btn-group btn-group-hidden"> <div class="btn-group btn-group-hidden" ngbDropdown>
<button type="button" class="btn btn-primary">Dropdown</button> <button type="button" class="btn btn-primary">Dropdown</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button type="button" class="btn btn-primary" ngbDropdownToggle>
<span class="sr-only">Dropdown</span> <span class="sr-only">Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">

4
src/app/pages/ui-features/buttons/icon-buttons/icon-buttons.component.html
View file

@ -22,7 +22,7 @@
<button type="button" class="btn btn-outline-success btn-icon"> <button type="button" class="btn btn-outline-success btn-icon">
<i class="ion-ios-cloud-download-outline"></i> <i class="ion-ios-cloud-download-outline"></i>
</button> </button>
<button type="button" class="btn btn-outline-secondary btn-icon"> <button type="button" class="btn btn-outline-danger btn-icon">
<i class="ion-ios-sunny-outline"></i> <i class="ion-ios-sunny-outline"></i>
</button> </button>
</div> </div>
@ -33,7 +33,7 @@
<button type="button" class="btn btn-success btn-icon"> <button type="button" class="btn btn-success btn-icon">
<i class="ion-ios-home-outline"></i> <i class="ion-ios-home-outline"></i>
</button> </button>
<button type="button" class="btn btn-secondary btn-icon"> <button type="button" class="btn btn-danger btn-icon">
<i class="ion-ios-gear-outline"></i> <i class="ion-ios-gear-outline"></i>
</button> </button>
</div> </div>

8
src/app/pages/ui-features/buttons/size-buttons/size-buttons.component.scss
View file

@ -1,17 +1,17 @@
.row { .row {
padding: 0 15px; padding: 0 1rem;
} }
.size-container { .size-container {
margin-right: 20px; margin-right: 1rem;
.header { .header {
margin-bottom: 7px; margin-bottom: 0.5rem;
} }
.subheader { .subheader {
color: #ffffff; color: #ffffff;
margin-bottom: 19px; margin-bottom: 1rem;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 300; font-weight: 300;
} }