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

feat(buttons): add the dropdown overrides (#16)

Browse source
This commit is contained in:
Lex Zhukov 2017-07-19 16:28:35 +03:00 • committed by GitHub
parent a0e7abcf0a
commit 315666aa45
7 changed files with 125 additions and 104 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -4,114 +4,115 @@
<div class="row">
<div class="col-md-12">
<div class="example-container">
<div class="container-title">Toogle Types</div>
<div [(ngModel)]="radioModel" ngbRadioGroup class="btn-group-block btn-group-divider" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" value="Left"/> Left
<div class="container-title">Toggle Types</div>
<div class="btn-group btn-toggle-group btn-outline-toggle-group" data-toggle="buttons">
<label class="btn btn-outline-primary" [class.active]="checkboxModel.left">
<input type="checkbox" [(ngModel)]="checkboxModel.left"> Left
</label>
<label class="btn btn-primary">
<input type="radio" value="Middle"/> Middle
<label class="btn btn-outline-primary" [class.active]="checkboxModel.middle">
<input type="checkbox" [(ngModel)]="checkboxModel.middle"> Middle
</label>
<label class="btn btn-primary">
<input type="radio" value="Right"/> Right
<label class="btn btn-outline-primary" [class.active]="checkboxModel.right">
<input type="checkbox" [(ngModel)]="checkboxModel.right"> Right
</label>
</div>
<div class="btn-group btn-group-block btn-group-divider" data-toggle="buttons">
<div class="btn-group btn-toggle-group" data-toggle="buttons">
<label class="btn btn-primary" [class.active]="checkboxModel.left">
<input type="checkbox" [(ngModel)]="checkboxModel.left"/> Left
<input type="checkbox" [(ngModel)]="checkboxModel.left"> Left
</label>
<label class="btn btn-primary" [class.active]="checkboxModel.middle">
<input type="checkbox" [(ngModel)]="checkboxModel.middle"/> Middle
<input type="checkbox" [(ngModel)]="checkboxModel.middle"> Middle
</label>
<label class="btn btn-primary" [class.active]="checkboxModel.right">
<input type="checkbox" [(ngModel)]="checkboxModel.right"/> Right
<input type="checkbox" [(ngModel)]="checkboxModel.right"> Right
</label>
</div>
</div>
<div class="example-container toolbars-container">
<div class="pagination-container">
<div class="container-title">Pagination</div>
<div class="btn-group btn-group-divider btn-group-pagination" data-toggle="buttons">
<label class="btn btn-success">
<input type="radio"/> 1
<div class="btn-group btn-group-pagination btn-toggle-group" data-toggle="buttons" [(ngModel)]="paginationModel"
ngbRadioGroup>
<label class="btn btn-outline-success">
<input type="radio" [value]="1"> 1
</label>
<label class="btn btn-success">
<input type="radio"/> 2
<label class="btn btn-outline-success">
<input type="radio" [value]="2"> 2
</label>
<label class="btn btn-success">
<input type="radio"/> 3
<label class="btn btn-outline-success">
<input type="radio" [value]="3"> 3
</label>
<label class="btn btn-success">
<input type="radio"/> 4
<label class="btn btn-outline-success">
<input type="radio" [value]="4"> 4
</label>
<label class="btn btn-success">
<input type="radio" /> 5
<label class="btn btn-outline-success">
<input type="radio" [value]="5"> 5
</label>
</div>
</div>
<div class="icon-toolbar-container">
<div class="container-title">Icon Toolbar</div>
<div class="btn-group btn-group-divider btn-group-pagination" data-toggle="buttons">
<label class="btn btn-success">
<input type="radio"/> <i class="ion-ionic"></i>
<div class="btn-group btn-group-pagination" data-toggle="buttons">
<label class="btn btn-success" [class.active]="iconToolbarModel.one">
<input type="checkbox" [(ngModel)]="iconToolbarModel.one"> 1
</label>
<label class="btn btn-success">
<input type="radio"/> <i class="ion-ionic"></i>
<label class="btn btn-success" [class.active]="iconToolbarModel.two">
<input type="checkbox" [(ngModel)]="iconToolbarModel.two"> 2
</label>
<label class="btn btn-success">
<input type="radio"/> <i class="ion-ionic"></i>
<label class="btn btn-success" [class.active]="iconToolbarModel.three">
<input type="checkbox" [(ngModel)]="iconToolbarModel.three"> 3
</label>
<label class="btn btn-success">
<input type="radio"/> <i class="ion-ionic"></i>
<label class="btn btn-success" [class.active]="iconToolbarModel.four">
<input type="checkbox" [(ngModel)]="iconToolbarModel.four"> 4
</label>
</div>
</div>
</div>
<div class="example-container">
<div class="container-title">Divided Button Group</div>
<div class="btn-group btn-group-block btn-group-divided" data-toggle="buttons">
<div class="btn-group btn-divided-group" 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>
<input type="checkbox" [(ngModel)]="dividedCheckboxModel.monday"> <i class="ion-paper-airplane"></i>
</label>
<label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.tuesday">
<input type="checkbox" [(ngModel)]="dividedCheckboxModel.tuesday"/> <i class="ion-paper-airplane"></i>
<input type="checkbox" [(ngModel)]="dividedCheckboxModel.tuesday"> <i class="ion-paper-airplane"></i>
</label>
<label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.wednesday">
<input type="checkbox" [(ngModel)]="dividedCheckboxModel.wednesday"/> <i class="ion-paper-airplane"></i>
<input type="checkbox" [(ngModel)]="dividedCheckboxModel.wednesday"> <i class="ion-paper-airplane"></i>
</label>
<label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.thursday">
<input type="checkbox" [(ngModel)]="dividedCheckboxModel.thursday"/> <i class="ion-paper-airplane"></i>
<input type="checkbox" [(ngModel)]="dividedCheckboxModel.thursday"> <i class="ion-paper-airplane"></i>
</label>
<label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.friday">
<input type="checkbox" [(ngModel)]="dividedCheckboxModel.friday"/> <i class="ion-paper-airplane"></i>
<input type="checkbox" [(ngModel)]="dividedCheckboxModel.friday"> <i class="ion-paper-airplane"></i>
</label>
<label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.saturday">
<input type="checkbox" [(ngModel)]="dividedCheckboxModel.saturday"/> <i class="ion-paper-airplane"></i>
<input type="checkbox" [(ngModel)]="dividedCheckboxModel.saturday"> <i class="ion-paper-airplane"></i>
</label>
</div>
</div>
<div class="example-container">
<div class="container-title">Divided Button Group</div>
<div [(ngModel)]="radioModel" ngbRadioGroup class="btn-group btn-group-block btn-group-divided-hidden" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" value="Left"/> Left
<div class="btn-group btn-divided-group btn-divided-group-block " data-toggle="buttons">
<label class="btn btn-outline-primary" [class.active]="checkboxModel.left">
<input type="checkbox" [(ngModel)]="checkboxModel.left"> Left
</label>
<label class="btn btn-primary">
<input type="radio" value="Middle"/> Middle
<label class="btn btn-outline-primary" [class.active]="checkboxModel.middle">
<input type="checkbox" [(ngModel)]="checkboxModel.middle"> Middle
</label>
<label class="btn btn-primary">
<input type="radio" value="Right"/> Right
<label class="btn btn-outline-primary" [class.active]="checkboxModel.right">
<input type="checkbox" [(ngModel)]="checkboxModel.right"> Right
</label>
</div>
<div class="btn-group btn-group-block btn-group-divided-hidden" data-toggle="buttons">
<div class="btn-group btn-divided-group btn-divided-group-block " data-toggle="buttons">
<label class="btn btn-primary" [class.active]="checkboxModel.left">
<input type="checkbox" [(ngModel)]="checkboxModel.left"/> Left
<input type="checkbox" [(ngModel)]="checkboxModel.left"> Left
</label>
<label class="btn btn-primary" [class.active]="checkboxModel.middle">
<input type="checkbox" [(ngModel)]="checkboxModel.middle"/> Middle
<input type="checkbox" [(ngModel)]="checkboxModel.middle"> Middle
</label>
<label class="btn btn-primary" [class.active]="checkboxModel.right">
<input type="checkbox" [(ngModel)]="checkboxModel.right"/> Right
<input type="checkbox" [(ngModel)]="checkboxModel.right"> Right
</label>
</div>
</div>

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

@ -1,5 +1,4 @@
@import '../../../../@theme/styles/variables';
@import '~@akveo/nga-theme/styles/global/bootstrap/buttons';
@include nga-install-component() {
@ -19,4 +18,20 @@
.example-container:not(:last-child) {
margin-bottom: 2rem;
}
.btn-toggle-group {
width: 100%;
.btn {
width: 100%;
}
}
.btn-divided-group-block {
width: 100%;
.btn {
width: 100%;
}
}
}

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

@ -7,12 +7,10 @@ import { Component } from '@angular/core';
})
export class ButtonGroupsComponent {
radioModel = 'Left';
checkboxModel = {
left: true,
left: false,
middle: false,
right: true,
right: false,
};
dividedCheckboxModel = {
@ -23,4 +21,13 @@ export class ButtonGroupsComponent {
friday: false,
saturday: false,
};
paginationModel = 1;
iconToolbarModel = {
one: false,
two: false,
three: true,
four: false,
};
}

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

@ -1,24 +1,24 @@
<div class="row">
<div class="col-md-12">
<div class="col-lg-12">
<ngx-hero-buttons></ngx-hero-buttons>
</div>
<div class="col-md-6">
<div class="col-lg-6">
<ngx-shape-buttons></ngx-shape-buttons>
<ngx-actions-groups></ngx-actions-groups>
<nga-card>
<nga-card-body>Disconect</nga-card-body>
</nga-card>
<div class="row">
<div class="col-md-4">
<div class="col-lg-4">
<ngx-dropdown-buttons></ngx-dropdown-buttons>
<ngx-icon-buttons></ngx-icon-buttons>
</div>
<div class="col-md-8">
<div class="col-lg-8">
<ngx-button-groups></ngx-button-groups>
</div>
</div>
</div>
<div class="col-md-6">
<div class="col-lg-6">
<ngx-size-buttons></ngx-size-buttons>
<ngx-default-buttons></ngx-default-buttons>
<ngx-block-level-buttons></ngx-block-level-buttons>

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

@ -1,56 +1,43 @@
<nga-card>
<nga-card-header>Button Dropdowns</nga-card-header>
<nga-card-body>
<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" ngbDropdownToggle>
<span class="sr-only">Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group" ngbDropdown>
<button type="button" class="btn btn-primary">Dropdown</button>
<button type="button" class="btn btn-primary" ngbDropdownToggle>
<span class="sr-only">Dropdown</span>
</button>
<button type="button" class="btn btn-primary" ngbDropdownToggle></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
<a class="dropdown-item" href="#">Icon Button</a>
<a class="dropdown-item" href="#">Hero Button</a>
<a class="dropdown-item" href="#">Default</a>
</div>
</div>
<div class="btn-group" ngbDropdown>
<button type="button" class="btn btn-outline-primary">Dropdown</button>
<button type="button" class="btn btn-outline-primary" ngbDropdownToggle>
<span class="sr-only">Dropdown</span>
<div ngbDropdown>
<button class="btn btn-primary" type="button" ngbDropdownToggle>
Dropdown
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
<a class="dropdown-item" href="#">Icon Button</a>
<a class="dropdown-item" href="#">Hero Button</a>
<a class="dropdown-item" href="#">Default</a>
</div>
</div>
<div class="btn-group btn-group-hidden" ngbDropdown>
<button type="button" class="btn btn-primary">Dropdown</button>
<button type="button" class="btn btn-primary" ngbDropdownToggle>
<span class="sr-only">Dropdown</span>
<div class="outline-dropdown" ngbDropdown>
<button class="btn btn-outline-primary" type="button" ngbDropdownToggle>
Dropdown
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
<a class="dropdown-item" href="#">Icon Button</a>
<a class="dropdown-item" href="#">Hero Button</a>
<a class="dropdown-item" href="#">Default</a>
</div>
</div>
<div class="ghost-dropdown" ngbDropdown>
<button class="btn btn-primary" type="button" ngbDropdownToggle>
Dropdown
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Icon Button</a>
<a class="dropdown-item" href="#">Hero Button</a>
<a class="dropdown-item" href="#">Default</a>
</div>
</div>
</nga-card-body>

15
src/app/pages/ui-features/buttons/dropdown-buttons/dropdown-button.component.scss
View file

@ -1,3 +1,14 @@
.dropdown, .btn-group {
margin-bottom: 1rem;
@import '../../../../@theme/styles/variables';
@include nga-install-component() {
text-align: center;
.dropdown, .btn-group {
margin-bottom: 1rem;
}
nga-card {
overflow-x: visible;
overflow-y: visible;
}
}

6
src/app/pages/ui-features/tabs/tabs.component.ts
View file

@ -3,10 +3,10 @@ import { Component } from '@angular/core';
@Component({
selector: 'ngx-tab1',
template: `
<p>Early home automation began with labor-saving machines. Self-contained electric or gas powered
<a href="/wiki/Home_appliances">home appliances</a> became viable in the 1900s with the introduction of
<p>Early home automation began with labor-saving machines. Self-contained electric or gas powered
<a href="/wiki/Home_appliances">home appliances</a> became viable in the 1900s with the introduction of
<a href="/wiki/Electric_power_distribution">electric power distribution</a>
and led to the introduction of washing machines (1904), water heaters (1889), refrigerators, sewing machines,
and led to the introduction of washing machines (1904), water heaters (1889), refrigerators, sewing machines,
dishwashers, and clothes dryers.
</p>
`,