vaadin - 如何在紧凑的 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。使用较小的按钮会有所帮助，但带有按钮的列的填充仍然过多。我不确定如何使用编辑/保存按钮对列进行调整。

Answer 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;
}