Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-17 07:50:12 +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="row">
<div class="col-md-12"> <div class="col-md-12">
<div class="example-container"> <div class="example-container">
<div class="container-title">Toogle Types</div> <div class="container-title">Toggle Types</div>
<div [(ngModel)]="radioModel" ngbRadioGroup class="btn-group-block btn-group-divider" data-toggle="buttons"> <div class="btn-group btn-toggle-group btn-outline-toggle-group" data-toggle="buttons">
<label class="btn btn-primary"> <label class="btn btn-outline-primary" [class.active]="checkboxModel.left">
<input type="radio" value="Left"/> Left <input type="checkbox" [(ngModel)]="checkboxModel.left"> Left
</label> </label>
<label class="btn btn-primary"> <label class="btn btn-outline-primary" [class.active]="checkboxModel.middle">
<input type="radio" value="Middle"/> Middle <input type="checkbox" [(ngModel)]="checkboxModel.middle"> Middle
</label> </label>
<label class="btn btn-primary"> <label class="btn btn-outline-primary" [class.active]="checkboxModel.right">
<input type="radio" value="Right"/> Right <input type="checkbox" [(ngModel)]="checkboxModel.right"> Right
</label> </label>
</div> </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"> <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>
<label class="btn btn-primary" [class.active]="checkboxModel.middle"> <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>
<label class="btn btn-primary" [class.active]="checkboxModel.right"> <label class="btn btn-primary" [class.active]="checkboxModel.right">
<input type="checkbox" [(ngModel)]="checkboxModel.right"/> Right <input type="checkbox" [(ngModel)]="checkboxModel.right"> Right
</label> </label>
</div> </div>
</div> </div>
<div class="example-container toolbars-container"> <div class="example-container toolbars-container">
<div class="pagination-container"> <div class="pagination-container">
<div class="container-title">Pagination</div> <div class="container-title">Pagination</div>
<div class="btn-group btn-group-divider btn-group-pagination" data-toggle="buttons"> <div class="btn-group btn-group-pagination btn-toggle-group" data-toggle="buttons" [(ngModel)]="paginationModel"
<label class="btn btn-success"> ngbRadioGroup>
<input type="radio"/> 1 <label class="btn btn-outline-success">
<input type="radio" [value]="1"> 1
</label> </label>
<label class="btn btn-success"> <label class="btn btn-outline-success">
<input type="radio"/> 2 <input type="radio" [value]="2"> 2
</label> </label>
<label class="btn btn-success"> <label class="btn btn-outline-success">
<input type="radio"/> 3 <input type="radio" [value]="3"> 3
</label> </label>
<label class="btn btn-success"> <label class="btn btn-outline-success">
<input type="radio"/> 4 <input type="radio" [value]="4"> 4
</label> </label>
<label class="btn btn-success"> <label class="btn btn-outline-success">
<input type="radio" /> 5 <input type="radio" [value]="5"> 5
</label> </label>
</div> </div>
</div> </div>
<div class="icon-toolbar-container"> <div class="icon-toolbar-container">
<div class="container-title">Icon Toolbar</div> <div class="container-title">Icon Toolbar</div>
<div class="btn-group btn-group-divider btn-group-pagination" data-toggle="buttons"> <div class="btn-group btn-group-pagination" data-toggle="buttons">
<label class="btn btn-success"> <label class="btn btn-success" [class.active]="iconToolbarModel.one">
<input type="radio"/> <i class="ion-ionic"></i> <input type="checkbox" [(ngModel)]="iconToolbarModel.one"> 1
</label> </label>
<label class="btn btn-success"> <label class="btn btn-success" [class.active]="iconToolbarModel.two">
<input type="radio"/> <i class="ion-ionic"></i> <input type="checkbox" [(ngModel)]="iconToolbarModel.two"> 2
</label> </label>
<label class="btn btn-success"> <label class="btn btn-success" [class.active]="iconToolbarModel.three">
<input type="radio"/> <i class="ion-ionic"></i> <input type="checkbox" [(ngModel)]="iconToolbarModel.three"> 3
</label> </label>
<label class="btn btn-success"> <label class="btn btn-success" [class.active]="iconToolbarModel.four">
<input type="radio"/> <i class="ion-ionic"></i> <input type="checkbox" [(ngModel)]="iconToolbarModel.four"> 4
</label> </label>
</div> </div>
</div> </div>
</div> </div>
<div class="example-container"> <div class="example-container">
<div class="container-title">Divided Button Group</div> <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"> <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>
<label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.tuesday"> <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>
<label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.wednesday"> <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>
<label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.thursday"> <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>
<label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.friday"> <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>
<label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.saturday"> <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> </label>
</div> </div>
</div> </div>
<div class="example-container"> <div class="example-container">
<div class="container-title">Divided Button Group</div> <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"> <div class="btn-group btn-divided-group btn-divided-group-block " data-toggle="buttons">
<label class="btn btn-primary"> <label class="btn btn-outline-primary" [class.active]="checkboxModel.left">
<input type="radio" value="Left"/> Left <input type="checkbox" [(ngModel)]="checkboxModel.left"> Left
</label> </label>
<label class="btn btn-primary"> <label class="btn btn-outline-primary" [class.active]="checkboxModel.middle">
<input type="radio" value="Middle"/> Middle <input type="checkbox" [(ngModel)]="checkboxModel.middle"> Middle
</label> </label>
<label class="btn btn-primary"> <label class="btn btn-outline-primary" [class.active]="checkboxModel.right">
<input type="radio" value="Right"/> Right <input type="checkbox" [(ngModel)]="checkboxModel.right"> Right
</label> </label>
</div> </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"> <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>
<label class="btn btn-primary" [class.active]="checkboxModel.middle"> <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>
<label class="btn btn-primary" [class.active]="checkboxModel.right"> <label class="btn btn-primary" [class.active]="checkboxModel.right">
<input type="checkbox" [(ngModel)]="checkboxModel.right"/> 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.scss
View file

@ -1,5 +1,4 @@
@import '../../../../@theme/styles/variables'; @import '../../../../@theme/styles/variables';
@import '~@akveo/nga-theme/styles/global/bootstrap/buttons';
@include nga-install-component() { @include nga-install-component() {
@ -19,4 +18,20 @@
.example-container:not(:last-child) { .example-container:not(:last-child) {
margin-bottom: 2rem; 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 { export class ButtonGroupsComponent {
radioModel = 'Left';
checkboxModel = { checkboxModel = {
left: true, left: false,
middle: false, middle: false,
right: true, right: false,
}; };
dividedCheckboxModel = { dividedCheckboxModel = {
@ -23,4 +21,13 @@ export class ButtonGroupsComponent {
friday: false, friday: false,
saturday: 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="row">
<div class="col-md-12"> <div class="col-lg-12">
<ngx-hero-buttons></ngx-hero-buttons> <ngx-hero-buttons></ngx-hero-buttons>
</div> </div>
<div class="col-md-6"> <div class="col-lg-6">
<ngx-shape-buttons></ngx-shape-buttons> <ngx-shape-buttons></ngx-shape-buttons>
<ngx-actions-groups></ngx-actions-groups> <ngx-actions-groups></ngx-actions-groups>
<nga-card> <nga-card>
<nga-card-body>Disconect</nga-card-body> <nga-card-body>Disconect</nga-card-body>
</nga-card> </nga-card>
<div class="row"> <div class="row">
<div class="col-md-4"> <div class="col-lg-4">
<ngx-dropdown-buttons></ngx-dropdown-buttons> <ngx-dropdown-buttons></ngx-dropdown-buttons>
<ngx-icon-buttons></ngx-icon-buttons> <ngx-icon-buttons></ngx-icon-buttons>
</div> </div>
<div class="col-md-8"> <div class="col-lg-8">
<ngx-button-groups></ngx-button-groups> <ngx-button-groups></ngx-button-groups>
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-lg-6">
<ngx-size-buttons></ngx-size-buttons> <ngx-size-buttons></ngx-size-buttons>
<ngx-default-buttons></ngx-default-buttons> <ngx-default-buttons></ngx-default-buttons>
<ngx-block-level-buttons></ngx-block-level-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>
<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" 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> <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" ngbDropdownToggle> <button type="button" class="btn btn-primary" ngbDropdownToggle></button>
<span class="sr-only">Dropdown</span>
</button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Icon Button</a>
<a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Hero Button</a>
<a class="dropdown-item" href="#">Something else here</a> <a class="dropdown-item" href="#">Default</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div> </div>
</div> </div>
<div class="btn-group" ngbDropdown> <div ngbDropdown>
<button type="button" class="btn btn-outline-primary">Dropdown</button> <button class="btn btn-primary" type="button" ngbDropdownToggle>
<button type="button" class="btn btn-outline-primary" ngbDropdownToggle> Dropdown
<span class="sr-only">Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Icon Button</a>
<a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Hero Button</a>
<a class="dropdown-item" href="#">Something else here</a> <a class="dropdown-item" href="#">Default</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div> </div>
</div> </div>
<div class="btn-group btn-group-hidden" ngbDropdown> <div class="outline-dropdown" ngbDropdown>
<button type="button" class="btn btn-primary">Dropdown</button> <button class="btn btn-outline-primary" type="button" ngbDropdownToggle>
<button type="button" class="btn btn-primary" ngbDropdownToggle> Dropdown
<span class="sr-only">Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Icon Button</a>
<a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Hero Button</a>
<a class="dropdown-item" href="#">Something else here</a> <a class="dropdown-item" href="#">Default</a>
<div class="dropdown-divider"></div> </div>
<a class="dropdown-item" href="#">Separated link</a> </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>
</div> </div>
</nga-card-body> </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 { @import '../../../../@theme/styles/variables';
margin-bottom: 1rem;
@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({ @Component({
selector: 'ngx-tab1', selector: 'ngx-tab1',
template: ` template: `
<p>Early home automation began with labor-saving machines. Self-contained electric or gas powered <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/Home_appliances">home appliances</a> became viable in the 1900s with the introduction of
<a href="/wiki/Electric_power_distribution">electric power distribution</a> <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. dishwashers, and clothes dryers.
</p> </p>
`, `,