Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-09-22 05:50:48 +02: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

16
src/app/pages/ui-features/buttons/block-level-buttons/block-level-buttons.component.html Normal file
View file

@ -0,0 +1,16 @@
<nga-card>
<nga-card-header>Block Level Buttons</nga-card-header>
<nga-card-body>
<div class="row block-level-buttons">
<div class="col-md-12">
<div class="btn-group btn-group-block" role="group">
<button type="button" class="btn btn-primary btn-group-icon btn-group-divider">
<i class="ion-ios-home-outline"></i>
</button>
<button type="button" class="btn btn-primary btn-block">Icon Block Button</button>
</div>
<button type="button" class="btn btn-outline-primary btn-block">Block Button</button>
</div>
</div>
</nga-card-body>
</nga-card>

8
src/app/pages/ui-features/buttons/block-level-buttons/block-level-buttons.component.ts Normal file
View file

@ -0,0 +1,8 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'ngx-block-level-buttons',
templateUrl: './block-level-buttons.component.html',
})
export class BlockLevelButtonsComponent {
}

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>

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

@ -0,0 +1,8 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-button-groups',
templateUrl: './button-groups.component.html',
})
export class ButtonGroupsComponent {
}

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

@ -24,18 +24,12 @@
<ngx-dropdown-buttons></ngx-dropdown-buttons>
</div>
<div class="col-md-12">
<nga-card>
<nga-card-header>Icon buttons</nga-card-header>
<nga-card-body></nga-card-body>
</nga-card>
<ngx-icon-buttons></ngx-icon-buttons>
</div>
</div>
</div>
<div class="col-md-8">
<nga-card>
<nga-card-header>Button Groups</nga-card-header>
<nga-card-body></nga-card-body>
</nga-card>
<ngx-button-groups></ngx-button-groups>
</div>
</div>
</div>
@ -45,10 +39,7 @@
<ngx-default-buttons></ngx-default-buttons>
</div>
<div class="col-md-12">
<nga-card>
<nga-card-header>Block Level Buttons</nga-card-header>
<nga-card-body></nga-card-body>
</nga-card>
<ngx-block-level-buttons></ngx-block-level-buttons>
</div>
</div>
</div>

407
src/app/pages/ui-features/buttons/buttons.component.scss
View file

@ -6,11 +6,10 @@
}
@include nga-install-component() {
$btn-component-size: 50px;
$btn-component-bd-radius: 12px;
/deep/ {
$button-size: 50px;
$button-border-radius: 12px;
.btn-demo {
width: 180px;
height: 48px;
@ -18,31 +17,34 @@
.states-container .state-container {
display: flex;
}
.state-value {
width: $btn-component-size;
height: $btn-component-size;
border-radius: $btn-component-bd-radius;
margin-bottom: 16px;
}
.states-container .state-container .state-value {
width: $button-size;
height: $button-size;
border-radius: $button-border-radius;
}
.state-details {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 17px;
height: $btn-component-size;
}
.states-container .state-container .state-details {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 1rem;
height: $button-size;
}
.state-details .header {
color: white;
}
.states-container .state-container .state-details .header {
color: white;
}
.state-details .subheader {
font-size: 0.875rem;
line-height: 1rem;
font-weight: 300;
}
.states-container .state-container .state-details .subheader {
font-size: 0.875rem;
line-height: 1rem;
font-weight: 300;
}
.states-container .state-container:not(:last-child) .state-value {
margin-bottom: 1rem;
}
.example-container {
@ -51,222 +53,227 @@
.example-container .container-title {
font-family: nga-theme(font-secondary);
margin-bottom: 14px;
margin-bottom: 1rem;
}
.example-container .container-btn {
margin-bottom: 24px;
margin-bottom: 1rem;
}
.hero-buttons {
.example-container .states-container.primary-container {
.gradient {
@include primary-gradient();
}
.glow {
@include primary-glow();
}
.bevel-border {
@include primary-bevel();
}
.shadow {
@include shadow();
}
.example-container .states-container.primary-container .gradient {
@include btn-hero-primary-gradient();
}
.example-container .states-container.warning-container {
.gradient {
@include warning-gradient();
}
.glow {
@include warning-glow();
}
.bevel-border {
@include warning-bevel();
}
.shadow {
@include shadow();
}
.example-container .states-container.primary-container .glow {
@include btn-hero-primary-glow();
}
.example-container .states-container.success-container {
.gradient {
@include success-gradient();
}
.glow {
@include success-glow();
}
.bevel-border {
@include success-bevel();
}
.shadow {
@include shadow();
}
.example-container .states-container.primary-container .bevel-border {
@include btn-hero-primary-bevel();
}
.example-container .states-container.info-container {
.gradient {
@include info-gradient();
}
.glow {
@include info-glow();
}
.bevel-border {
@include info-bevel();
}
.shadow {
@include shadow();
}
.example-container .states-container.primary-container .shadow {
@include btn-hero-shadow();
}
.example-container .states-container.danger-container {
.gradient {
@include danger-gradient();
}
.glow {
@include danger-glow();
}
.bevel-border {
@include danger-bevel();
}
.shadow {
@include shadow();
}
.example-container .states-container.warning-container .gradient {
@include btn-hero-warning-gradient();
}
.example-container .states-container.secondary-container {
.border {
color: nga-theme(btn-secondary-color);
border: nga-theme(btn-secondary-border-width) solid nga-theme(btn-secondary-border);
}
.example-container .states-container.warning-container .glow {
@include btn-hero-warning-glow();
}
.glow {
@include secondary-glow();
}
.example-container .states-container.warning-container .bevel-border {
@include btn-hero-warning-bevel();
}
.bevel-border {
@include secondary-bevel();
}
.example-container .states-container.warning-container .shadow {
@include btn-hero-shadow();
}
.shadow {
@include shadow();
}
.example-container .states-container.success-container .gradient {
@include btn-hero-success-gradient();
}
.example-container .states-container.success-container .glow {
@include btn-hero-success-glow();
}
.example-container .states-container.success-container .bevel-border {
@include btn-hero-success-bevel();
}
.example-container .states-container.success-container .shadow {
@include btn-hero-shadow();
}
.example-container .states-container.info-container .gradient {
@include btn-hero-info-gradient();
}
.example-container .states-container.info-container .glow {
@include btn-hero-info-glow();
}
.example-container .states-container.info-container .bevel-border {
@include btn-hero-info-bevel();
}
.example-container .states-container.info-container .shadow {
@include btn-hero-shadow();
}
.example-container .states-container.danger-container .gradient {
@include btn-hero-danger-gradient();
}
.example-container .states-container.danger-container .glow {
@include btn-hero-danger-glow();
}
.example-container .states-container.danger-container .bevel-border {
@include btn-hero-danger-bevel();
}
.example-container .states-container.danger-container .shadow {
@include btn-hero-shadow();
}
.example-container .states-container.secondary-container .border {
color: nga-theme(btn-secondary-color);
border: nga-theme(btn-secondary-border-width) solid nga-theme(btn-secondary-border);
}
.example-container .states-container.secondary-container .glow {
@include btn-hero-secondary-glow();
}
.example-container .states-container.secondary-container .bevel-border {
@include btn-hero-secondary-bevel();
}
.example-container .states-container.secondary-container .shadow {
@include btn-hero-shadow();
}
}
.default-buttons {
.example-container .states-container.primary-container {
.original {
@include btn-bg(nga-theme(btn-primary-bg));
}
.hover {
@include primary-hover();
}
.active {
@include primary-active();
}
.example-container .states-container.primary-container .original {
@include btn-bg(nga-theme(btn-primary-bg));
}
.example-container .states-container.warning-container {
.original {
@include btn-bg(nga-theme(btn-warning-bg));
}
.hover {
@include warning-hover();
}
.active {
@include warning-active();
}
.example-container .states-container.primary-container .hover {
@include btn-primary-hover();
}
.example-container .states-container.success-container {
.original {
@include btn-bg(nga-theme(btn-success-bg));
}
.hover {
@include success-hover();
}
.active {
@include success-active();
}
.example-container .states-container.primary-container .active {
@include btn-primary-active();
}
.example-container .states-container.info-container {
.original {
@include btn-bg(nga-theme(btn-info-bg));
}
.hover {
@include info-hover();
}
.active {
@include info-active();
}
.example-container .states-container.warning-container .original {
@include btn-bg(nga-theme(btn-warning-bg));
}
.example-container .states-container.danger-container {
.original {
@include btn-bg(nga-theme(btn-danger-bg));
}
.hover {
@include danger-hover();
}
.active {
@include danger-active();
}
.example-container .states-container.warning-container .hover {
@include btn-warning-hover();
}
.example-container .states-container.secondary-container {
.original {
@include btn-bg(nga-theme(btn-secondary-border));
}
.example-container .states-container.warning-container .active {
@include btn-warning-active();
}
.hover {
@include secondary-hover();
}
.example-container .states-container.success-container .original {
@include btn-bg(nga-theme(btn-success-bg));
}
.active {
@include secondary-active();
}
.example-container .states-container.success-container .hover {
@include btn-success-hover();
}
.example-container .states-container.success-container .active {
@include btn-success-active();
}
.example-container .states-container.info-container .original {
@include btn-bg(nga-theme(btn-info-bg));
}
.example-container .states-container.info-container .hover {
@include btn-info-hover();
}
.example-container .states-container.info-container .active {
@include btn-info-active();
}
.example-container .states-container.danger-container .original {
@include btn-bg(nga-theme(btn-danger-bg));
}
.example-container .states-container.danger-container .hover {
@include btn-danger-hover();
}
.example-container .states-container.danger-container .active {
@include btn-danger-active();
}
.example-container .states-container.secondary-container .original {
@include btn-bg(nga-theme(btn-secondary-border));
}
.example-container .states-container.secondary-container .hover {
@include btn-secondary-hover();
}
.example-container .states-container.secondary-container .active {
@include btn-secondary-active();
}
}
.actions-groups {
display: flex !important;
}
.container-title {
font-family: nga-theme(font-secondary);
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
color: white;
}
.actions-groups .container-title {
font-family: nga-theme(font-secondary);
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
color: white;
}
.block-level-buttons .btn-group {
margin-bottom: 1rem;
}
.button-groups .toolbars-container {
display: flex;
}
.button-groups .pagination-container {
flex: 1;
margin-right: 1rem;
}
.button-groups .icon-toolbar-container {
flex: 1;
}
.icon-buttons .btn-group:not(:last-child) {
margin-bottom: 1rem;
}
.icon-buttons .icon-button-examples {
display: flex;
justify-content: space-between;
}
.icon-buttons .icon-button-examples:not(:last-child) {
margin-bottom: 1rem;
}
}
}

6
src/app/pages/ui-features/buttons/buttons.module.ts
View file

@ -10,6 +10,9 @@ import { SizeButtonsComponent } from './size-buttons/size-buttons.component';
import { ButtonsComponent } from './buttons.component';
import { ActionsGroupsComponent } from './actions-groups/actions-groups.component';
import { DropdownButtonsComponent } from './dropdown-buttons/dropdown-button.component';
import { BlockLevelButtonsComponent } from './block-level-buttons/block-level-buttons.component';
import { ButtonGroupsComponent } from './button-groups/button-groups.component';
import { IconButtonsComponent } from './icon-buttons/icon-buttons.component';
const components = [
ButtonsComponent,
@ -19,6 +22,9 @@ const components = [
SizeButtonsComponent,
ActionsGroupsComponent,
DropdownButtonsComponent,
BlockLevelButtonsComponent,
ButtonGroupsComponent,
IconButtonsComponent,
];
@NgModule({

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

@ -1,23 +1,10 @@
<nga-card>
<nga-card-header>Button Dropdowns</nga-card-header>
<nga-card-body>
<div class="btn-group">
<button type="button" class="btn btn-secondary">Action</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle 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">
<button type="button" class="btn btn-primary">Action</button>
<div class="btn-group btn-group-dropdown-divider">
<button type="button" class="btn btn-primary">Dropdown</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
<span class="sr-only">Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
@ -27,34 +14,43 @@
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
<div class="btn-group">
<button type="button" class="btn btn-primary">Dropdown</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Dropdown</span>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<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="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
<div class="btn-group">
<button type="button" class="btn btn-outline-primary">Dropdown</button>
<button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Dropdown</span>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<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="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
<div class="btn-group btn-group-hidden">
<button type="button" class="btn btn-primary">Dropdown</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Dropdown</span>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<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>
</nga-card-body>

43
src/app/pages/ui-features/buttons/icon-buttons/icon-buttons.component.html Normal file
View file

@ -0,0 +1,43 @@
<nga-card>
<nga-card-header>Icon buttons</nga-card-header>
<nga-card-body>
<div class="row icon-buttons">
<div class="col-md-12">
<div class="btn-group">
<button type="button" class="btn btn-primary btn-group-icon btn-group-divider">
<i class="ion-ios-home-outline"></i>
</button>
<button type="button" class="btn btn-primary">Icon Button</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary btn-group-icon">
<i class="ion-ios-gear-outline"></i>
</button>
<button type="button" class="btn btn-primary">Icon Button</button>
</div>
<div class="icon-button-examples">
<button type="button" class="btn btn-outline-primary btn-icon">
<i class="ion-paper-airplane"></i>
</button>
<button type="button" class="btn btn-outline-success btn-icon">
<i class="ion-ios-cloud-download-outline"></i>
</button>
<button type="button" class="btn btn-outline-secondary btn-icon">
<i class="ion-ios-sunny-outline"></i>
</button>
</div>
<div class="icon-button-examples">
<button type="button" class="btn btn-primary btn-icon">
<i class="ion-plus"></i>
</button>
<button type="button" class="btn btn-success btn-icon">
<i class="ion-ios-home-outline"></i>
</button>
<button type="button" class="btn btn-secondary btn-icon">
<i class="ion-ios-gear-outline"></i>
</button>
</div>
</div>
</div>
</nga-card-body>
</nga-card>

8
src/app/pages/ui-features/buttons/icon-buttons/icon-buttons.component.ts Normal file
View file

@ -0,0 +1,8 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-icon-buttons',
templateUrl: './icon-buttons.component.html',
})
export class IconButtonsComponent {
}