因此,对于我的 Angular 应用程序,我使用 Kendo-TreeView 组件创建了一个菜单构建器。我希望节点的操作按钮能够很好地对齐在右侧,如您所见......
因此,对于我的 Angular 应用程序,我使用 Kendo-TreeView 组件创建了一个菜单构建器。
我希望节点的操作按钮能够很好地对齐在右侧,正如您在图片中看到的那样。
问题预览以及我希望按钮对齐的位置
现在这是我在 TreeView 中使用 KendoTreeViewNodeTemplate 的代码
<ng-template kendoTreeViewNodeTemplate let-dataItem>
<div class="menu-tree-line">
<div class="menu-tree-dataItem">
<span [ngClass]="{'group-item': dataItem.type === 'GROUP'}">
@if (dataItem.icon != null && dataItem.icon != '') {
<i class="{{dataItem.icon}}"></i> -
}
{{ dataItem.title }} |
</span>
</div>
<div class="menu-btn-tree-container">
<app-crm-button [buttonIcon]="'feather icon-edit'"
(buttonClick)="openForm(dataItem)"
[buttonTooltip]="dataItem.type === 'GROUP' ? 'Bewerk menu groep' : 'Bewerk menu item'"
>
</app-crm-button>
@if (dataItem.type == 'GROUP') {
<app-crm-button [buttonIcon]="'feather icon-plus'"
(buttonClick)="initiateAddChildMenuItem(dataItem)"
[buttonTooltip]="'Voeg nieuw sub item toe'"
></app-crm-button>
}
@if (dataItem.type != 'GROUP') {
<app-crm-button [buttonIcon]="'feather icon-trash-2'" [buttonColor]="'error'"
[buttonTooltip]="'Verwijder menu item'"
(buttonClick)="deleteMenuItem(dataItem)"
>
</app-crm-button>
}
@if (dataItem.type == 'GROUP' && dataItem?.children?.length == null) {
<app-crm-button [buttonIcon]="'feather icon-trash-2'" [buttonColor]="'error'"
[buttonTooltip]="'Verwijder menu groep'"
(buttonClick)="deleteMenuItem(dataItem)"
>
</app-crm-button>
}
</div>
</div>
</ng-template>
这是 CSS
.menu-tree-line {
display: flex;
align-items: center;
justify-content: space-between !important;
width: 100%;
}
.menu-tree-dataItem {
display: flex;
align-items: center;
gap: 5px; /* Space between the text and icon */
}
.menu-btn-tree-container {
display: flex;
gap: 5px;
margin-left: 10px;
align-items: flex-end !important;
}
我试图让它与 flexbox 一起工作,但是没有工作。
非常感谢您的帮助。
谢谢!
您可以尝试以下 CSS。可能需要使用填充进行对齐。
修复方法包括移除 display: flex
和 block
, inline-block
以使其达到整个宽度。
最后在子元素上,我们用来 display: flex; justify-content: space-between
使元素首尾相连。
.custom-treeview .k-treeview-top,
.custom-treeview .k-treeview-mid,
.custom-treeview .k-treeview-bot {
display: block !important;
}
.custom-treeview .k-treeview-leaf {
display: inline-block !important;
width: 100% !important;
}
.custom-treeview .k-treeview-leaf > span {
display: flex !important;
justify-content: space-between !important;
}