Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-22 02:10:12 +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 Maksim Karatkevich
parent 3f77efdabf
commit 747f48d021
17 changed files with 216 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

58
src/app/pages/forms/form-inputs/material-inputs/material-inputs.component.html Normal file
View file

@ -0,0 +1,58 @@
<nb-card>
<nb-card-header>Angular Material</nb-card-header>
<nb-card-body>
<div class="row">
<div class="col-lg-6">
<mat-form-field class="input-example">
<mat-label>Input</mat-label>
<input matInput autocomplete="off">
<mat-hint>hint</mat-hint>
</mat-form-field>
<mat-form-field class="input-example">
<mat-label>Select</mat-label>
<mat-select>
<mat-option value="1">Option 1</mat-option>
<mat-option value="2">Option 2</mat-option>
<mat-option value="3">Option 3</mat-option>
</mat-select>
<mat-hint>hint</mat-hint>
</mat-form-field>
<mat-form-field class="input-example">
<mat-label>Datepicker</mat-label>
<input matInput autocomplete="off" [matDatepicker]="picker">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
<mat-hint>hint</mat-hint>
</mat-form-field>
</div>
<div class="col-lg-6">
<mat-form-field class="input-example">
<mat-label>Textarea</mat-label>
<textarea matInput autocomplete="off"></textarea>
<mat-hint>hint</mat-hint>
</mat-form-field>
<div class="input-example">
<label>Checkbox</label>
<mat-checkbox color="primary" [checked]="true"></mat-checkbox>
</div>
<div class="input-example">
<label>Toggle</label>
<mat-slide-toggle color="primary" [checked]="true"></mat-slide-toggle>
</div>
<div class="input-example">
<label>Radio</label>
<mat-radio-group color="primary">
<mat-radio-button value="1" [checked]="true">Option 1</mat-radio-button>
<mat-radio-button value="2">Option 2</mat-radio-button>
<mat-radio-button value="3">Option 3</mat-radio-button>
</mat-radio-group>
</div>
</div>
</div>
</nb-card-body>
</nb-card>

16
src/app/pages/forms/form-inputs/material-inputs/material-inputs.component.scss Normal file
View file

@ -0,0 +1,16 @@
:host {
display: block;
}
.input-example {
display: block;
margin-top: 1rem;
label, mat-radio-button {
margin-right: 1rem;
}
textarea {
min-height: 3rem;
}
}

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

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