QOXホームへ

AngularモジュールでMasonry

Yuko Hashimoto

Yuko Hashimoto

Tags: ,

どんだけIonicでMasonryレイアウトやりたいんだお前って感じですが、前回のJSプラグイン版に続き、今度はAngularプラグインを使ってみた記録です。

Angularモジュール『ngx-masonry』

ngx-masonryモジュールのリポジトリはこちらです。
GitHub – gethinoakes / ngx-masonry

もともとMasonryのAngularモジュールとして公開されていたangular2-masonryが古くなったため、フォークして新しいバージョンに対応したものらしいです。

If I have the time I will look into further improvements, but please do not expect support as I don’t have the time for that.

Google翻訳<時間があれば、さらなる改善を検討しますが、時間がないのでサポートを期待しないでください

……とのことなので、この先動かなくなっても仕方ないなあという気持ちでありがたく使わせていただきます。

使ってみる

インストール

プロジェクトのフォルダにインストールします。

app.module.tsに追記して使えるようにする

使用するページで設定

オプションでfitWidth:trueにするとpercentPositionがうまく動きません。

gutterで指定した分の横幅が余分になってカラム落ちしてしまうので、cssで指定する横幅はgutter分だけマイナスすると良いっぽい。

社内で「IonicでjQuery使いたくないのよね」とやっぱり言われたので、使うとしたらこれかなー。


仕上がりはこんな感じ。

あと、Masonryの意味はこういうのです。

Yuko Hashimoto

Yuko Hashimoto デザイナー

デザインって何だろう、と悶々としながら、オシャレさん目指して試行錯誤する日々です。ハト好き。寺社と散歩と時代劇が好きです。気がつくと荷物が多くなるのが悩み。

記事一覧
Go up