XUL Tutorial:Stack Positioning

出典: MDC

このセクションでは、スタック内への要素の配置方法について説明します。

[編集] スタックの子要素の配置

スタック (stack) の子要素は、スタックのサイズに応じて伸縮する動作がデフォルトですが、 指定の座標に明示的に配置することも可能です。 例えば、スタックの子要素として 2 つのボタンがある場合、 1 番目のボタンを、左端から 20 ピクセル、上端から 50 ピクセルの位置に置き、 2 番目を、左端から 100 ピクセル、上端から 5 ピクセルの位置に置くといった具合です。

子要素の位置は、要素に 2 つの属性を設定することによって指示します。 水平方向の位置には left 属性を、垂直方向の位置には top 属性を使用します。 スタックの子要素にこれらの属性を指定しない場合、子要素はスタックのサイズに応じて伸縮します。

例 1 : ソース 表示

<stack>
  <button label="Goblins" left="5" top="5"/>
  <button label="Trolls" left="60" top="20"/>
  <button label="Vampires" left="10" top="60"/>
</stack>

この stack には、3 つの要素があり、 それぞれは、left と top 属性によって与えられた座標に位置しています。 この例では、3 つの子要素はすべてボタンですが、同じ型である必要はありません。 子要素として任意の要素を置くことが可能です。 ボックスやスタックを、入れ子に置いても構いません。

stack のサイズは、常に全ての子要素が表示可能になるような大きさに調整されるため、子要素の位置によって決定されることになります。 具体的には、left 属性を 400 に設定すると、スタックは 400 ピクセルに要素の幅を加えた幅になります。 このサイズは、 width や max-width などの色々なスタイルプロパティによって上書きすることが可能です。

スクリプトを使用して、left と top 属性の値を変更していくことで、要素を動き回らせることが可能です。 スタックには、1 つの要素の絶対位置を変えても、他の要素の位置は影響を受けないという利点があります。 通常のボックスで要素を動かそうとすると、周囲にある要素の配置が乱れてしまうかもしれません。

子要素を重ね合わせるように置くことも可能です。 子要素は、stack 内に現われる順番で描画されていきます。 つまり、stack の最初の子要素が最背面に表示され、次の子要素がその手前に表示されるという具合です。 最後の要素が最前面に表示されます。 DOM 関数を使用することによって、要素の表示順を変更することが可能です。

マウスイベントに応答するとき、一番上にある要素が最初にイベントを捉えます。 つまり、2 つのボタンが重なっている場合、重なっている場所でのマウスクリックは、上にあるボタンの方が捉えるということになります。

次のセクションでは、タブボックスを説明します。 これはデッキに似ていますが、要素単体でナビゲーション機能を提供しています。