Skip to content

Commit e7ee73a

Browse files
guastallaigorguastallaigor
committed
docs: update readme
1 parent 8fbafb2 commit e7ee73a

File tree

2 files changed

+36
-48
lines changed

2 files changed

+36
-48
lines changed

‎README.md‎

Lines changed: 34 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
<h1 align="center">Component and documentation is still a WIP</h1>
2-
31
<div align="center">
42
<img src="./.github/logo.png" width="200px">
53
<h1>Vue Image Kit</h1>
@@ -8,7 +6,7 @@
86
Vue.js Image Kit Component with Lazy Load built in and Responsive Images
97
</p>
108
<p align="center">
11-
<a href="https://codesandbox.io/s/vue-lazy-load-image-ls9rh?fontsize=14&hidenavigation=1&module=%2Fsrc%2FApp.vue&theme=dark" target="_blank">Inspiration</a> and a talk from <a href="https://github.com/derevandal" target="_blank">@derevandal</a>
9+
The inspiration comes from <a href="https://codesandbox.io/s/vue-lazy-load-image-ls9rh?fontsize=14&hidenavigation=1&module=%2Fsrc%2FApp.vue&theme=dark" target="_blank">this</a> and a talk from <a href="https://github.com/derevandal" target="_blank">@derevandal</a>
1210
</p>
1311

1412
<p align="center">
@@ -19,10 +17,20 @@
1917
<a href="http://standardjs.com"><img src="https://img.shields.io/badge/code%20style-standard-brightgreen.svg" alt="Style standard"></a>
2018
</p>
2119

20+
> **Note:**
21+
> This is an unofficial project.
22+
> I do not work or am I affiliated with Image Kit
23+
2224
## Demo
2325

2426
**TODO**
2527

28+
## How does it work
29+
30+
This component uses the [Image Kit](https://imagekit.io/) [Real-time URL-based image transformation](https://imagekit.io/features/image-resize-smart-crop-responsive-dpr-client-hints), so you will need to have your images over [Image Kit](https://imagekit.io/) for it to work
31+
32+
For more informations about [Image Kit](https://imagekit.io/), consult their website
33+
2634
## How to install
2735

2836
### npm
@@ -84,54 +92,34 @@ plugins: [
8492

8593
```html
8694
<template>
87-
<vue-image-kit :items="items"/>
95+
<div>
96+
<div style="height:4500px;width:100vw;background:gray">&nbsp;</div>
97+
<vue-image-kit
98+
hash="6xhf1gnexgdgk"
99+
src="lion_BllLvaqVn.jpg"
100+
width="1400px"
101+
height="800px"
102+
alt="Lion image"
103+
/>
104+
</div>
88105
</template>
89-
90-
<script>
91-
export default {
92-
data() {
93-
const example1 = {
94-
title: 'Title example 1',
95-
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ex dolor, malesuada luctus scelerisque ac, auctor vitae risus. Vivamus risus dolor, faucibus a bibendum quis, facilisis eget odio.'
96-
}
97-
const example2 = {
98-
title: 'Title example 2',
99-
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ex dolor, malesuada luctus scelerisque ac, auctor vitae risus. Vivamus risus dolor, faucibus a bibendum quis, facilisis eget odio.'
100-
}
101-
const example3 = {
102-
title: 'Title example 3',
103-
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ex dolor, malesuada luctus scelerisque ac, auctor vitae risus. Vivamus risus dolor, faucibus a bibendum quis, facilisis eget odio.'
104-
}
105-
const items = [example1, example2, example3]
106-
107-
return { items }
108-
}
109-
}
110-
</script>
111106
```
112107

113108
## Props
114109

115-
| Property name | Type | Default | Description |
116-
|---------------------|--------:|:---------:|------------------------------------------------------------------------------------------------|
117-
| items | Array | null | Array of objects to be displayed. Must have at least a content property |
118-
| item-selected | Object | {} | Object that is set when it is clicked. Note that `clickable` prop must be set to true |
119-
| item-unique-key | String | '' | Key to set a blue border to the card when it is clicked (`clickable` prop must be set to true) |
120-
| title-attr | String | 'title' | Name of the property inside the objects, that are in the items array, to set the cards title |
121-
| title-centered | Boolean | false | Centralizes the cards title |
122-
| title-class | String | '' | If you want to set a custom class to the cards title, set it here |
123-
| title-substr | String | 18 | Number of characters to display inside the cards title. Above this, will set a '...' mask |
124-
| content-attr | String | 'content' | Name of the property inside the objects, that are in the items array, to set the cards content |
125-
| content-centered | Boolean | false | Centralizes all the cards content text |
126-
| content-class | String | '' | If you want to set a custom class to the cards content, set it here |
127-
| content-substr | String | 250 | Number of characters to display inside the cards content. Above this, will set a '...' mask |
128-
| has-slot | String | false | Set to true if you pass a `<slot>` to override `title` and `content` attributes |
129-
| min-width | String | '200px' | Min-width of the timeline |
130-
| min-height | String | '' | Min-height of the timeline |
131-
| timeline-padding | String | '' | Padding of the timeline |
132-
| timeline-background | String | '#E9E9E9' | Background color of the whole timeline |
133-
| line-color | String | '#03A9F4' | Color of the line inside the timeline |
134-
| clickable | Boolean | true | Makes the card clickable that returns the object |
110+
| Property name | Type | Default | Required | Description |
111+
|-----------------|--------|-----------------|----------|-------------------------------------------------------------------------------------|
112+
| hash | String | null | true | Images hash. Example: Take this image -> https://ik.imagekit.io/6xhf1gnexgdgk/lion_BllLvaqVn.jpg, the hash is '6xhf1gnexgdgk' |
113+
| src | String | null | true | Images source. Example: Take this image -> https://ik.imagekit.io/6xhf1gnexgdgk/lion_BllLvaqVn.jpg, the source is 'lion_BllLvaqVn.jpg' |
114+
| placeholder | String | '' | false | Images placeholder. Here you can pass a link |
115+
| backgroundColor | String | '' | false | Background color of the images placeholder |
116+
| srcset | Array | [320, 480, 800] | false | Array of numbers that will define the images srcset attribute. Each number correspond to one of the images width |
117+
| sizes | Array | [] | false | Array of numbers that will define the images sizes attribute. Each number correspond to one of the images max-width. Empty by default, which gets each of the images srcset prop and subtract by 40px |
118+
| defaultSize | Number | 1080 | true | Images default size. Must be larger than the largest srcset and sizes |
119+
| customTransform | String | '' | false | Use this to append any extra image kit transform that you want |
120+
| width | String | '' | false | Images width. Any valid CSS unit It will be set with inline style |
121+
| height | String | '' | false | Images height. Any valid CSS unit. It will be set with inline style |
122+
| alt | String | '' | false | Images alt attribute |
135123

136124
## Development
137125

‎src/components/VueImageKit.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div class="vue-image-kit">
3-
<div v-if="dataUrl" :style="{ background }" class="vue-image-kit__placeholder">
3+
<div v-if="dataUrl" :style="{ backgroundColor }" class="vue-image-kit__placeholder">
44
<img :src="placeholder || dataUrl" :alt="alt" :style="{ width, height }">
55
</div>
66
<img :srcset="getSrcset" :sizes="getSizes" :src="getSrc" :alt="alt" :style="{ width, height }" class="vue-image-kit__img"/>
@@ -23,7 +23,7 @@ export default {
2323
type: String,
2424
default: ''
2525
},
26-
background: {
26+
backgroundColor: {
2727
type: String,
2828
default: ''
2929
},

0 commit comments

Comments
 (0)