Example script layouts


You can create complex page layouts by mixing or nesting horizontal and vertical containers. For example, if you add three horizontal stacks to the default vertical stack, then each horizontal stack is a row that can contain some combination of components:

図は、3 つのホリゾンタル スタックを使って、入力フィールドの行をレイアウトする方法を示しています


Example 1: Create a layout that places fields in rows

  1. Place a row of items in a parent horizontal stack, which is itself inside the root vertical stack container.

    example2_nested_horizontal_stacks2

  2. Select the horizontal stack, and copy it to the clipboard.

  3. Select the root container by clicking its icon.

  4. Click Paste to create an additional row. Repeat the previous steps to add additional rows as needed.

    図は、バーティカル スタックの中の 3 行のコンポーネントを示しています


Example 2: Position labels above components

To position labels above components, add vertical stacks to a horizontal stack container:

example3_nested_vertical_stacks2

多くの組み合わせが可能です。ベストプラクティスとして、コンポーネントを追加する前に、親コンテナーを選択してください。