如何將Kendo自動完成字段更細化為Angular材質輸入字段？

Question

我想更改與角材料輸入相同的劍道自動完成字段。

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

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

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

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

素材用戶界面的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文件中添加angular.json kendo-theme-material路徑。

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

它將在材質設計中轉換所有劍道組件。