[英]material design textField in angular 6
我想以一種形式使用兩個材料設計 textField 。 但是當我運行該項目時,只有一個工作,標簽的浮動對密碼字段不起作用。
<div class="col-md-12" style="padding: 0">
<div class="mdc-text-field mdc-text-field--outlined customInputWidth">
<input type="text" id="tf-outlined3" class="mdc-text-field__input">
<label for="tf-outlined3" class="mdc-floating-label">User Name</label>
<div class="mdc-notched-outline">
<svg>
<path class="mdc-notched-outline__path"/>
</svg>
</div>
<div class="mdc-notched-outline__idle"></div>
</div>
</div>
<div class="col-md-12" style="padding: 0;margin-top: 10px">
<div class="mdc-text-field mdc-text-field--outlined customInputWidth">
<input type="text" id="tf-outlined4" class="mdc-text-field__input">
<label for="tf-outlined4" class="mdc-floating-label">Password </label>
<div class="mdc-notched-outline">
<svg>
<path class="mdc-notched-outline__path"/>
</svg>
</div>
<div class="mdc-notched-outline__idle"></div>
</div>
</div>
ts:從“@material/textfield”導入{MDCTextField}; var textField = new MDCTextField(document.querySelector('.mdc-text-field'));
你可以試試這種方式:
ts:
import { MdcTextField, MdcIcon } from '@angular-mdc/web';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
constructor(
private _renderer: Renderer2) {}
}
html:
<div class="demo-content">
<h3 class="demo-content__headline">Outlined Text Field</h3>
<div class="demo-layout__row">
<button mdc-button (click)="outlined.disabled = !outlined.disabled">Disabled: {{outlined.disabled ? 'On' : 'Off'}}</button>
<button mdc-button (click)="outlined.required = !outlined.required">Required: {{outlined.required ? 'On' : 'Off'}}</button>
<button mdc-button (click)="outlined.dense = !outlined.dense">Dense: {{outlined.dense ? 'On' : 'Off'}}</button>
<button mdc-button (click)="alternateColors(outlined)">Alternate Colors</button>
</div>
<mdc-text-field #outlined outlined label="Your name"></mdc-text-field>
<br>
<mdc-text-field #outlined outlined label="Password"></mdc-text-field>
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.