html - 带有文本占位符和图标的 Angular 自定义文本框

Question

你好，我想创建一个自定义文本框，它需要文本占位符和帮助图标，它们应该弹出信息

在键入输入时，文本框应如下所示。

我检查了内置输入框的 bootstrap 和 primeng。没有找到。

注意它应该是响应式的。任何帮助深表感谢。

Answer 1

您可以使用 ngx bootstrap 并在您的模块中仅导入工具提示模块。

https://valor-software.com/ngx-bootstrap/#/tooltip

import {TooltipModule} from 'ngx-bootstrap';

并且您可以使用 Material 图标添加图标。你有一个看起来与你的例子完全一样的“帮助”图标:

https://material.io/tools/icons/?style=outline

  <mat-form-field>
    <input matInput placeholder="Tracking number">
    <mat-icon matSuffix tooltip="You can enter your...">help</mat-icon>
  </mat-form-field>

您也可以在 Angular 文档中查看:

https://material.angular.io/components/input/examples