如何将Kendo自动完成字段更细化为Angular材质输入字段？

Question

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

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

我想在剑道UI自动完成字段上方更改如下

kendo 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>

有可能这样做吗？

Answer 1

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

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

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