在linkki中创建一个跨多列的字段的多列布局的最佳方法是什么?

| Label1 : Field1(quite long)       |
| Label2 : Field2 | Label3 : Field3 |



CustomLayoutSection-对于这种简单的(?)情况,我想避免这种情况
SectionLayout.COLUMN,在Label1之后添加一个空白Label,使用CSS使Field1覆盖它(如何?)
也许添加某种colSpan-aspect?
使用多个部分-我想避免这种情况

最佳答案

目前,@ UISection只有非常基本的布局可能性。

(1)
可以使用标准的vaadin组件代替CustomLayout来创建布局,并使用@Bind来设置linkki绑定。

(2)
我不建议将@UISectionSectionLayout.COLUMN一起使用,因为在CSS中计算组件Field1的必要大小非常棘手。布局由多个<div>组成,在CSS中,您对其他列的大小一无所知。

(3)
自定义apect将无济于事,因为它旨在更改组件的属性,而不是更改其父项中的布局。在将组件添加到其父项时,需要指定vaadin中的colspan。

(4)
当然,您可以使用两个节,第二个节不带节标题,但这可能导致第一个标签列的大小不同。

在未来版本的linkki中,我们将提供一些附加功能,以使用注释创建自定义布局。然后,您可以编写自己的布局注释,并为自己指定这样的布局。我们知道,使用标准@UISection布局,您将仅获得布局的80%。但是,通过这种方法,这80%变得尽可能容易,而其余20%仍可以使用自定义布局轻松完成。

10-02 12:11