Horizontal stack container script component


A horizontal stack container is a parent container that arranges child components horizontally. To arrange components vertically, use a vertical stack container.

  1. コンポーネント ツールバー上のホリゾンタル スタック コンテナーのアイコンをクリックします。

    図は、ホリゾンタル スタック コンテナーにフォーカスがあると、方向インジケーターが表示されることを示していますWhen a horizontal stack container is selected, a horizontal directional indicator is shown. The arrows indicate that new components added to the control will be placed next to one another.

    ホリゾンタル スタックでは、新規コンポーネントは選択された最後の項目の右に配置されます。

  2. ツールバーからコンポーネントを追加すると、コンテナー内に左右に配置されます。例えば、ボタンを 2 つ追加すると、2 番目のボタンは 1 番目の右に置かれます。

    図は、左右に配置された 2 つのコンポーネントを示しています

  3. オプションで、このコンポーネントのプロパティを設定します。

    一般



    幅は、固定サイズに設定したり、表示内容の必要性に応じて拡大することができます。またはサイズ調整に影響を与える加重を使って、他のコンポーネントに比べてできる限り多くのスペースを使用することができます。

    設定 説明
    settings-sizing-auto-size 自動サイズ変更により、コンポーネントの内容に従って、そのサイズを縮小または拡大できます。例えば、ラベルの幅はテキストの量に応じて拡大することができます。
    settings-sizing-stretch

    ストレッチでは、サイズ調整に影響を与える加重を使い、他のコンポーネントと比べてできる限り多くのスペースを 1 つのコンポーネントに使用できます。

    2 つのコンポーネントがストレッチに設定されていると、デフォルトでどちらのコンポーネントにも残りのスペースの 50% が割り当てられます。この比率は加重値を変更して調整できます。

    For example, if you set one component to a weight of 200, and the other to a weight of 100, then the first component occupies two thirds of the remaining space, while the other only takes one third. The first component appears twice the size of the other component, since its weight was two times the second component's weight.

    settings-sizing-pixels ピクセルで固定サイズを設定します。ボックスに整数を入力するか、上向き矢印か下向き矢印を使ってサイズを増加または減少します。コンポーネントにフォーカスがあると、これらの矢印が表示されます。



    高さは、固定サイズに設定したり、表示内容の必要性に応じて高くすることができます。またはサイズ調整に影響を与える加重を使って、他のコンポーネントに比べてできる限り多くのスペースを使用することができます。

    設定 説明
    settings-sizing-auto-size 自動サイズ変更により、コンポーネントの内容に従って、そのサイズを縮小または拡大できます。
    settings-sizing-pixels ピクセルで固定サイズを設定します。ボックスに整数を入力するか、上向き矢印か下向き矢印を使ってサイズを増加または減少します。コンポーネントにフォーカスがあると、これらの矢印が表示されます。
    settings-sizing-stretch

    ストレッチでは、サイズ調整に影響を与える加重を使い、他のコンポーネントと比べてできる限り多くのスペースを 1 つのコンポーネントに使用できます。

    2 つのコンポーネントがストレッチに設定されていると、デフォルトでどちらのコンポーネントにも残りのスペースの 50% が割り当てられます。この比率は加重値を変更して調整できます。

    For example, if you set one component to a weight of 200, and the other to a weight of 100, then the first component occupies two thirds of the remaining space, while the other only takes one third. The first component appears twice the size of the other component, since its weight was two times the second component's weight.




    スペースは内側の罫線と内容の間のスペースを定義します。「余白」は罫線の外側の空間を設定し、「スペース」は罫線の内側に空間を追加します。

    padding_vs_margin

    1. オプションで、すべてのスペースの値を一度に更新するには、プロパティ パネルで [スペース] の [すべて設定] ボタンを押します。

      すべて設定ボタンの画像

    2. 罫線項目の値フィールドをクリックします。そのフィールドにスピン コントロールが表示されます。

    3. スピン コントロールを使って、罫線の幅を増加または減少します。[すべて設定] が選択されていると、変更はすべての値に適用されます。

      図は、罫線設定の値を変更する方法を示しています

      コンポーネントは新しいスペース設定に応じて即座に再配置されます。




    背景色を以下のいずれかに設定します。

    settings-bg-color-popup2
    • デフォルト — デフォルトのカラーを割り当てます。

    • カラー — 一般色のパレットからカラーを選択するか、RGB 値を入力して独自のカラーを選択するか、カラー ピッカーをスペクトルの新しい位置に移動して独自のカラーを選択できます。[選択] をクリックし、現在の選択内容を割り当てます。

      settings-text-color-popup-colors

    • 変数 — 文字列変数に含むカラーを割り当てます。例えば、濃青色を割り当てるには、以下の手順を実行します。

      1. [変数] タブをクリックします。

      2. [+] をクリックして変数を追加します。

        図は、新しい変数を追加するボタンを示しています

      3. Select String as the type of value the new variable stores.

      4. [名前] ボックスに記述的な名前を入力します。

      5. Set Default Value to 0000FF or #0000FF—which is the hexadecimal code for dark blue.

        select-color-in-variable

      6. 適用]をクリックします。
      7. このカラー プロパティに変数を割り当てます。

        mycolor-variable

    スクリプト ページの背景色を変更する方法

    ページ全体の背景色を設定するには、背景色をルート バーティカル コンテナーに割り当てます。

    1. In the breadcrumbs bar, click the root container icon.

      select-root-container

    2. [一般] または [表示] の下で、別の背景色を割り当てます。

      You can create interesting effects by assigning different background colors to other containers.

      additional-colored-containers




    罫線により、スペースと余白の間の空間が定義されます。「余白」は罫線の外側の空間を設定し、「スペース」は罫線とコンポーネントの間に空間を追加します。

    画像は、余白、境界線、およびスペース設定の関係を示しています

    1. オプションで、すべての罫線の値を一度に更新するには、プロパティ パネルで [罫線] の [すべて設定] ボタンを押します。

      すべて設定ボタンの画像

    2. 罫線項目の値フィールドをクリックします。そのフィールドにスピン コントロールが表示されます。

    3. スピン コントロールを使って、罫線の幅を増加または減少します。[すべて設定] が選択されていると、変更はスペースのすべての値に適用されます。

      図は、罫線設定の値を変更する方法を示しています

      コンポーネントは新しい罫線設定に応じて即座に再配置されます。



    レイアウト

    幅は、固定サイズに設定したり、表示内容の必要性に応じて拡大することができます。またはサイズ調整に影響を与える加重を使って、他のコンポーネントに比べてできる限り多くのスペースを使用することができます。

    設定 説明
    settings-sizing-auto-size 自動サイズ変更により、コンポーネントの内容に従って、そのサイズを縮小または拡大できます。例えば、ラベルの幅はテキストの量に応じて拡大することができます。
    settings-sizing-stretch

    ストレッチでは、サイズ調整に影響を与える加重を使い、他のコンポーネントと比べてできる限り多くのスペースを 1 つのコンポーネントに使用できます。

    2 つのコンポーネントがストレッチに設定されていると、デフォルトでどちらのコンポーネントにも残りのスペースの 50% が割り当てられます。この比率は加重値を変更して調整できます。

    For example, if you set one component to a weight of 200, and the other to a weight of 100, then the first component occupies two thirds of the remaining space, while the other only takes one third. The first component appears twice the size of the other component, since its weight was two times the second component's weight.

    settings-sizing-pixels ピクセルで固定サイズを設定します。ボックスに整数を入力するか、上向き矢印か下向き矢印を使ってサイズを増加または減少します。コンポーネントにフォーカスがあると、これらの矢印が表示されます。

    高さは、固定サイズに設定したり、表示内容の必要性に応じて高くすることができます。またはサイズ調整に影響を与える加重を使って、他のコンポーネントに比べてできる限り多くのスペースを使用することができます。

    設定 説明
    settings-sizing-auto-size 自動サイズ変更により、コンポーネントの内容に従って、そのサイズを縮小または拡大できます。
    settings-sizing-pixels ピクセルで固定サイズを設定します。ボックスに整数を入力するか、上向き矢印か下向き矢印を使ってサイズを増加または減少します。コンポーネントにフォーカスがあると、これらの矢印が表示されます。
    settings-sizing-stretch

    ストレッチでは、サイズ調整に影響を与える加重を使い、他のコンポーネントと比べてできる限り多くのスペースを 1 つのコンポーネントに使用できます。

    2 つのコンポーネントがストレッチに設定されていると、デフォルトでどちらのコンポーネントにも残りのスペースの 50% が割り当てられます。この比率は加重値を変更して調整できます。

    For example, if you set one component to a weight of 200, and the other to a weight of 100, then the first component occupies two thirds of the remaining space, while the other only takes one third. The first component appears twice the size of the other component, since its weight was two times the second component's weight.

    コンポーネントは、親コンテナーを基準にして、左揃え、右揃え、中央揃えにできます。

    ヒント: 親コンテナーの高さ設定が [自動サイズ変更] に設定されている場合、コンポーネントは垂直方向を基準にして中央揃えにすることはできません。これを修正するには、親コンテナーの高さを [ストレッチ] にするか、ピクセルで固定の高さに設定します。 
    設定
    align-left2 align-left-example2
    align-center2 align-center-example2
    align-right2 align-right-example2
    align-start align-start-example
    align-vertical-center align-vertical-center-example
    align-vertical-end align-vertical-end-example

    子の配置により、コンテナーに余分なスペースがある場合、コンテナーの要素の配置が決まります。

    コンテナーの幅と高さが自動的に変更されるようになっていると、この設定は無効になります。自動サイズ変更は、コンテナーに含まれる要素のサイズにあわせて拡大するようコンテナーに指示します。この場合余分な空間は生じないため、子の配置プロパティには意味がなく、無効になります。子の配置を有効にするには、コンテナーの幅をピクセルで設定するか、ストレッチに設定します。

    コンテナーに余分な空間がある場合は、以下のいずれかを選択し、空間の配分を決めることができます。

    • 開始 — コンポーネントはコンテナーの開始点から配置されます。

      child_arrangement_start

    • 中央 — コンポーネントはコンテナーの中央から配置されます。

      child_arrangement_center

    • 終了 — コンポーネントはコンテナーの最後に配置されます。

      child_arrangement_end

    境界線の周りの上下左右のスペースに設定されている余白。

    画像は、余白、境界線、およびスペース設定の関係を示しています

    1. To optionally update all margin values at once, press the Set All button for Margin in the properties panel.

      すべて設定ボタンの画像

    2. 余白の値フィールドをクリックします。そのフィールドにスピン コントロールが表示されます。

    3. Use the spin control to increase or decrease the margin. If Set All was selected, the change is applied to all margins.

      settings-margin-spinner

      コンポーネントは新しい余白設定に応じて即座に再配置されます。

    ブール型 (True または False) 変数の値に基づいて、コンポーネントを表示または非表示にします。

    1. [レイアウト] プロパティ グループをクリックします。[表示可能] の下にある [変数を選択] をクリックします。
    2. Select a variable, or optionally create a new Yes/No variable and then assign that new variable to the Visible property.
    3. At runtime, the component is visible when the value of the variable is True. Conversely it is hidden when the variable's value is False.

    スペースは内側の罫線と内容の間のスペースを定義します。「余白」は罫線の外側の空間を設定し、「スペース」は罫線の内側に空間を追加します。

    padding_vs_margin

    1. オプションで、すべてのスペースの値を一度に更新するには、プロパティ パネルで [スペース] の [すべて設定] ボタンを押します。

      すべて設定ボタンの画像

    2. 罫線項目の値フィールドをクリックします。そのフィールドにスピン コントロールが表示されます。

    3. スピン コントロールを使って、罫線の幅を増加または減少します。[すべて設定] が選択されていると、変更はすべての値に適用されます。

      図は、罫線設定の値を変更する方法を示しています

      コンポーネントは新しいスペース設定に応じて即座に再配置されます。

    表示

    背景色を以下のいずれかに設定します。

    settings-bg-color-popup2
    • デフォルト — デフォルトのカラーを割り当てます。

    • カラー — 一般色のパレットからカラーを選択するか、RGB 値を入力して独自のカラーを選択するか、カラー ピッカーをスペクトルの新しい位置に移動して独自のカラーを選択できます。[選択] をクリックし、現在の選択内容を割り当てます。

      settings-text-color-popup-colors

    • 変数 — 文字列変数に含むカラーを割り当てます。例えば、濃青色を割り当てるには、以下の手順を実行します。

      1. [変数] タブをクリックします。

      2. [+] をクリックして変数を追加します。

        図は、新しい変数を追加するボタンを示しています

      3. Select String as the type of value the new variable stores.

      4. [名前] ボックスに記述的な名前を入力します。

      5. Set Default Value to 0000FF or #0000FF—which is the hexadecimal code for dark blue.

        select-color-in-variable

      6. 適用]をクリックします。
      7. このカラー プロパティに変数を割り当てます。

        mycolor-variable

    スクリプト ページの背景色を変更する方法

    ページ全体の背景色を設定するには、背景色をルート バーティカル コンテナーに割り当てます。

    1. In the breadcrumbs bar, click the root container icon.

      select-root-container

    2. [一般] または [表示] の下で、別の背景色を割り当てます。

      You can create interesting effects by assigning different background colors to other containers.

      additional-colored-containers

    罫線により、スペースと余白の間の空間が定義されます。「余白」は罫線の外側の空間を設定し、「スペース」は罫線とコンポーネントの間に空間を追加します。

    画像は、余白、境界線、およびスペース設定の関係を示しています

    1. オプションで、すべての罫線の値を一度に更新するには、プロパティ パネルで [罫線] の [すべて設定] ボタンを押します。

      すべて設定ボタンの画像

    2. 罫線項目の値フィールドをクリックします。そのフィールドにスピン コントロールが表示されます。

    3. スピン コントロールを使って、罫線の幅を増加または減少します。[すべて設定] が選択されていると、変更はスペースのすべての値に適用されます。

      図は、罫線設定の値を変更する方法を示しています

      コンポーネントは新しい罫線設定に応じて即座に再配置されます。