Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-18 00:10: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>
<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">
<input type="checkbox" autocomplete="off"/> Left
<input type="radio" value="Left"/> Left
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"/> Middle
<input type="radio" value="Middle"/> Middle
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"/> Right
<input type="radio" value="Right"/> Right
</label>
</div>
<div class="btn-group btn-group-block btn-group-divider" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" autocomplete="off"/> Left
<label class="btn btn-primary" [class.active]="checkboxModel.left">
<input type="checkbox" [(ngModel)]="checkboxModel.left"/> Left
</label>
<label class="btn btn-primary">
<input type="radio" autocomplete="off"/> Middle
<label class="btn btn-primary" [class.active]="checkboxModel.middle">
<input type="checkbox" [(ngModel)]="checkboxModel.middle"/> Middle
</label>
<label class="btn btn-primary">
<input type="radio" autocomplete="off"/> Right
<label class="btn btn-primary" [class.active]="checkboxModel.right">
<input type="checkbox" [(ngModel)]="checkboxModel.right"/> Right
</label>
</div>
</div>
@ -33,19 +33,19 @@
<div>Pagination</div>
<div class="btn-group btn-group-divider btn-group-pagination" data-toggle="buttons">
<label class="btn btn-success">
<input type="radio" autocomplete="off"/> 1
<input type="radio"/> 1
</label>
<label class="btn btn-success">
<input type="radio" autocomplete="off"/> 2
<input type="radio"/> 2
</label>
<label class="btn btn-success">
<input type="radio" autocomplete="off"/> 3
<input type="radio"/> 3
</label>
<label class="btn btn-success">
<input type="radio" autocomplete="off"/> 4
<input type="radio"/> 4
</label>
<label class="btn btn-success">
<input type="radio" autocomplete="off"/> 5
<input type="radio" /> 5
</label>
</div>
</div>
@ -53,65 +53,65 @@
<div>Icon Toolbar</div>
<div class="btn-group btn-group-divider btn-group-pagination" data-toggle="buttons">
<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 class="btn btn-success">
<input type="radio" autocomplete="off"/> <i class="ion-ionic"></i>
<input type="radio"/> <i class="ion-ionic"></i>
</label>
<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 class="btn btn-success">
<input type="radio" autocomplete="off"/> <i class="ion-ionic"></i>
<input type="radio"/> <i class="ion-ionic"></i>
</label>
</div>
</div>
</div>
<div>
<div>Divided Button Group</div>
<div class="btn-group btn-group-block btn-group-ghost" data-toggle="buttons">
<label class="btn btn-success">
<input type="checkbox" autocomplete="off"/>
<div class="btn-group btn-group-block btn-group-divided" data-toggle="buttons">
<label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.monday">
<input type="checkbox" [(ngModel)]="dividedCheckboxModel.monday"/> <i class="ion-paper-airplane"></i>
</label>
<label class="btn btn-success">
<input type="checkbox" autocomplete="off"/>
<label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.tuesday">
<input type="checkbox" [(ngModel)]="dividedCheckboxModel.tuesday"/> <i class="ion-paper-airplane"></i>
</label>
<label class="btn btn-success">
<input type="checkbox" autocomplete="off"/>
<label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.wednesday">
<input type="checkbox" [(ngModel)]="dividedCheckboxModel.wednesday"/> <i class="ion-paper-airplane"></i>
</label>
<label class="btn btn-success">
<input type="checkbox" autocomplete="off"/>
<label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.thursday">
<input type="checkbox" [(ngModel)]="dividedCheckboxModel.thursday"/> <i class="ion-paper-airplane"></i>
</label>
<label class="btn btn-success">
<input type="checkbox" autocomplete="off"/>
<label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.friday">
<input type="checkbox" [(ngModel)]="dividedCheckboxModel.friday"/> <i class="ion-paper-airplane"></i>
</label>
<label class="btn btn-success">
<input type="checkbox" autocomplete="off"/> Right
<label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.saturday">
<input type="checkbox" [(ngModel)]="dividedCheckboxModel.saturday"/> <i class="ion-paper-airplane"></i>
</label>
</div>
</div>
<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">
<input type="checkbox" autocomplete="off"/> Left
<input type="radio" value="Left"/> Left
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"/> Middle
<input type="radio" value="Middle"/> Middle
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"/> Right
<input type="radio" value="Right"/> Right
</label>
</div>
<div class="btn-group btn-group-block btn-group-hidden" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"/> Left
<div class="btn-group btn-group-block btn-group-divided-hidden" data-toggle="buttons">
<label class="btn btn-primary" [class.active]="checkboxModel.left">
<input type="checkbox" [(ngModel)]="checkboxModel.left"/> Left
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"/> Middle
<label class="btn btn-primary" [class.active]="checkboxModel.middle">
<input type="checkbox" [(ngModel)]="checkboxModel.middle"/> Middle
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"/> Right
<label class="btn btn-primary" [class.active]="checkboxModel.right">
<input type="checkbox" [(ngModel)]="checkboxModel.right"/> Right
</label>
</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',
})
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-header>Button Dropdowns</nga-card-header>
<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-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>
</button>
<div class="dropdown-menu">
@ -14,9 +14,9 @@
<a class="dropdown-item" href="#">Separated link</a>
</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-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>
</button>
<div class="dropdown-menu">
@ -27,9 +27,9 @@
<a class="dropdown-item" href="#">Separated link</a>
</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-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>
</button>
<div class="dropdown-menu">
@ -40,9 +40,9 @@
<a class="dropdown-item" href="#">Separated link</a>
</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-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>
</button>
<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">
<i class="ion-ios-cloud-download-outline"></i>
</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>
</button>
</div>
@ -33,7 +33,7 @@
<button type="button" class="btn btn-success btn-icon">
<i class="ion-ios-home-outline"></i>
</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>
</button>
</div>

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

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