Skip to content
This repository has been archived by the owner on Oct 7, 2020. It is now read-only.

Commit

Permalink
docs(demo): Add demo of MDC Text field boxes + [dense] property
Browse files Browse the repository at this point in the history
  • Loading branch information
@trimox
trimox committed Jul 25, 2017
1 parent 09dca7a commit 879fc48
Show file tree
Hide file tree
Showing 3 changed files with 36 additions and 26 deletions.
56 changes: 35 additions & 21 deletions src/demo-app/components/textfield-demo/textfield-demo.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,9 @@ <h1 mdc-typography-display1>Text Field</h1>
<tr>
<td>mdc-textfield</td>
</tr>
<tr>
<td>mdc-textfield-box</td>
</tr>
</tbody>
<thead>
<tr>
Expand All @@ -39,13 +42,17 @@ <h1 mdc-typography-display1>Text Field</h1>
<td>@Input() value: string</td>
<td>The input element's value.</td>
</tr>
<tr>
<td>@Input() dense: boolean</td>
<td>Shrinks the font size and height of the input.</td>
</tr>
<tr>
<td>@Input() fullwidth: boolean</td>
<td>Use to change element to fullwidth textfield.</td>
<td>Use to change element to fullwidth textfield. Not usable with mdc-textfield-box.</td>
</tr>
<tr>
<td>@Input() multiline: boolean</td>
<td>Use to allow multiple lines inside the textfield.</td>
<td>Use to allow multiple lines inside the textfield. Not usable with mdc-textfield-box.</td>
</tr>
<tr>
<td>@Input() disabled: boolean</td>
Expand All @@ -55,10 +62,6 @@ <h1 mdc-typography-display1>Text Field</h1>
<td>@Input() required: boolean</td>
<td>Whether the element is required.</td>
</tr>
<tr>
<td>@Input() labelId: string</td>
<td></td>
</tr>
<tr>
<td>@Input() label: string</td>
<td>Shown to the user when there's no focus or values.</td>
Expand All @@ -73,11 +76,11 @@ <h1 mdc-typography-display1>Text Field</h1>
</tr>
<tr>
<td>@Input() rows: number</td>
<td>Number of rows for this textarea.</td>
<td>Number of rows for this textarea. Not usable with mdc-textfield-box.</td>
</tr>
<tr>
<td>@Input() cols: number</td>
<td>Number of columns for this textarea.</td>
<td>Number of columns for this textarea. Not usable with mdc-textfield-box.</td>
</tr>
<tr>
<td>@Input() maxlength: number</td>
Expand Down Expand Up @@ -141,10 +144,9 @@ <h1 mdc-typography-display1>Text Field</h1>
</div>
<div fxLayout="column" class="mdc-padding">
<div fxFlexAlign="start">
<mdc-textfield [(ngModel)]="username" id="username" label="Username" [required]="isRequired" [disabled]="isDisabled" aria-controls="help-username-val">
<mdc-textfield [(ngModel)]="username" id="username" label="Username" [required]="isRequired" [disabled]="isDisabled" [dense]="isDense">
</mdc-textfield>
<p mdc-textfield-helptext id="help-username-val" [validation]="true" [persistent]="false">Username is required</p>
</div>
<p mdc-textfield-helptext [validation]="true" [persistent]="false">Username is required</p>
<mdc-form-field>
<mdc-checkbox [(ngModel)]="isDisabled"></mdc-checkbox>
<label>Disable</label>
Expand All @@ -153,21 +155,38 @@ <h1 mdc-typography-display1>Text Field</h1>
<mdc-checkbox [(ngModel)]="isRequired"></mdc-checkbox>
<label>Required</label>
</mdc-form-field>
<mdc-form-field>
<mdc-checkbox [(ngModel)]="isDense"></mdc-checkbox>
<label>Dense</label>
</mdc-form-field>
</div>
<pre style="background:#000;color:#f8f8f8"><span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-textfield</span>
[(<span style="color:#89bdff">ngModel</span>)]=<span style="color:#65b042">"username"</span>
<span style="color:#89bdff">label</span>=<span style="color:#65b042">"Username"</span>
[<span style="color:#89bdff">required</span>]=<span style="color:#65b042">"true"</span>
[<span style="color:#89bdff">disabled</span>]=<span style="color:#65b042">"false"</span>
<span style="color:#89bdff">aria-controls</span>=<span style="color:#65b042">"help-username-val"</span>
[<span style="color:#89bdff">dense</span>]=<span style="color:#65b042">"false"</span>
(<span style="color:#89bdff">focus</span>)=<span style="color:#65b042">"handleFocus($event);"</span>
(<span style="color:#89bdff">blur</span>)=<span style="color:#65b042">"handleBlur($event);"</span>
(<span style="color:#89bdff">input</span>)=<span style="color:#65b042">"handleInput($event);"</span>
(<span style="color:#89bdff">keydown</span>)=<span style="color:#65b042">"handleKeyDown($event);"</span>></span><span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-textfield</span>></span>
<span style="color:#89bdff">&lt;<span style="color:#89bdff">p</span> <span style="color:#89bdff">mdc-textfield-helptext</span>
<span style="color:#89bdff">id</span>=<span style="color:#65b042">"help-username-val"</span>
[<span style="color:#89bdff">validation</span>]=<span style="color:#65b042">"true"</span>
[<span style="color:#89bdff">persistent</span>]=<span style="color:#65b042">"false"</span>></span>Username is required<span style="color:#89bdff">&lt;/<span style="color:#89bdff">p</span>></span>
</pre> </div>
<span mdc-typography-headline>Textfield box</span>
<div fxFlexAlign="start" class="mdc-padding">
<mdc-textfield-box
[required]="true"
label="Your name"></mdc-textfield-box>
<p mdc-textfield-helptext
[validation]="true">Name is required</p>
<pre style="background:#000;color:#f8f8f8"><span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-textfield-box</span>
[<span style="color:#89bdff">required</span>]=<span style="color:#65b042">"true"</span>
<span style="color:#89bdff">label</span>=<span style="color:#65b042">"Your name"</span>></span><span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-textfield-box</span>></span>
<span style="color:#89bdff">&lt;<span style="color:#89bdff">p</span> <span style="color:#89bdff">mdc-textfield-helptext</span>
[<span style="color:#89bdff">validation</span>]=<span style="color:#65b042">"true"</span>></span>Name is required<span style="color:#89bdff">&lt;/<span style="color:#89bdff">p</span>></span>
</pre> </div>
<div fxLayout="column" class="mdc-padding">
<div fxFlexAlign="start" class="mdc-padding" mdc-theme-dark>
<mdc-textfield label="Dark theme"></mdc-textfield>
Expand All @@ -177,10 +196,10 @@ <h1 mdc-typography-display1>Text Field</h1>
<span style="color:#89bdff">&lt;/<span style="color:#89bdff">div</span>></span>
</pre> </div>
<div fxLayout="column" class="mdc-padding">
<span mdc-typography-headline>Multi-line</span>
<div fxFlexAlign="start">
<mdc-textfield [(ngModel)]="comments" id="comments" label="Comments" rows="8" cols="40" [multiline]="true"></mdc-textfield>
</div>
<p>Multi-line</p>
<pre style="background:#000;color:#f8f8f8"><span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-textfield</span>
[(<span style="color:#89bdff">ngModel</span>)]=<span style="color:#65b042">"comments"</span>
<span style="color:#89bdff">label</span>=<span style="color:#65b042">"Comments"</span>
Expand All @@ -189,21 +208,21 @@ <h1 mdc-typography-display1>Text Field</h1>
[<span style="color:#89bdff">multiline</span>]=<span style="color:#65b042">"true"</span>></span><span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-textfield</span>></span>
</pre> </div>
<div fxLayout="column" class="mdc-padding">
<span mdc-typography-headline>Full-width single line</span>
<div>
<mdc-textfield [(ngModel)]="subject" id="subject" placeholder="Subject" [fullwidth]="true"></mdc-textfield>
</div>
<p>Full-width single line</p>
<pre style="background:#000;color:#f8f8f8"><span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-textfield</span> [(<span style="color:#89bdff">ngModel</span>)]=<span style="color:#65b042">"subject"</span>
<span style="color:#89bdff">placeholder</span>=<span style="color:#65b042">"Subject"</span>
[<span style="color:#89bdff">fullwidth</span>]=<span style="color:#65b042">"true"</span>></span>
<span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-textfield</span>></span>
</pre>
</div>
<div fxLayout="column" class="mdc-padding">
<span mdc-typography-headline>Full-width multi-line</span>
<div>
<mdc-textfield [(ngModel)]="message" id="message" placeholder="Type your message here" [fullwidth]="true" [multiline]="true" rows="8"></mdc-textfield>
</div>
<p>Full-width multi-line</p>
<pre style="background:#000;color:#f8f8f8"><span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-textfield</span> [(<span style="color:#89bdff">ngModel</span>)]=<span style="color:#65b042">"message"</span>
<span style="color:#89bdff">placeholder</span>=<span style="color:#65b042">"Type your message here"</span>
[<span style="color:#89bdff">fullwidth</span>]=<span style="color:#65b042">"true"</span>
Expand All @@ -213,8 +232,3 @@ <h1 mdc-typography-display1>Text Field</h1>
</pre>
</div>
</div>
<!-- <p>Username ngModel : {{username ? username : 'empty'}}</p>
<p>Focused : {{inputHasFocus}}</p>
<p>Keydown event count : {{inputKeysPressed}}</p>
<p>Input event count : {{inputCount}}</p>
-->
1 change: 1 addition & 0 deletions src/demo-app/components/textfield-demo/textfield-demo.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,4 +14,5 @@ export class TextfieldDemoComponent {
message = null;
isDisabled = false;
isRequired = true;
isDense = false;
}
5 changes: 0 additions & 5 deletions src/demo-app/sass/mdc.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,3 @@
$mdc-theme-primary: #1565c0;

@import "material-components-web/material-components-web";

// temporary fix : https://github.com/material-components/material-components-web/issues/942
.mdc-button {
font-family: Roboto, sans-serif;
}

0 comments on commit 879fc48

Please sign in to comment.