46 lines
1.2 KiB
Markdown
46 lines
1.2 KiB
Markdown
---
|
|
order: 50
|
|
title: masonry
|
|
type: Component
|
|
---
|
|
|
|
Based on [masonry](https://masonry.desandro.com/) grid layout, [DEMO](https://preview.ng-alain.com/pro/#/other/gallery).
|
|
|
|
## Container structure
|
|
|
|
```html
|
|
<div nz-row nzGutter="8" masonry [disabled]="masonryDisabled">
|
|
<div
|
|
class="masonry__sizer ant-col-md-12 ant-col-xl-6 position-absolute"
|
|
></div>
|
|
<div
|
|
*ngFor="let i of images; let idx=index"
|
|
(click)="gallery.open(idx)"
|
|
class="masonry__thm mb-sm"
|
|
nz-col
|
|
nzMd="12"
|
|
nzXl="6"
|
|
>
|
|
<a class="img-thm img-thm__zoom-in">
|
|
<i class="img-thm__mask"></i>
|
|
<i class="img-thm__icon" nz-icon nzType="search"></i>
|
|
<img
|
|
class="img-thm__img"
|
|
src="{{i.url}}"
|
|
(load)="imgLoaded()"
|
|
style="min-height: 150px"
|
|
/>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
The `masonry__` prefix class styles is required part.
|
|
|
|
## API
|
|
|
|
| Property | Description | Type | Default |
|
|
|--------------|------------------------------------------------------|-----------|---------|
|
|
| `[masonry]` | [Options](https://masonry.desandro.com/options.html) | `any` | - |
|
|
| `[disabled]` | Whether to disable | `boolean` | `false` |
|