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;
}
} }