メインコンテンツまでスキップ

<pc-layout-child>

<pc-layout-child>タグは、親の <pc-layout-group> によって要素がどのようにサイズ調整されるかを制御するレイアウトの子コンポーネントを定義するために使用されます。

使用法
  • <pc-element> も持つ <pc-entity> の直接の子である必要があります。
  • そのエンティティ自体は、<pc-layout-group> を持つエンティティの子である必要があります。

属性​

属性タイプデフォルト説明
enabledBoolean"true"コンポーネントの有効状態
exclude-from-layoutBoolean"false"この要素をレイアウトから除外し、スペースを取らないようにします
fit-height-proportionNumber"0"height-fitting が stretch または shrink のとき、この要素が取るグループの余剰高さの割合
fit-width-proportionNumber"0"width-fitting が stretch または shrink のとき、この要素が取るグループの余剰幅の割合
max-heightNumber-要素がレイアウトされる最大の高さ（制限しない場合は省略）
max-widthNumber-要素がレイアウトされる最大の幅（制限しない場合は省略）
min-heightNumber"0"要素がレイアウトされる最小の高さ
min-widthNumber"0"要素がレイアウトされる最小の幅

例​

width-fitting="stretch" を設定した水平グループ内の3つのアイテムです。中央のアイテムの fit-width-proportion="1" により、グループの余剰幅は中央だけが吸収します。最初のアイテムにも 1 を与えて分け合わせたり、中央に max-width を設定したりしてみましょう:

ライブサンプル
<pc-app>
    <pc-scene>
        <pc-entity name="camera">
            <pc-camera clear-color="#1d1f2b"></pc-camera>
        </pc-entity>
        <pc-entity name="ui">
            <pc-screen screen-space="true" scale-mode="blend" reference-resolution="640 320"></pc-screen>
            <pc-entity name="toolbar">
                <pc-element type="group" anchor="0.5 0.5 0.5 0.5" pivot="0.5 0.5" width="480" height="70"></pc-element>
                <pc-layout-group orientation="horizontal" alignment="0 0.5" spacing="8 0"
                                 padding="10 10 10 10" width-fitting="stretch"></pc-layout-group>

                <pc-entity name="item-1">
                    <pc-element type="image" width="80" height="50" color="#7ab8ff"></pc-element>
                    <pc-layout-child></pc-layout-child>
                </pc-entity>
                <pc-entity name="item-2">
                    <pc-element type="image" width="80" height="50" color="#ff8a3c"></pc-element>
                    <pc-layout-child fit-width-proportion="1"></pc-layout-child>
                </pc-entity>
                <pc-entity name="item-3">
                    <pc-element type="image" width="80" height="50" color="#7ab8ff"></pc-element>
                    <pc-layout-child></pc-layout-child>
                </pc-entity>
            </pc-entity>
        </pc-entity>
    </pc-scene>
</pc-app>

JavaScriptインターフェース​

LayoutChildComponentElement APIを使用して、<pc-layout-child>要素をプログラムで作成および操作できます。