Question

我是最新的顶级UI开发人员，对CSS没有很深的了解。我一直在搜索示例以使用Angular Material设置登录页面样式。我正在尝试获取表单字段以扩展卡的宽度（减去填充），但没有任何运气。

有人可以告诉我我的表单字段应该是什么样的吗？另外，我看到很多样式的名称都带有“ example-”。这些要在我的CSS中定义吗？

这是我的样式表：

.example-icon {
  padding: 0 14px;
}    
.example-spacer {
  flex: 1 1 auto;
}    
.example-card {
  max-width: 400px;
  width: 75%;
  margin: 10px auto;
}    
.example-header-image {
  background-image: image("./assets/logo.png");
  background-size: cover;
}    
.main-div {
  height: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

和html页面：

<div class="main-div">
  <mat-card class="example-card">
    <mat-card-header>
      <!--<div mat-card-avatar class="example-header-image"></div>-->
      <img mat-card-avatar src="./assets/logo.png">
      <mat-card-title>Login</mat-card-title>
    </mat-card-header>
    <mat-card-content>
      <form class="example-form">
        <table class="example-full-width" cellspacing="0">
          <tr>
            <td>
              <mat-form-field class="example-full-width">
                <input matInput placeholder="Username" [(ngModel)]="username" name="username" required>
              </mat-form-field>
            </td>
          </tr>
          <tr>
            <td>
              <mat-form-field class="example-full-width">
                <input matInput placeholder="Password" [(ngModel)]="password" type="password" name="password" required>
              </mat-form-field>
            </td>
          </tr>
        </table>
      </form>
      <mat-spinner [style.display]="showSpinner ? 'block' : 'none'"></mat-spinner>
    </mat-card-content>
    <mat-card-actions>
      <button mat-raised-button (click)="login()" color="primary">Login</button>
    </mat-card-actions>
  </mat-card>
</div>

Answer 1

您需要在模板中使用的.css文件中创建样式类。

.example-full-width {
  width: 100%;
}

您不需要在样式类中使用前缀示例，但不要忘记在template.html文件和.css文件中重命名它们。

材质：尝试为Mat-Card的表单字段设置样式

1 个答案: