Kendo UI for Angular 学习笔记
2024-01-08 17:47:00
文本框 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-datepicker
calendarType="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">
<kendo-grid-column field="id"></kendo-grid-column> //只显示 field 为 id 的列
<ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex" let- column="column">
<img [src]="dataItem.typeIcon" />
</ng-template>
</kendo-grid-column>
<kendo-grid>
文章来源:https://blog.csdn.net/qianqianyixiao1/article/details/135408888
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!