masonry-tile
v1.1.0
Published
An Angular library for use masonry with Material Grid List
Downloads
4
Readme
Masonry Tile
Allows you to have masonry style tiles with Material Grid List.
Installation
npm i masonry-tile --save
Requirements
peerDependencies:
angular
16.2.0 and moreangular/material
16.2.0 and more
Use 1.0.0 for:
angular
>=13.0.0angular/material
>=13.0.0
Demo
Usage
example
Example with a list of images and description.
<mat-grid-list #matGridList [cols]="4">
<mat-grid-tile *ngFor="let imageItem of images" #matGridTile>
<masonry-tile [rowHeight]="1" [gutterSize]="1" [matGridTile]="matGridTile" [matGridList]="matGridList">
<!-- content start -->
<img [src]="imageItem?.src" [alt]="imageItem?.alt" />
<div>{{ imageItem?.alt }}</div>
<!-- content end -->
</masonry-tile>
</mat-grid-tile>
</mat-grid-list>
matGridTile
(Required) : refence to matGridTile
matGridList
(Required) : refence to matGridList
Include in your module:
import { MatGridListModule } from '@angular/material/grid-list';
import { MasonryTileModule } from 'masonry-tile';
@NgModule({
imports: [
MatGridListModule, // required
MasonryTileModule,
],
})
export class MyModule {}
Publishing the library
npm run build:lib
cd dist/masonry-tile
npm publish
Update Demo
npm run build:demo
License
Like Angular, this module is released under the permissive MIT license. Your contributions are always welcome.