xyLayout

Flexbox like layout + UI components for A-Frame.

• English documentation

Examples

Live demos:

• Flexbox like Layout
• UI Components (マルチバイト文字列対応)
• Virtual keyboard (日本語入力対応)

Usage

Use xylayout-all.min.js (35kB)

AFrameのあとにxylayout-all.min.jsを読み込んでください．

ES2015 をサポートしたブラウザが必要です．(最新版の Chrome, Firefox, Edge で動作します)

<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
<script src="https://binzume.github.io/aframe-xylayout/dist/xylayout-all.min.js"></script>
...
<a-xycontainer direction="column" spacing="0.1" padding="0.2">
    <a-xylabel value="ABC123漢字" width="2" height="0.5"></a-xylabel>
    <a-xybutton label="Button"></a-xybutton>
    <a-xyselect values="abc,123,Foo,Bar" select="1"></a-xyselect>
    <a-xytoggle value="true"></a-xytoggle>
    <a-xyrange width="4" height="0.5" value="20"></a-xyrange>
    <a-xycontainer direction="row" spacing="0.2">
        <a-box color="blue"></a-box>
        <a-box color="red"></a-box>
        <a-box color="green"></a-box>
    </a-xycontainer>
</a-xycontainer>

Building xylayout-all.min.js

npm install
npm run dist

Primitives

• それぞれ同名のコンポーネント + xyrectコンポーネントが使われます．
• デフォルトのUIのサイズは巨大なのでscaleで調整してください．
• See examples

Components

xycontainer

3Dオブジェクトを平面上に配置するコンテナ． CSS Flexbox と同様のレイアウトができますが挙動は少し異なります．

Attributes:

xyitem

親のxycontainerで指定された値を要素ごとに上書くためのコンポーネント． 親要素がxycontainerではない場合は追加しても何も起きません．

Attributes:

xyrect

xycontainerは要素のwidth,height属性を見ますが，width,heightからサイズがわからないもの(a-sphereなど)や， 原点が中心ではないオブジェクトに対してサイズを明示するためのコンポーネント．

Attributes:

pivotは，左下が(0,0)です．a-frame のほとんどの要素は中心 (0.5, 0.5) が原点です．

Events:

xywindow

Attributes:

xylabel

textコンポーネントのWrappper． マルチバイト文字が含まれる場合はCanvasでのレンダリングにフォールバックします．

Attributes:

上記以外のパラメータはtextコンポーネントを参照．

xybutton

Attributes:

Events:

xytoggle

Attributes:

※ このコンポーネントはDOM要素にも value 属性を追加します

Events:

xyrange

Attributes:

※ このコンポーネントはDOM要素にも value 属性を追加します

Events:

xyselect

Attributes:

Events:

xylist

リスト．RecyclerView です．xyscrollの子要素で使う前提の実装です． 表示の際にはxylist.setAdapter(), xylist.setContents() を呼ぶ必要があります．

Attributes:

Events:

Method:

使い方はサンプルを参照してください．

• setAdapter({create, bind}): ビューの生成処理を設定します
• setContents(data, optional_count): リストの内容を設定します
• setLayout({size, targets, layout}): レイアウトを設定します

xyclipping

表示をクリッピングするためのコンポーネント．xyscrollで使用．

子要素のサイズが親要素をはみ出す場合にレンダリング時にクリッピングされます．

Attributes:

THREE.js標準のシェーダを使っている場合のみ正しく動きます．例えばa-textはシェーダが専用のものなので正しくクリッピングされません．

xyscroll

スクロールを管理するコンポーネント． 子要素の高さがはみ出す場合にスクロールバーによるスクロールができるようにします．

Attributes:

Events:

• xyscroll直下に複数の要素がある場合，最初の一つがスクロール対象になります．
• このコンポーネントだけは，要素の中心ではなく左下を原点として扱います．
• スクロールバーは縦方向のみ表示します．

xyinput

テキスト入力ボックス．

Attributes:

※ このコンポーネントはDOM要素にも value 属性を追加します

xykeyboard

キーボード．フォーカスを持った要素にKeyboardEventを送信します．日本語入力可．

Attributes:

License

MIT License