Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2026-03-14 09:26:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Configure material theme, add material button and input examples

Browse source
This commit is contained in:
eugene-sinitsyn 2020-03-06 14:21:17 +03:00 • committed by Sergey Andrievskiy
parent 70ac56b28a
commit eaf4143731
17 changed files with 198 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/app/pages/forms/buttons/buttons.component.html
View file

@ -119,5 +119,11 @@
</nb-actions>
</nb-card-body>
</nb-card>
<nb-card *ngIf="materialThemeActivated">
<nb-card-body>
<ngx-material-buttons></ngx-material-buttons>
</nb-card-body>
</nb-card>
</div>
</div>

25
src/app/pages/forms/buttons/buttons.component.ts
View file

@ -1,5 +1,6 @@
import { Component } from '@angular/core';
import { NbComponentShape, NbComponentSize, NbComponentStatus } from '@nebular/theme';
import { NbComponentShape, NbComponentSize, NbComponentStatus, NbThemeService } from '@nebular/theme';
import { Subscription } from 'rxjs';
@Component({
selector: 'ngx-buttons',
@ -7,7 +8,23 @@ import { NbComponentShape, NbComponentSize, NbComponentStatus } from '@nebular/t
templateUrl: './buttons.component.html',
})
export class ButtonsComponent {
statuses: NbComponentStatus[] = [ 'primary', 'success', 'info', 'warning', 'danger' ];
shapes: NbComponentShape[] = [ 'rectangle', 'semi-round', 'round' ];
sizes: NbComponentSize[] = [ 'tiny', 'small', 'medium', 'large', 'giant' ];
public constructor(private readonly themeService: NbThemeService) {}
private readonly subscription: Subscription = new Subscription();
public readonly statuses: NbComponentStatus[] = [ 'primary', 'success', 'info', 'warning', 'danger' ];
public readonly shapes: NbComponentShape[] = [ 'rectangle', 'semi-round', 'round' ];
public readonly sizes: NbComponentSize[] = [ 'tiny', 'small', 'medium', 'large', 'giant' ];
public materialThemeActivated: boolean = false;
public ngOnInit(): void {
this.subscription.add(this.themeService.onThemeChange().subscribe(theme => {
const themeName: string = theme?.name || '';
this.materialThemeActivated = themeName.startsWith('material');
}));
}
public ngOnDestroy(): void {
this.subscription.unsubscribe();
}
}

6
src/app/pages/forms/buttons/material-buttons/material-buttons.component.html Normal file
View file

@ -0,0 +1,6 @@
<button mat-button color="primary">Basic</button>
<button mat-raised-button color="primary">Raised</button>
<button mat-stroked-button color="primary">Stroked</button>
<button mat-flat-button color="primary">Flat</button>
<button mat-fab color="primary">FAB</button>
<button mat-mini-fab color="primary">mini</button>

3
src/app/pages/forms/buttons/material-buttons/material-buttons.component.scss Normal file
View file

@ -0,0 +1,3 @@
button {
margin: 0.5rem;
}

8
src/app/pages/forms/buttons/material-buttons/material-buttons.component.ts Normal file
View file

@ -0,0 +1,8 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-material-buttons',
templateUrl: './material-buttons.component.html',
styleUrls: ['./material-buttons.component.scss']
})
export class MaterialButtonsComponent {}