Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@otagaisama-1

XULの画面にFlowLayoutPanelを表示する

More than 1 year has passed since last update.

はじめに

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>

ご参考

0
Help us understand the problem. What is going on with this article?
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
otagaisama-1
自社の開発・運用で、皆様からの情報にとてもお世話になっています。ほぼ1人情SYSの身で、他のネット情報には少ないレアめなシステムを自社で使っている点でも、今めいたシステム情報入手面でも、Qiita のみなさまはとても貴重です。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
0
Help us understand the problem. What is going on with this article?