mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 15:40:11 +01:00
feat(buttons): add a labeled actions group
This commit is contained in:
parent
2e186f2bd6
commit
931dfea84e
5 changed files with 46 additions and 1 deletions
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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 {
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue