masonry-tile
v1.1.0
Published
An Angular library for use masonry with Material Grid List
Downloads
11
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.