mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-17 16:00:14 +01:00
fix(buttons): page responsive
This commit is contained in:
Mikhail Hryb
KostyaDanovsky
parent
9d1697776e
commit
74a4de29fc
7 changed files with 149 additions and 58 deletions
|
|
@ -30,82 +30,93 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="example-container toolbars-container">
|
||||
<div class="pagination-container">
|
||||
<div class="container-title">Pagination</div>
|
||||
<div class="btn-group btn-toggle-group btn-outline-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-outline-success">
|
||||
<input type="radio" [value]="2"> 2
|
||||
</label>
|
||||
<label class="btn btn-outline-success">
|
||||
<input type="radio" [value]="3"> 3
|
||||
</label>
|
||||
<label class="btn btn-outline-success">
|
||||
<input type="radio" [value]="4"> 4
|
||||
</label>
|
||||
<label class="btn btn-outline-success">
|
||||
<input type="radio" [value]="5"> 5
|
||||
</label>
|
||||
<div class="row">
|
||||
<div class="pagination-container col-xxxl-6">
|
||||
<div class="container-title">Pagination</div>
|
||||
<div class="btn-group btn-toggle-group btn-outline-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-outline-success">
|
||||
<input type="radio" [value]="2"> 2
|
||||
</label>
|
||||
<label class="btn btn-outline-success">
|
||||
<input type="radio" [value]="3"> 3
|
||||
</label>
|
||||
<label class="btn btn-outline-success">
|
||||
<input type="radio" [value]="4"> 4
|
||||
</label>
|
||||
<label class="btn btn-outline-success">
|
||||
<input type="radio" [value]="5"> 5
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="icon-toolbar-container">
|
||||
<div class="container-title">Icon Toolbar</div>
|
||||
<div class="btn-group btn-toggle-group" 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" [class.active]="iconToolbarModel.two">
|
||||
<input type="checkbox" [(ngModel)]="iconToolbarModel.two"> 2
|
||||
</label>
|
||||
<label class="btn btn-success" [class.active]="iconToolbarModel.three">
|
||||
<input type="checkbox" [(ngModel)]="iconToolbarModel.three"> 3
|
||||
</label>
|
||||
<label class="btn btn-success" [class.active]="iconToolbarModel.four">
|
||||
<input type="checkbox" [(ngModel)]="iconToolbarModel.four"> 4
|
||||
</label>
|
||||
<label class="btn btn-success" [class.active]="iconToolbarModel.five">
|
||||
<input type="checkbox" [(ngModel)]="iconToolbarModel.five"> 5
|
||||
</label>
|
||||
<div class="icon-toolbar-container col-xxxl-6">
|
||||
<div class="container-title">Icon Toolbar</div>
|
||||
<div class="btn-group btn-toggle-group" 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" [class.active]="iconToolbarModel.two">
|
||||
<input type="checkbox" [(ngModel)]="iconToolbarModel.two"> 2
|
||||
</label>
|
||||
<label class="btn btn-success" [class.active]="iconToolbarModel.three">
|
||||
<input type="checkbox" [(ngModel)]="iconToolbarModel.three"> 3
|
||||
</label>
|
||||
<label class="btn btn-success" [class.active]="iconToolbarModel.four">
|
||||
<input type="checkbox" [(ngModel)]="iconToolbarModel.four"> 4
|
||||
</label>
|
||||
<label class="btn btn-success" [class.active]="iconToolbarModel.five">
|
||||
<input type="checkbox" [(ngModel)]="iconToolbarModel.five"> 5
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="example-container">
|
||||
<div class="container-title divided-button-group">Divided Button Group</div>
|
||||
<div class="btn-group btn-divided-group btn-outline-divided-group btn-group-full-width btn-divided-checkbox-group" data-toggle="buttons">
|
||||
<div class="btn-group btn-divided-group btn-outline-divided-group btn-group-full-width btn-divided-checkbox-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-ios-americanfootball-outline"></i>
|
||||
<input type="checkbox" [(ngModel)]="dividedCheckboxModel.monday"> <i
|
||||
class="ion-ios-americanfootball-outline"></i>
|
||||
</label>
|
||||
<label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.tuesday">
|
||||
<input type="checkbox" [(ngModel)]="dividedCheckboxModel.tuesday"> <i class="ion-ios-baseball-outline"></i>
|
||||
<input type="checkbox" [(ngModel)]="dividedCheckboxModel.tuesday"> <i
|
||||
class="ion-ios-baseball-outline"></i>
|
||||
</label>
|
||||
<label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.wednesday">
|
||||
<input type="checkbox" [(ngModel)]="dividedCheckboxModel.wednesday"> <i class="ion-ios-football"></i>
|
||||
</label>
|
||||
<label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.thursday">
|
||||
<input type="checkbox" [(ngModel)]="dividedCheckboxModel.thursday"> <i class="ion-ios-tennisball-outline"></i>
|
||||
<input type="checkbox" [(ngModel)]="dividedCheckboxModel.thursday"> <i
|
||||
class="ion-ios-tennisball-outline"></i>
|
||||
</label>
|
||||
<label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.friday">
|
||||
<input type="checkbox" [(ngModel)]="dividedCheckboxModel.friday"> <i class="ion-ios-football-outline"></i>
|
||||
</label>
|
||||
<label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.saturday">
|
||||
<input type="checkbox" [(ngModel)]="dividedCheckboxModel.saturday"> <i class="ion-ios-basketball-outline"></i>
|
||||
<input type="checkbox" [(ngModel)]="dividedCheckboxModel.saturday"> <i
|
||||
class="ion-ios-basketball-outline"></i>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="example-container">
|
||||
<div class="container-title">Divided Button Group</div>
|
||||
<div [(ngModel)]="dividedButtonGroupOne" ngbRadioGroup class="btn-group btn-divided-group btn-outline-divided-group btn-group-full-width">
|
||||
<label class="btn btn-outline-primary">
|
||||
<input type="radio" value="left"> Left
|
||||
</label>
|
||||
<label class="btn btn-outline-primary">
|
||||
<input type="radio" value="middle"> Middle
|
||||
</label>
|
||||
<label class="btn btn-outline-primary">
|
||||
<input type="radio" value="right"> Right
|
||||
</label>
|
||||
<div class="row">
|
||||
<div [(ngModel)]="dividedButtonGroupOne" ngbRadioGroup
|
||||
class="btn-group btn-divided-group btn-outline-divided-group btn-group-full-width col-md-12">
|
||||
<label class="btn btn-outline-primary">
|
||||
<input type="radio" value="left"> Left
|
||||
</label>
|
||||
<label class="btn btn-outline-primary">
|
||||
<input type="radio" value="middle"> Middle
|
||||
</label>
|
||||
<label class="btn btn-outline-primary">
|
||||
<input type="radio" value="right"> Right
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group btn-divided-group btn-group-full-width" data-toggle="buttons">
|
||||
<label class="btn btn-primary" [class.active]="dividedButtonGroupTwo.left">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue