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

<pc-layout-group>

<pc-layout-group>タグは、子の要素エンティティを行または列に自動的に配置するレイアウトグループコンポーネントを定義するために使用されます。

使用法
  • <pc-element> も持つ <pc-entity> の直接の子である必要があります。
  • 子エンティティは自動的に配置されます。グループ内での子のサイズ調整方法を制御するには、子に <pc-layout-child> を追加します。

属性​

属性タイプデフォルト説明
alignmentVector2"0 1"子要素の水平・垂直方向の整列（各成分0〜1）
enabledBoolean"true"コンポーネントの有効状態
height-fittingEnum"none"垂直軸方向のフィッティング: "none" | "stretch" | "shrink" | "both"
orientationEnum"horizontal"レイアウトの向き: "horizontal" | "vertical"
paddingVector4"0 0 0 0"グループ周囲のパディングを left bottom right top で指定
reverse-xBoolean"false"水平軸に沿って子の順序を反転します
reverse-yBoolean"false"垂直軸に沿って子の順序を反転します
spacingVector2"0 0"子同士の間隔を x y で指定
width-fittingEnum"none"水平軸方向のフィッティング: "none" | "stretch" | "shrink" | "both"
wrapBoolean"false"子がグループからあふれたときに、新しい行または列に折り返すかどうか

例​

行を自動的に配置する縦のリストです。orientation="horizontal" にしたり、spacing を大きくしたり、reverse-y を付けたり — 行を追加して自動的に収まる様子を見たりしてみましょう:

ライブサンプル
<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="list">
                <pc-element type="group" anchor="0.5 0.5 0.5 0.5" pivot="0.5 0.5" width="260" height="220"></pc-element>
                <pc-layout-group orientation="vertical" alignment="0 1" spacing="0 8"
                                 padding="10 10 10 10" width-fitting="stretch"></pc-layout-group>

                <pc-entity name="row-1">
                    <pc-element type="image" width="240" height="50" color="#ff8a3c"></pc-element>
                </pc-entity>
                <pc-entity name="row-2">
                    <pc-element type="image" width="240" height="50" color="#7ab8ff"></pc-element>
                </pc-entity>
                <pc-entity name="row-3">
                    <pc-element type="image" width="240" height="50" color="#8ce99a"></pc-element>
                </pc-entity>
            </pc-entity>
        </pc-entity>
    </pc-scene>
</pc-app>

JavaScriptインターフェース​

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

UI Layoutのサンプルでは、ワールド空間のスクリーン上にレイアウトグループを入れ子にして構築しています。