web-dev-qa-db-ja.com

マテリアルツールバー内のフレックスレイアウト

現在、フレックスレイアウトを使用してAngular2のマテリアルモジュールをレイアウトする際に問題が発生しています。

以下の例と添付のライブバージョンでわかるように、Angular2のツールバーモジュールでは、フレックスレイアウトをmat-toolbar内に配置することはできないようです。

<mat-toolbar color="primary">

    <div fxLayout="row" fxLayoutAlign="end">
        <a mat-button fxFlex="auto">Item 1</a>
        <a mat-button fxFlex="auto">Item 2</a>
        <a mat-button fxFlex="auto">Item 3</a>
        <a mat-button fxFlex="auto">Item 4</a>
    </div>

</mat-toolbar>

<div fxLayout="row" fxLayoutAlign="end">
    <a mat-button>Item 1</a>
    <a mat-button>Item 2</a>
    <a mat-button>Item 3</a>
    <a mat-button>Item 4</a>
</div>

実例

エディターバージョン

私が達成したいのは、右側に配置されたボタンの配置です。 mat-toolbar以外では、すべてが魅力のように機能します。私が見逃しているものはありますか、それともまだベータ版である素材に根ざしたバグですか？

angularangular-materialangular-flex-layout
4
hGen

ああ、私はそれがうまくいくとかなり確信しています、心配しないでください:)

すべてのアイテムを含むdivにfxFlexを追加するだけです。

あなたの問題は、divがすべてのスペースを占有しておらず、機能していないと思わせることです。

また、fxFlexプロパティを使用すると、要素が可能なすべての幅を占めるようになるため、コンポーネントが残りのすべてのスペースを占める必要がある場合にのみ使用してください。

機能する電撃戦が必要ですか またはそれを試して自分で発見しますか？

6
user4676340

問題は、fxLayoutAlignについての誤解です。コンテナ内のコンテンツを整列させるだけで、コンテナ自体の位置には影響しません。あなたの場合、すべてのリンクを含むdivの位置は、fxLayoutAlign属性の影響を受けませんが、div内のリンクの位置のみに影響されます。

<mat-toolbar color="primary">
    <span>Nav</span>
    <div fxLayout="row" fxLayoutAlign="end">
        <a mat-button fxFlex="auto">Item 1</a>
        <a mat-button fxFlex="auto">Item 2</a>
        <a mat-button fxFlex="auto">Item 3</a>
        <a mat-button fxFlex="auto">Item 4</a>
    </div>

</mat-toolbar>

代わりに、コンテナの残りのスペースをすべて使い果たす、右と左の要素の間に何かを置くことができます。

<mat-toolbar color="primary">
    <span>Navi</span>
    <span fxFlex></span>
    <a mat-button>Item 1</a>
    <a mat-button>Item 2</a>
    <a mat-button>Item 3</a>
    <a mat-button>Item 4</a>
</mat-toolbar>
3
Kim Kern