feat(buttons): add a labeled actions group

This commit is contained in:
Alexander Zhukov 2017-07-24 12:12:46 +03:00
parent 2e186f2bd6
commit 931dfea84e
5 changed files with 46 additions and 1 deletions

View file

@ -6,7 +6,9 @@
<ngx-shape-buttons></ngx-shape-buttons>
<ngx-actions-groups></ngx-actions-groups>
<nga-card>
<nga-card-body>Disconect</nga-card-body>
<nga-card-body>
<ngx-labeled-actions-group></ngx-labeled-actions-group>
</nga-card-body>
</nga-card>
<div class="row">
<div class="col-lg-4">

View file

@ -13,6 +13,7 @@ import { DropdownButtonsComponent } from './dropdown-buttons/dropdown-button.com
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';
import { LabeledActionsGroupComponent } from './labeled-actions-group/labeled-actions-group.component';
const components = [
ButtonsComponent,
@ -25,6 +26,7 @@ const components = [
BlockLevelButtonsComponent,
ButtonGroupsComponent,
IconButtonsComponent,
LabeledActionsGroupComponent,
];
@NgModule({

View file

@ -0,0 +1,14 @@
<nga-actions size="medium" fullWidth>
<nga-action>
<i class="ion-ios-pause-outline"></i><span>Pause</span>
</nga-action>
<nga-action>
<i class="ion-navicon"></i><span>Log View</span>
</nga-action>
<nga-action>
<i class="ion-ios-search"></i><span>Search</span>
</nga-action>
<nga-action>
<i class="ion-ios-gear-outline"></i><span>Setup</span>
</nga-action>
</nga-actions>

View file

@ -0,0 +1,18 @@
@import '../../../../@theme/styles/variables';
@include nga-install-component() {
nga-action {
i {
color: nga-theme(color-fg);
font-size: 2.5rem;
margin-right: 1rem;
}
span {
font-family: nga-theme(font-family-secondary);
font-weight: nga-theme(font-weight-bold);
color: nga-theme(color-fg-heading);
text-transform: uppercase;
}
}
}

View file

@ -0,0 +1,9 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-labeled-actions-group',
styleUrls: ['./labeled-actions-group.component.scss'],
templateUrl: './labeled-actions-group.component.html',
})
export class LabeledActionsGroupComponent {
}