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

Question

在具有跨越多列的字段的linkki 中創建多列布局的最佳方法是什么？

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

1. CustomLayoutSection - 對於這樣一個簡單（？）的情況，我想避免這種情況
2. SectionLayout.COLUMN，在Label1后面加一個空白的Label，用CSS讓Field1覆蓋它（怎么做？）
3. 也許添加某種 colSpan 方面？
4. 使用多個部分 - 我想避免這種情況

Answer 1

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

（1）代替的CustomLayout你可以創建一個標准vaadin組件和使用您的布局@Bind來設置linkki結合。

(2) 我不建議將@UISection與SectionLayout.COLUMN一起使用，因為在 CSS 中計算組件 Field1 的必要大小會非常棘手。 布局由多個<div> ，在 CSS 中，您對其他列的大小一無所知。

(3) 自定義方面無濟於事，因為它旨在更改組件的屬性而不是其父級中的布局。 將組件添加到其父級時需要指定 vaadin 中的 colspan。

(4) 當然，您可以使用兩個部分，第二個沒有部分標題，但這可能會導致第一個標簽列的大小不同。

在 linkki 的未來版本中，我們將提供一些額外的功能來使用注釋創建自定義布局。 然后，您可以編寫自己的布局注釋並為自己指定這樣的布局。 我們知道使用標准的@UISection布局只會獲得 80% 的布局。 但是通過這種方法，這 80% 變得盡可能簡單，剩下的 20% 仍然可以使用自定義布局輕松完成。

Answer 2

Linkki 現在允許更容易地聲明嵌套組件，即@cornz 提到的功能使用這個，具有所需布局的嵌套組件應該相當容易，也許是@UIHorizo​​ntalLayout 注釋部分