magica-panel v0.0.8

MagicaPanel は MDI ( Multiple Document Interface ) ライクに HTML を複数の ウィンドウ領域に分割して表示できるUIライブラリです。

使用方法

MagicaPanelをインストールするコマンドを以下に記... そうと思いましたが、npmにpublishしたら書きます。

ライブラリ利用方法

MagicaPanelが提供する各クラスは以下のコンストラクタ引数を取ります。

1. 自身を表示するHTMLElement(BaseContainer のみ)
2. オプション
3. (以降) 自身の中に表示する子要素

また、各ウィンドウやその整列は一番上の親にBaseContainerクラスのインスタンスが配置される構造にならなければなりません。

以下サンプル

    // 一番親は`BaseContainer`である必要があります。
    new MagicaPanel.BaseContainer(
        document.body,
        {overflowX: 'hidden', overflowY: 'hidden'},
        // `StackContainer`には子アイテムを整列表示することが出来ます。
        new MagicaPanel.StackContainer(
            undefined, // オプションを与えなかった場合、各クラスの既定が採用されます。
            // `Panel`は`StackContainer`の子要素として整列表示されます。
            // `Panel`が唯一純粋なHTMLElementを子要素に持つことが出来ます。
            //     (`StackContainer`を持つことも出来ます。)
            new MagicaPanel.Panel(
                {title: 'stack-sample!'},
                document.createElement('div')
            ),
            new MagicaPanel.Panel(
                {title: 'stack-sample!'},
                document.createElement('div')
            )
        ),
        // `Panel`は`StackContainer`に含まれないため、ウィンドウとしてフロー表示されます。
        new MagicaPanel.Panel(
            {title: 'window-sample!'},
            document.createElement('div')
        )
    );

ドキュメント

クラス

• Panel: ウィンドウとしての表示やスタックコンテナの要素として利用できます。子要素にはHTMLElementまたはStackContainerを1つのみ格納できます。
  • コンストラクタ引数
    • opts: PanelOptions
    • ...children: HTMLElement | StackContainer
• StackContainer: Panelを縦または横に整列する枠として利用できます。子要素にはPanelまたはStackContainerを複数格納できます。
  • コンストラクタ引数
    • opts: StackContainerOptions
    • ...children: [Panel | StackContainer]
• BaseContainer: PanelやStackContainerを格納する一番親として1つのみ存在します。子要素には複数のPanelと、1つのみStackContainerできます。
  • コンストラクタ引数
    • opts: BaseContainerOptions
    • ...children: [StackContainer?, ...Panel]

オプション

PanelOptions

CoordinationOptions

ResizeableOptions

StackContainerOptions

BaseContainerOptions