代码之家 › 专栏 › 技术社区 › rifx

在kendoTreeViewNodeTemplate(Angular)中设置数据项的样式

kendo-treeview kendo-ui flexbox angular css

1

rifx · 技术社区 · 1 年前

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

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

Preview of the problem and where I would like to have the buttons aligned

现在,这是我在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一起工作,但它不起作用。

非常感谢任何帮助。

谢谢!

1 回复 | 直到 1 年前

1

0

Naren Murali 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;
}

在kendoTreeViewNodeTemplate(Angular)中设置数据项的样式

Stackblitz Demo