在kendoTreeViewNodeTemplate（Angular）中设置数据项的样式

Question

因此，对于我的 Angular 应用程序，我使用 Kendo-TreeView 组件创建了一个菜单生成器。

我希望节点的操作按钮能够在右侧很好地对齐，如图所示。

问题预览以及我希望按钮对齐的位置

现在这是我使用 KendoTreeViewNodeTemplate 在 TreeView 中的代码

<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 一起使用，但它不起作用。

非常感谢任何帮助。

谢谢！

Answer 1

您可以尝试以下 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;
}

Stackblitz 演示