如何解决如何对Kendo DropDownButton项进行分组在它们之间添加水平线
我想在Kendo DropDownButton的两个项目之间添加<hr>
。我想我需要类似于How to add separator to kendo toolbar splitbutton menuitems的东西,因为所需的功能是相同的。
HTML
<kendo-dropdownbutton aria-label="Actions" class="k-button" [disabled]="isLoading" [data]="actionsOptions" (dblclick)="toolBarButtondblclick()" style="padding-bottom: 2px; padding-top: 2px;"><span class="k-icon k-i-grid"></span>{{lbl_Actions}}</kendo-dropdownbutton>
Ts
this.actionsOptions = [
{
text: this.lbl_copy,icon: 'copy',click: () => {
this.copyAPHit();
}
},{
text: this.lbl_ShowRelations,icon: 'connector',click: () => {
this.showRelations();
}
},{
disabled: (this.segmentsPath !== "APs"),text: this.lbl_UnSync,icon: 'non-recurrence',click: () => {
this.unSync();
}
}
];
因此,我需要在第二项和第三项之间添加一条水平线(分开)。我该如何实现?
解决方法
我设法在 HTML 中使用 kendoDropDownButtonItemTemplate
解决了这个问题。
<kendo-dropdownbutton aria-label="Actions" class="k-button" [disabled]="isLoading" [data]="actionsOptions" (dblclick)="toolBarButtondblclick()" style="padding-bottom: 2px; padding-top: 2px;">
<span class="k-icon k-i-grid"></span>
{{lbl_Actions}}
<ng-template kendoDropDownButtonItemTemplate let-dataItem>
<div style="width: 100%;">
<span class="k-icon k-i-{{ dataItem.icon }}"></span>
<span>{{ dataItem.text }}</span>
<hr *ngIf="dataItem.last" style="display: block; border: 1px solid #bebebe; margin-top: 0; margin-bottom: 0">
</div>
</ng-template>
TS 中的数据源应该稍微修改一下:
this.actionsOptions = [
{
text: this.lbl_Copy,icon: 'copy',click: () => {
this.copyAPHit();
},last: true
},{
text: this.lbl_ShowRelations,icon: 'connector',click: () => {
this.showRelations();
}
},{
disabled: (this.segmentsPath !== "APs"),text: this.lbl_UnSync,icon: 'non-recurrence',click: () => {
this.unSync();
}
}
];
其中 last
用于显示组的最后一项并创建所需的水平行。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。