Help us understand the problem. What is going on with this article?

XULの画面にFlowLayoutPanelを表示する

はじめに

Mozilla Thunderbird(サンダーバード) のアドオン画面は Version 68 現在も XUL で記載しますが、.NET Framework でいう FlowLayoutPanel(-- dobon.net さんのページ)のような、子要素を折り返し表示可能に並べるコンテナを表示するコードを共有します。子要素には、ラベル (label) のほか画像 (image) なども、さらに複数種類の要素を混在させても使用できます。

image.png

image.png

image.png

コード

その1 : box style="display:block;"

Box要素は、子要素を縦(垂直)または横(水平)方向に並べて、必要に応じて折り返して表示可能です。

sample.xul
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>

<dialog id="sample"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    title="サンプル"
>

<box style="display:block;">
    <label value="とんかつソース" />
    <label value="サラミ" />
    <label value="チーズ" />
    <label value="とんかつソース" />
    <label value="やさいサラダ" />
    <label value="テリヤキバーガー" />
    <label value="めんたい" />
    <label value="たこ焼" />
    <label value="コーンポタージュ" />
    <label value="なっとう" />
    <label value="チョコレート" />
</box>

</dialog>

その2 : description

Description要素も、子要素を横(水平)方向に並べて、必要に応じて折り返して表示可能です。

sample.xul
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>

<dialog id="sample"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    title="サンプル"
>

<description>
    <label value="とんかつソース" />
    <label value="サラミ" />
    <label value="チーズ" />
    <label value="とんかつソース" />
    <label value="やさいサラダ" />
    <label value="テリヤキバーガー" />
    <label value="めんたい" />
    <label value="たこ焼" />
    <label value="コーンポタージュ" />
    <label value="なっとう" />
    <label value="チョコレート" />
</description>

</dialog>

ご参考

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした