mirror of
https://github.com/akveo/ngx-admin.git
synced 2026-01-22 01:06:10 +01:00
parent
f4890b1338
commit
ef740d7b1c
24 changed files with 1580 additions and 116 deletions
|
|
@ -120,7 +120,7 @@
|
|||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<nb-card>
|
||||
<nb-card *ngIf="materialTheme$ | async">
|
||||
<nb-card-body>
|
||||
<ngx-material-buttons></ngx-material-buttons>
|
||||
</nb-card-body>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { NbComponentShape, NbComponentSize, NbComponentStatus } from '@nebular/theme';
|
||||
import { NbComponentShape, NbComponentSize, NbComponentStatus, NbThemeService } from '@nebular/theme';
|
||||
import { Observable } from 'rxjs';
|
||||
import { map } from 'rxjs/operators';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-buttons',
|
||||
|
|
@ -7,7 +9,18 @@ import { NbComponentShape, NbComponentSize, NbComponentStatus } from '@nebular/t
|
|||
templateUrl: './buttons.component.html',
|
||||
})
|
||||
export class ButtonsComponent {
|
||||
public constructor(private readonly themeService: NbThemeService) {
|
||||
this.materialTheme$ = this.themeService.onThemeChange()
|
||||
.pipe(map(theme => {
|
||||
const themeName: string = theme?.name || '';
|
||||
return themeName.startsWith('material');
|
||||
}));
|
||||
}
|
||||
|
||||
public readonly materialTheme$: Observable<boolean>;
|
||||
|
||||
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' ];
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,10 @@
|
|||
</div>
|
||||
<input type="password" nbInput fullWidth placeholder="Password">
|
||||
<input type="text" nbInput fullWidth shape="rectangle" placeholder="Rectangle border">
|
||||
<ng-container *ngIf="!(materialTheme$ | async)">
|
||||
<input type="text" nbInput fullWidth shape="semi-round" placeholder="Semi-round border">
|
||||
<input type="text" nbInput fullWidth shape="round" placeholder="Rounded border">
|
||||
</ng-container>
|
||||
<input type="text" nbInput fullWidth placeholder="Disabled input" disabled/>
|
||||
<textarea rows="5" nbInput fullWidth shape="round" placeholder="Text Area"></textarea>
|
||||
<input type="text" nbInput fullWidth fieldSize="small" placeholder="Small Input">
|
||||
|
|
@ -83,7 +87,7 @@
|
|||
</nb-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div *ngIf="materialTheme$ | async" class="row">
|
||||
<div class="col-lg-12">
|
||||
<ngx-material-inputs></ngx-material-inputs>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,7 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { NbThemeService } from '@nebular/theme';
|
||||
import { Observable } from 'rxjs';
|
||||
import { map } from 'rxjs/operators';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-form-inputs',
|
||||
|
|
@ -6,6 +9,16 @@ import { Component } from '@angular/core';
|
|||
templateUrl: './form-inputs.component.html',
|
||||
})
|
||||
export class FormInputsComponent {
|
||||
public constructor(private readonly themeService: NbThemeService) {
|
||||
this.materialTheme$ = this.themeService.onThemeChange()
|
||||
.pipe(map(theme => {
|
||||
const themeName: string = theme?.name || '';
|
||||
return themeName.startsWith('material');
|
||||
}));
|
||||
}
|
||||
|
||||
public readonly materialTheme$: Observable<boolean>;
|
||||
|
||||
public starRate: number = 2;
|
||||
public heartRate: number = 4;
|
||||
public radioGroupValue: string = 'This is value 2';
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue