ng2-encrm-components
Version:
193 lines (188 loc) • 7.67 kB
HTML
<div class="col-xs-12">
<h1 id="forms">Forms</h1>
<br>
<form name="previewForm">
<en-input type="text" [(ngModel)]="form.input" placeholder="input" name="input"></en-input>
<en-input type="email" [(ngModel)]="form.error" [placeholder]="'has error'" name="error"
class="has-danger"></en-input>
<en-input type="text" [(ngModel)]="form.disabled" name="disabled"
[placeholder]="'input disabled'" disabled></en-input>
<en-input type="text"
name="search"
[(ngModel)]="form.search"
placeholder="search"
(btnClick)="inputSearchClick($event)" addonRight>
<i class="material-icons">search</i>
</en-input>
<!--textarea to standardowy element z klasami bootstrap-->
<div class="en-input-group">
<textarea id="form.input.textarea" class="form-control en-form-control"
name="textarea"
cols="30"
rows="10" [(ngModel)]="form.textarea" required></textarea>
<label for="form.input.textarea">textarea</label>
</div>
<br>
<div class="en-input-group">
<select name="name" class="en-form-control custom-select w-100">
<option [value]="'1'"> 1</option>
<option [value]="'2'"> 2</option>
</select>
<label>default select</label>
</div>
<br>
<!--złożony select box-->
<en-select [options]="selectOptions"
label="compound select"
placeholder="placeholder">
</en-select>
<tabset>
<tab heading="HTML">
<pre><code highlight class="html">
<en-input type="text" [(ngModel)]="form.input" placeholder="input" name="input"></en-input>
<en-input type="email"
[(ngModel)]="form.error"
[placeholder]="'has error'"
name="error"
class="has-danger"></en-input>
<en-input type="text"
[(ngModel)]="form.disabled"
name="disabled"
[placeholder]="'input disabled'"
disabled></en-input>
<en-input type="text"
name="search"
[(ngModel)]="form.search"
placeholder="search"
(btnClick)="inputSearchClick($event)" addonRight>
<i class="material-icons">search</i>
</en-input>
<!--textarea to standardowy element z klasami bootstrap-->
<div class="en-input-group">
<textarea id="form.input.textarea" class="form-control en-form-control"
name="textarea"
cols="30"
rows="10" [(ngModel)]="form.textarea" required></textarea>
<label for="form.input.textarea">textarea</label>
</div>
<!--standardowy select box-->
<div class="en-input-group">
<select class="form-control en-form-control custom-select" id="select.box">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label for="select.box">select box std</label>
</div>
<br>
<div class="en-input-group">
<select name="name" class="en-form-control custom-select w-100">
<option [value]="'1'"> 1</option>
<option [value]="'2'"> 2</option>
</select>
<label>default select</label>
</div>
<br>
<!--złożony select box-->
<en-select [options]="selectOptions"
label="compound select"
placeholder="placeholder">
</en-select>
</code></pre>
</tab>
<tab heading="TypeScript">
<pre><code highlight class="typescript">
@Component(...)
export class FormsPreviewComponent implements OnInit {
constructor() {}
ngOnInit() {}
/*---------------------------------------------------------
* FORMS
*--------------------------------------------------------*/
public form = {
input: 'asd',
search: '',
error: 'err',
textarea: '',
disabled: 'asdasd',
};
inputSearchClick(e: Event){
// search box handler
}
/*----------------------------------------------------------
* SELECTS
*---------------------------------------------------------*/
public selectOptions = [
{
label: 'nazwa',
value: 'name'
},
{
label: 'ulica',
value: 'street',
suboptions: [
{
label: 'od A do Z',
value: 'asc'
},
{
label: 'od Z do A',
value: 'desc'
}
]
}
];
}
</code></pre>
</tab>
</tabset>
<br>
<form>
<en-checkbox label="Check this custom checkbox">
<input type="checkbox" class="custom-control-input"
name="checkbox"
[(ngModel)]="checkboxModel">
</en-checkbox>
<br><br>
<label class="custom-control custom-radio">
<input id="radio1" name="radio" type="radio" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Toggle this custom radio</span>
</label>
<label class="custom-control custom-radio">
<input id="radio2" name="radio" type="radio" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span
class="custom-control-description">Or toggle this other custom radio</span>
</label></form>
<br><br>
<tabset>
<tab heading="HTML">
<pre><code highlight class="html">
<en-checkbox label="Check this custom checkbox">
<!--a normal input element with goes here, en-checkbox only wraps it in bs4 custom checkbox classes-->
<input type="checkbox" class="custom-control-input"
name="checkbox"
[(ngModel)]="checkboxModel">
</en-checkbox>
<br><br>
<label class="custom-control custom-radio">
<input id="radio1" name="radio" type="radio" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Toggle this custom radio</span>
</label>
<label class="custom-control custom-radio">
<input id="radio2" name="radio" type="radio" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span
class="custom-control-description">Or toggle this other custom radio</span>
</label>
</code></pre>
</tab>
<tab heading="TypeScript">
<pre highlight-js="code"><code class="typescript">none</code></pre>
</tab>
</tabset>
</form>
</div>