vue-photo-grid

This component let you automatically arrange the photos depending on their clusters.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
vue-photo-grid
1.0.25 years ago5 years agoMinified + gzip package size for vue-photo-grid in KB

Readme

Photo Grid Component
npm version This component let you automatically arrange the photos depending on their clusters.
Examples
For examples, refer to the demo page.
NPM
``` npm install vue-photo-grid ```
Features!
- Arrange depending on their numbers. - Edit grids width and height. - Edit grids radius. - Passess an argument when clicking the excess the images.
Usage
``` import PhotoGrid from 'vue-photo-grid'; Vue.use(PhotoGrid); ```
Sample
```
<photo-grid :box-height="'200px'" :box-width="'20%'" :excess-text="'+ {{count}}'" v-on:clickExcess="triggerClick">
<img v-for="imahe in images" v-bind:src="imahe.url"/>
</photo-grid>
```

Using Options

All read more options were converted to props to be able use them in the vue-photo-grid component. Usage ```html ```
API
| Option | Type | Default | Description | |--------|------|---------|-------------| | boxWidth | String | 200px | let you edit the grids Width depending on your ideal choice you can change the size unit (pixels or percentage) | | boxHeight | String | 200px | let you edit the grids Height depending on your ideal choice you can change the size unit (pixels or percentage) | | boxBorder | Number | 0 | This feature makes you add the border og the grid. | excessText | String | View more {{count}} images | You can change the text whenever the number of your image exceeds 4 and above. Note: You can customize the text between the {{count}} in the excessText. Note that {{count}} is the default value of the excess number in your list of images.
Events
| Name | Description | |--------|-------------| | clickExcess | You can pass your method here whenever you click the excess images number. |
License

MIT

Use at your own risk! with :heart: by Lyor