文本框 textbox ：<kendo-textbox></kendo-textbox>

• [maxlength]：最大输入长度
• [showSuccessIcon] / [showErrorIcon]:显示内置验证图标
• kendoTextBoxPrefixTemplate：前 后缀 icon
• [clearButton]="true" ： TextBox 中呈现 Clear 按钮 （“X”）
• [(ngModel)]="value变量"  ：双向绑定
•  [disabled]="isDisabled" :禁用组件，isDisabled 变量值为布尔值
•  [readonly]="true"：只读
•  (afterValueChanged)="onAfterValueChange($event)":在组件接受新值前实现轻微延迟

 <kendo-textbox[style.width.px]="350"placeholder="Username"[maxlength]="maxlength"[clearButton]="true"(valueChange)="onValueChange($event)"[showSuccessIcon]="value.length >= 3"//boolean- 根据开发人员设置的条件呈现验证图标。showErrorIcon="initial"//组件自我验证-valid, invalid, touched,和 dirty(focus)="handleFocus()"><ng-template kendoTextBoxSuffixTemplate><span class="counter">{{ counter }}</span></ng-template>//前缀图标<ng-template kendoTextBoxPrefixTemplate><kendo-svgicon [icon]="menuIcon"></kendo-svgicon><button kendoButton fillMode="clear" [svgIcon]="calendarSvg"></button><kendo-textbox-separator></kendo-textbox-separator></ng-template>//后缀图标<ng-template kendoTextBoxSuffixTemplate><kendo-textbox-separator></kendo-textbox-separator><button kendoButton fillMode="clear" [svgIcon]="calendarSvg"></button><kendo-svgicon [icon]="bellIcon"></kendo-svgicon></ng-template>//去抖动值更改 ---默认情况下，Angular Inputs会毫不延迟地处理输入值的每次更新。
但是，输入中的更改可能会触发复杂的操作，例如网络请求。若要处理此类情况，请在组件接受新值之前实现轻微延迟。(afterValueChanged)="onAfterValueChange($event)"(valueChange)="onValueChange($event)"</kendo-textbox></kendo-label>public rawValue = 0;public value = 0;public onValueChange(value: number): void {this.rawValue = value;}public onAfterValueChange(value: number): void {this.value = value;}public handleFocus(): void {console.log('Component is isFocused');}

日期 DatePicker ： <kendo-datepicker></kendo-datepicker>

• calendarType="infinite"：日历类型， infinite（默认）/classic
• [focusedDate]="focusedDate" ：更改焦点日期，默认为当天
• [disabled]="isDisabled" :禁用组件，isDisabled 变量值为布尔值
•  [readonly]="true"：只读
• [readOnlyInput]="true"：不能通过input输入，只能在弹出的日历中选择日期。如果将 readonly 属性值设置为true ，则无论 readOnlyInput 值如何，输入框都只读。
•  [min]="min"  /  [max]="max"：您可以通过设置 min 和 max 属性来控制日期范围。如果配置了 min  和 max 属性，并且所选日期值超出此范围，则组件将触发验证错误。或者，为了防止键入超出范围的值，可以将输入呈现为只读状态，允许用户仅从弹出的日历中选择一个值.

  <kendo-datepickercalendarType="classic"[value]="value"[focusedDate]="focusedDate"[disabled]="true"[readonly]="true"[readOnlyInput]="true"></kendo-datepicker>public focusedDate: Date = new Date(2010, 10, 10);

网格Grid ：<kendo-grid></kendo-grid>

功能：包括分页、排序、过滤、调整列大小、分组、右击行时出现的菜单、列菜单和单元格编辑。

• <kendo-grid-column field="xx" ></kendo-grid-column>：默认情况下，当您将 Grid 绑定到数据时，它会自动为数据集中的每个字段生成一列。您可以重写此行为并手动定义必要的列。
•    <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex" let-column="column"></ng-template>：自定义显示cell 内容

<kendo-grid [data]="data">//显示 字段为 id 的列<kendo-grid-column field="id"></kendo-grid-column> //自定义列显示
<kendo-grid-column title="{{ 'Page2_Label_Cycle' | translate }}" [width]="110"><ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex" let-column="column">{{ "Page2_Label_Cycle" | translate }}{{ dataItem.cycleId }}</ng-template>
</kendo-grid-column><kendo-grid>

选项卡 tab: <kendo-tabstrip> </kendo-tabstrip >​​​​​​​

TabStrip 显示一组选项卡，其中包含相关内容，使用户能够在单个组件内的不同视图之间切换。

• [selected]="true" :默认选中tab
• [disabled]="true" ：禁用tab
•  <ng-template kendoTabTitle>内容</ng-template>：自定义tab 标题
• title="内容"  ：tab 标题
•  [closable]="true":显示关闭按钮。可以使用 TabStrip 的 closable 选项为所有选项卡启用此行为，也可以通过 TabStripTab 组件的 closable 选项为每个单独的选项卡启用此行为。

 <kendo-tabstrip [closable]="true"><kendo-tabstrip-tab title="Tab 1"><ng-template kendoTabContent><p>Tab 1 Content</p></ng-template></kendo-tabstrip-tab><kendo-tabstrip-tab  [selected]="true" [disabled]="true"  [closable]="true"><ng-template kendoTabTitle>//自定义tab 标题<h4>Tab 2 Title</h4></ng-template><ng-template kendoTabContent><p>Tab 2 Content</p></ng-template></kendo-tabstrip-tab><kendo-tabstrip-tab title="Tab 3"><ng-template kendoTabContent><p>Tab 3 Content</p></ng-template></kendo-tabstrip-tab></kendo-tabstrip>