角度为 6 的材料设计文本字段

Question

我想以一种形式使用两个材料设计 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'));

在此处输入图片说明

Answer 1

你可以试试这种方式：

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>

演示