时间戳

首页 > 解决方案 > 如何对 Kendo DropDownButton 的项目进行分组（在它们之间添加水平线）

angular - 如何对 Kendo DropDownButton 的项目进行分组（在它们之间添加水平线）

问题描述

我想<hr>在 Kendo DropDownButton 的两个项目之间添加。我想我需要类似于如何向剑道工具栏拆分按钮菜单项添加分隔符的东西，因为所需的功能是相同的。

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();
            }
        }
    ];

所以，我需要在第二项和第三项之间添加一条水平线（单独的）。我怎样才能做到这一点？

标签： angularkendo-ui-angular2

解决方案

我设法kendoDropDownButtonItemTemplate在 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}}
<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();
        }
    }
];

wherelast用于显示组的最后一项并创建所需的水平行。

推荐阅读