如何将 Kendo 自动完成字段更改为 Angular material 输入字段？

Question

我想将 kendo 自动完成字段更改为与 angular material 输入相同的字段。

kendo UI 自动完成字段如下所示

我想更改上面的 kendo UI 自动完成字段如下所示

kendo UI 自动完成字段的 HTML 如下所示

<div class="example-wrapper">
    <kendo-autocomplete [data]="listItems" [placeholder]="'e.g. Andorra'">
    </kendo-autocomplete>
</div>

material UI 的 HTML 如下所示。

<mat-form-field class="example-full-width">
    <input type="text" placeholder="Groups"  matInput [formControl]="queryField">
</mat-form-field>

可以吗？

Answer 1

如果您正在使用 kendo，您可以在 material 设计中包装 kendo 个组件。

您可以在项目中安装 kendo-theme-material。

npm install --save @progress/kendo-theme-material

并在您的 angular.json 文件中添加指向 kendo-theme-material 的路径。

{
  "apps": [
    {
      "styles": [
        "node_modules/@progress/kendo-theme-material/dist/all.css"
      ]
    }
  ]
}

它将转换 material 设计中的所有 kendo 组件。

How to change Kendo autocomplete filed slimier as Angular material input fields?