时间戳

首页 > 解决方案 > 使用 Angular 材质创建数字微调器？

html - 使用 Angular 材质创建数字微调器？

问题描述

Angular Material 有数字微调器吗？我从这个问题尝试了这个演示：


<mat-form-field>
    <input
      type="number"
      class="form-control"
      matInput
      name="value"
      placeholder="Slab"
      formControlName="value">
  </mat-form-field>

但它不渲染。我打算创建一个 Stackblitz，但它不适用于 Angular 12。

想法？

标签： htmlangularangular-material

解决方案

它只适用于.css。您在包装器 div matSuffix 中包含两个按钮 mat-icon-button

一个例子（disclammer，真的我不是很擅长css，很确定有更好的方法来获得相同的

.wrapper-indicator{
  position:relative;
  height:1.5rem;
  width:1.5rem;
  overflow:none;
}
.wrapper-indicator .up,.wrapper-indicator .down{
  position:absolute;
  right: 0;
  font-size:.5em;
  height: 1.25rem!important;
  width: 1.25rem!important;
}
.wrapper-indicator .up{
  top:-.25rem;
}
.wrapper-indicator .down{
  top:1rem;
}

并使用

  <mat-form-field appearance="fill" floatLabel="always">
    <mat-label>Amount</mat-label>
    <input matInput type="number" class="example-right-align" placeholder="0">
    <div matSuffix class="wrapper-indicator">
      <button class="up" mat-icon-button >
        <mat-icon>expand_less</mat-icon>
      </button>
      <button class="down" mat-icon-button >
        <mat-icon>expand_more</mat-icon>
      </button>
    </div>
  </mat-form-field>

如果您使用 type="number"，则直接更新mat-input 创建一个微调器。奇怪，当我输入时不显示“微调器”。看一下github中的代码，“类型”是 a @Input，所以想象一下它几乎是在旧版本的 Angulartype="number" 之后编写的 matInput

推荐阅读