angular - 如何将 Kendo 自动完成字段更改为 Angular 材料输入字段？

Question

我想更改与角度材料输入相同的剑道自动完成文件。

剑道 UI 自动完成字段如下所示

我想在 kendo UI 自动完成字段上方进行更改，如下所示

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

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

材质 UI 的 HTML 如下所示。

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

可以这样做吗？

score 1 · Accepted Answer

如果您使用的是剑道，您可以在材料设计中包装剑道组件。

您可以安装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"
      ]
    }
  ]
}

它将在材料设计中转换您所有的剑道组件。

1 回答 1