Как изменить поле Kendo для автозаполнения более тонким, как поля ввода углового материала?

Question

Я хочу изменить поле автозаполнения кендо так же, как и угловые входы материала.

поле автозаполнения пользовательского интерфейса kendo выглядит как показано ниже

Я хочу изменить выше поле автозаполнения пользовательского интерфейса kendo, как показано ниже

HTML-код для поля автозаполнения пользовательского интерфейса kendo, как показано ниже

<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 файле добавьте путь к kendo-theme-material.

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

Он преобразует все ваши компоненты кендо в дизайн материала.