如何在紧凑的 Vaadin 14 / Flow Grid 中添加按钮

Question

使用 Vaadin 14 / Flow Grid 的内联 java 编辑示例位于：https://vaadin.com/docs/latest/ds/components/grid/#inline-editing-java-only（忽略保存和取消部分）如何为紧凑网格添加编辑按钮。所有其他单元格的高度似乎为 30px，但 addComponentColumn() 的高度似乎为 46px。有 setWidth() 方法但没有 setHeight()。我的代码是：

Column<T> editColumn = addComponentColumn(t -> {
   Button editButton = new Button("Edit");
   editButton.addThemeVariants(ButtonVariant.LUMO_SMALL);
   editButton.addClickListener(click -> {
       if(getEditor().isOpen())
           getEditor().cancel();
       getEditor().editItem(t);
   });
   return editButton;
})

例如，要更改宽度，我可以执行 editColumn.setWidth("150px")，但我似乎无法调整高度，因此如果我使用 grid.addThemeVariants(GridVariant.LUMO_COMPACT)，它将以紧凑的方式呈现行。无论我做什么，行似乎都以正常高度呈现。

更新 - 只是添加它似乎是具有额外填充的 vaadin-grid-cell-content。使用较小的按钮会有所帮助，但带有按钮的列的填充仍然过多。我不确定如何使用 edit/save 按钮调整列。

Answer 1

您可以调整 Button 的高度以获得您想要的高度。例如：

editButton.getStyle()
        .set("margin", "0")
        .set("--lumo-button-size", "20px")
        .set("--lumo-font-size-s", "12px");

Answer 2

您可以查看此示例以在网格单元格中呈现几乎没有填充的样式：https://cookbook.vaadin.com/grid-dense-theme

要应用它，您需要添加 @CssImport(themeFor = "vaadin-grid", value = "recipe/densegrid/densegrid.css")

并使用这个 css:

:host([theme~="dense"]) [part~="cell"] {
    min-height: var(--lumo-size-xxs);
}
:host([theme~="dense"])  {
    font-size: var(--lumo-font-size-xs); // use the font size you prefer
}
:host([theme~="dense"]) [part~="cell"] ::slotted(vaadin-grid-cell-content) {
    padding: 1px var(--lumo-space-s);
}
:host([theme~="dense"]:not([theme~="no-row-borders"])) [part="row"][first] [part~="cell"]:not([part~="details-cell"]) {
     border-top: 0;
     min-height: calc(var(--lumo-size-xxs) - var(--_lumo-grid-border-width));
 }

默认情况下，Vaadin Grid 即使在紧凑模式下也会在单元格中填充一些内容。

如果您想删除一个单元格的填充，您可以在列上添加一个类名生成器：

grid.addComponentColumn(t -> new Button(t)).setClassNameGenerator(e -> "no-padding-cell");

并删除填充 css:

[part~="cell"].no-padding-cell ::slotted(vaadin-grid-cell-content) {
    padding: 0px;
}

Answer 3

将 tertiary-inline 主题变体应用于按钮会删除其所有垂直填充，因此这可能会有所帮助。

如何在紧凑的 Vaadin 14 / Flow Grid 中添加按钮

How to add a button in a compact Vaadin 14 / Flow Grid

vaadin

vaadin-grid

vaadin-flow

vaadin14