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

【问题标题】：How to add a button in a compact Vaadin 14 / Flow Grid如何在紧凑的 Vaadin 14 / Flow Grid 中添加按钮
【发布时间】：2021-08-19 23:35:55
【问题描述】：

使用 Vaadin 14 / Flow Grid 的内联 java 编辑示例：https://vaadin.com/docs/latest/ds/components/grid/#inline-editing-java-only（忽略保存和取消部分）如何为紧凑网格添加编辑按钮。所有其他单元格的高度似乎为 30 像素，但 addComponentColumn() 的高度似乎为 46 像素。有一个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。使用较小的按钮会有所帮助，但使用按钮的列的填充仍然太多。我不确定如何使用编辑/保存按钮来调整列。

【问题讨论】：

标签： vaadin vaadin-flow vaadin-grid vaadin14

【解决方案1】：

您可以查看此示例以在网格单元格中呈现几乎没有填充的样式：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;
}

【讨论】：

有没有办法只编辑特定行而不是整个网格的填充？这对于编辑按钮列而不是整个表格来说是理想的。
我已经用一列的示例编辑了我的答案。
谢谢，帮了大忙。

【解决方案2】：

您可以调整Button 的高度以达到您想要的高度。举个例子：

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

【讨论】：

不幸的是，问题不是按钮高度，而是 30 像素。它是围绕它的包装，具有额外高度的 vaadin-grid-cell-content。我相信这是由于 vaadin-grid-cell-content 上的填充，但我不确定如何仅为编辑/保存按钮列删除它。它有 4px 和 16px 的内边距。

【解决方案3】：

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

【讨论】：