如何跨多列linkki部分中的多个列

Question

在linkki中使用跨越多列的字段创建多列布局的最佳方法是什么？

{
        path: 'label/:id/view',
        component: LabelDetailComponent,
        resolve: {
            label: LabelResolve
        }
    }

1. CustomLayoutSection - 我想避免这种简单的（？）情况
2. SectionLayout.COLUMN，在Label1之后添加一个空白标签，使用CSS使Field1覆盖它（如何？）
3. 或许可以添加一些colSpan方面？
4. 使用多个部分 - 我希望避免这种情况

Answer 1

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

（1） 您可以使用标准的vaadin组件创建布局，而不是CustomLayout，而是使用@Bind来设置linkki绑定。

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

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

（4） 当然，您可以使用两个部分，第二部分没有部分标题，但这可能会导致第一个标签列的大小不同。

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

Answer 2

Linkki现在可以更轻松地声明nested components，即@cornz提到的功能使用此功能，具有所需布局的嵌套组件应该相当容易，也许是@UIHorizo​​ntalLayout注释的部分