Layouts

レイアウトは、Stingray モジュール内でツールおよびコントロールを配置するためのコンテナとして使用されます。レイアウトはシンプルなレイアウトと、サイズ変更レイアウトの 2 種類に分かれています。これらの各レイアウトは、別のレイアウト内に配置することができます。

次の例では、stingray-border-dark クラスによってパネル間の区切りを明確に示す暗い境界が追加されていますが、これらの境界は必要に応じて無視することができます。

これらの例を使用するには、プラグイン内でコードをコピーして貼り付けて、パネルを除去または追加し、'Panel x' 要素をコンテンツで置き換えます。

これらの例を試してみるには、Stingray エディタ内に Mithril コンポーネントのサンプルプラグインをインストールします。

[TOC]

シンプルなレイアウト

コンテナ

直接コンテンツのコンテナとして使用されるシンプルなパネルです。コンテンツには任意のデータを指定できます。

m.layout.container({className: 'stingray-panel stingray-border-dark'}, [
    'Panel 1'
]);

横並びのレイアウト

それぞれ独自のコンテンツパネルを含む複数のパネルを横並びに表示する場合に使用します。

m.layout.horizontal({}, [
    m.layout.panelFill({className: 'stingray-panel stingray-border-dark'}, m.layout.container({}, [
        'Panel H1'
    ])),
    m.layout.panelFill({className: 'stingray-panel-mid stingray-border-dark'}, m.layout.container({}, [
        'Panel H2'
    ])),
    m.layout.panelFill({className: 'stingray-panel-dark stingray-border-dark'}, m.layout.container({}, [
        'Panel H3'
    ]))
]);`

縦積みのレイアウト

それぞれ独自のコンテンツパネルを含む複数のパネルを縦積みに表示する場合に使用します。

m.layout.vertical({}, [
    m.layout.panelFill({}, m.layout.container({className: 'stingray-panel stingray-border-dark'}, [
        'Panel V1'
    ])),
    m.layout.panelFill({}, m.layout.container({className: 'stingray-panel-mid stingray-border-dark'}, [
        'Panel V2'
    ])),
    m.layout.panelFill({}, m.layout.container({className: 'stingray-panel-dark stingray-border-dark'}, [
        'Panel V3'
    ]))
]);

サイズ変更レイアウト

サイズ変更レイアウトはシンプルなレイアウトと似ていますが、動的にサイズを変更する機能が備わっています。各パネルには、最小パネルサイズをコントロールする min-size アトリビュート(ピクセル単位)、および他のパネルに対する初期パネルサイズの比率をコントロールする ratio アトリビュートもあります。

次の例にある 3 つのパネルは ratio 値がそれぞれ 1 であるため、3 つのパネルが正確なサイズでレンダーされます。

横並びのサイズ変更レイアウト

それぞれ独自のコンテンツパネルを含む、個別にサイズ変更可能な複数のパネルを横並びに表示する場合に使用します。

m.resizer.container({direction: 'horizontal', redrawOnResize: false}, {className: 'fullscreen'}, [
    m.resizer.panel({'min-size': 50, ratio: 1}, [
        m.layout.container({className: 'stingray-panel stingray-border-dark'}, [
            'Panel H1'
        ])
    ]),
    m.resizer.panel({'min-size': 50, ratio: 1}, [
        m.layout.container({className: 'stingray-panel-mid stingray-border-dark'}, [
            'Panel H2'
        ])
    ]),
    m.resizer.panel({'min-size': 50, ratio: 1}, [
        m.layout.container({className: 'stingray-panel-dark stingray-border-dark'}, [
            'Panel H3'
        ])
    ])
]);

縦積みのサイズ変更レイアウト

それぞれ独自のコンテンツパネルを含む、個別にサイズ変更可能な複数のパネルを縦積みに表示する場合に使用します。

m.resizer.container({direction: 'vertical', redrawOnResize: false}, {className: 'fullscreen'}, [
    m.resizer.panel({'min-size': 50, ratio: 1}, [
        m.layout.container({className: 'stingray-panel stingray-border-dark'}, [
            'Panel V1'
        ])
    ]),
    m.resizer.panel({'min-size': 50, ratio: 1}, [
        m.layout.container({className: 'stingray-panel-mid stingray-border-dark'}, [
            'Panel V2'
        ])
    ]),
    m.resizer.panel({'min-size': 50, ratio: 1}, [
        m.layout.container({className: 'stingray-panel-dark stingray-border-dark'}, [
            'Panel V3'
        ])
    ])
])

サンプル

シンプルなレイアウトにツールバーを追加する場合の例を示します。リファレンスについては、「ツールバー」を参照してください。

m.layout.vertical({className: 'stingray-panel stingray-border-dark'}, [
    m('div.toolbar', [
        Button.component({
            title: 'Refresh',
            faIcon: 'fa-refresh',
            type: m.button.icon
        }),
        Button.component({
            title: 'Refresh',
            faIcon: 'fa-cloud-download',
            type: m.button.icon
        })
    ]),
    m.layout.container({className: 'stingray-panel-dark panel-fill'}, [
        'Panel 1'
    ])
]);

シンプルなレイアウトの組み合わせ

シンプルなレイアウトを簡単に組み合わせる場合の例を示します。これは、横並びのレイアウトの最後のパネル内に縦積みのレイアウトを配置する際の正確なコピーです。

m.layout.horizontal({}, [
    m.layout.panelFill({}, m.layout.container({className: 'stingray-panel stingray-border-dark'}, [
        'Panel H1'
    ])),
    m.layout.panelFill({}, m.layout.container({className: 'stingray-panel-mid stingray-border-dark'}, [
        'Panel H2'
    ])),
    m.layout.panelFill({}, m.layout.container({className: 'stingray-panel-dark'}, [

        /* Vertical Layout : This is an exact copy of the vertical layout */
            m.layout.vertical({}, [
                m.layout.panelFill({}, m.layout.container({className: 'stingray-panel stingray-border-dark'}, [
                    'Panel V1'
                ])),
                m.layout.panelFill({}, m.layout.container({className: 'stingray-panel-mid stingray-border-dark'}, [
                    'Panel V2'
                ])),
                m.layout.panelFill({}, m.layout.container({className: 'stingray-panel-dark stingray-border-dark'}, [
                    'Panel V3'
                ]))
            ]);
        /* Vertical Layout : End*/

    ]))
]);

サイズ変更レイアウトの組み合わせ

両方のタイプのサイズ変更レイアウトを簡単に組み合わせる場合の例を示します。これは、横並びのサイズ変更レイアウトの 2 番目のパネル内に縦積みのサイズ変更レイアウトを配置する際の正確なコピーです。

m.resizer.container({direction: 'horizontal', redrawOnResize: false}, {className: 'fullscreen'}, [
    m.resizer.panel({'min-size': 50, ratio: 1}, [
        m.layout.container({className: 'stingray-panel stingray-border-dark'}, [
            'Panel H1'
        ])
    ]),
    m.resizer.panel({'min-size': 50, ratio: 1}, [

        /* Vertical Resizer Layout : This is an exact copy of the vertical resizer layout */
            m.resizer.container({direction: 'vertical', redrawOnResize: false}, {className: 'fullscreen'}, [
                m.resizer.panel({'min-size': 50, ratio: 1}, [
                    m.layout.container({className: 'stingray-panel stingray-border-dark'}, [
                        'Panel V1'
                    ])
                ]),
                m.resizer.panel({'min-size': 50, ratio: 1}, [
                    m.layout.container({className: 'stingray-panel-mid stingray-border-dark'}, [
                        'Panel V2'
                    ])
                ]),
                m.resizer.panel({'min-size': 50, ratio: 1}, [
                    m.layout.container({className: 'stingray-panel-dark stingray-border-dark'}, [
                        'Panel V3'
                    ])
                ])
            ])
        /* Vertical Resizer Layout : End*/

    ]),
    m.resizer.panel({'min-size': 50, ratio: 1}, [
        m.layout.container({className: 'stingray-panel-dark stingray-border-dark'}, [
            'Panel H3'
        ])
    ])
]);

Github でこのページを編集