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 buttons examples

Browse source
This commit is contained in:
Alexander Zhukov 2017-06-14 11:45:37 +03:00
parent fa26f9f0bf
commit 9ce1d2a589
10 changed files with 444 additions and 240 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1,121 @@
<nga-card>
<nga-card-header>Button Groups</nga-card-header>
<nga-card-body>
<div class="row button-groups">
<div class="col-md-12">
<div>
<div>Toogle Types</div>
<div class="btn-group btn-group-block btn-group-divider" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"/> Left
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"/> Middle
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"/> 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>
<label class="btn btn-primary">
<input type="radio" autocomplete="off"/> Middle
</label>
<label class="btn btn-primary">
<input type="radio" autocomplete="off"/> Right
</label>
</div>
</div>
<div class="toolbars-container">
<div class="pagination-container">
<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
</label>
<label class="btn btn-success">
<input type="radio" autocomplete="off"/> 2
</label>
<label class="btn btn-success">
<input type="radio" autocomplete="off"/> 3
</label>
<label class="btn btn-success">
<input type="radio" autocomplete="off"/> 4
</label>
<label class="btn btn-success">
<input type="radio" autocomplete="off"/> 5
</label>
</div>
</div>
<div class="icon-toolbar-container">
<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>
</label>
<label class="btn btn-success">
<input type="radio" autocomplete="off"/> <i class="ion-ionic"></i>
</label>
<label class="btn btn-success">
<input type="radio" autocomplete="off"/> <i class="ion-ionic"></i>
</label>
<label class="btn btn-success">
<input type="radio" autocomplete="off"/> <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"/>
</label>
<label class="btn btn-success">
<input type="checkbox" autocomplete="off"/>
</label>
<label class="btn btn-success">
<input type="checkbox" autocomplete="off"/>
</label>
<label class="btn btn-success">
<input type="checkbox" autocomplete="off"/>
</label>
<label class="btn btn-success">
<input type="checkbox" autocomplete="off"/>
</label>
<label class="btn btn-success">
<input type="checkbox" autocomplete="off"/> Right
</label>
</div>
</div>
<div>
<div>Divided Button Group</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
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"/> Middle
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"/> 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
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"/> Middle
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"/> Right
</label>
</div>
</div>
</div>
</div>
</nga-card-body>
</nga-card>