# Vue Images Grid Viewer




![Logo](https://camo.githubusercontent.com/372b662f4b2de885acce0f4619ab56a4ed9259d577cbdac8933b293d6e6f9f3f/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f7675656a732d2532333335343935652e7376673f7374796c653d666f722d7468652d6261646765266c6f676f3d767565646f746a73266c6f676f436f6c6f723d253233344643303844)


## Project Briefing
An image library that's used to show the images in beautiful grids.
Below you will find some information on how to perform common tasks.



# Vue Images Grid Viewer




## Built With

- [@Vue.js](https://vuejs.org/)
- [@tailwind css](https://tailwindcss.com/)



## Authors
- [@abdelali abouelhassan](https://github.com/abdelaliabouelhassan)

## Installation

Install my-project with npm

```bash
  npm install my-project
  cd my-project
```
## Basic Usage
 ```bash
  import project
  use ....
```
    
## Features

- completely responsive
- image viewer 
- Icon Favorites 


## API Reference

#### Props


| Parameter | Type     | Description                |
| :-------- | :------- | :------------------------- |
| `width` | `String,Number` | **default:** 100%, set width for images |
| `images` | `Array` | **required** images['firstImage.png','secondImage.jpeg','etc...']  |
| `showHeart` | `Boolean` | **default:** true , hide or show Heart Icon  |
| `isLove` | `Boolean` | **default:** false ,highlight Heart Icon  |
| `showAllButton` | `Boolean` | **default:** true ,hide or show Show All button  |