如何使用 Vaadin Declarative UI 进行组件对齐？

Question

'component-alignment' 被承认，但不被尊重。请注意“:”前缀，因为此属性必须在父组件上设置。

<v-panel size-full>
   <v-vertical-layout size-full>
      <v-horizontal-layout width="100%">
         <v-image source="theme://logo.gif" :component-alignment="MIDDLE_RIGHT" />
    <v-menu-bar _id="menu" width="100%" :component-alignment="BOTTOM_RIGHT" />
      </v-horizontal-layout>
   </v-vertical-layout>
</v-panel>

Answer 1

根据 Vaadin book:

Certain settings, such as a component's alignment in a layout, are not done in the component itself, but in the layout. Attributes prefixed with colon (:) are passed to the containing component, with the component as a target parameter. For example, :expand="1" given for a component c is equivalent to calling setExpandRatio(c, 1) for the containing layout.

<v-vertical-layout size-full>
  <!-- Align right in the containing layout -->
  <v-label width-auto :right>Hello!</v-label>
  ...

它没有说明的是，至少现在，为了获得 MIDDLE_RIGHT 对齐，您需要分别指定它们，例如：

<v-button _id="loginButton" style-name="primary" :middle :right>Sign in</v-button>

如何使用 Vaadin Declarative UI 进行组件对齐？

How to do component alignment with Vaadin Declarative UI?

user-interface

vaadin