0.9.8 • Published 8 months ago
vue-insta-stories v0.9.8
Simple usage
<template>
<Stories :stories="items" />
</template>
<script>
import { Stories } from "vue-insta-stories";
export default {
components: { Stories },
data: () => ({
items: [
"https://picsum.photos/350/200/",
"https://picsum.photos/400/201/",
{
url: "https://file-examples-com.github.io/5mb.mp4",
type: "video",
},
]
})
};
</script>Props
| Property | Type | Default | Description |
|---|---|---|---|
stories | Array<String|Object> | required | An array of image urls or array of story objects (more info below) |
interval | Number | 2000 | Story duration in milliseconds |
isPaused | Boolean | false | Toggle the playing state |
loop | Boolean | false | Loop through stories |
currentIndex | Number | 0 | Set the current story index |
| Events | |||
storyStart | Function(index) | - | Callback when a story starts |
storyEnd | Function(index) | - | Callback when a story ends |
allStoriesEnd | Function() | - | Callback when all stories have ended (not emitted if loop=true) |
seeMore | Function(story) | - | Callback when user have pressed See more |
prev | Function() | - | Callback when user press prev |
next | Function() | - | Callback when user press next |
update:currentIndex | Function(index) | - | |
update:isPaused | Function(paused) | - |
Story Object
| Property | Description |
|---|---|
url | The url of the resource, image or video. |
type | Optional. Type of the story. 'image' \| 'video' |
duration | Optional. Duration for which a story should persist. |
template | Optional. Renders story in a different template see more below. |
seeMore | Optional. Enable see more on story (true \| { label: 'See more!' } |
Style
/** full screen on mobile & fixed size on desktop **/
.ig-stories {
position: absolute;
height: 100vh;
height: -webkit-fill-available;
width: 100vw;
top: 0;
}
@media (min-width: 768px) {
.ig-stories {
position: relative;
height: 730px;
width: 420px;
}
}if you are using tailwind you can write
<Stories class="absolute top-0 h-100vh w-100vw md:(h-730px w-420px relative)" />With header
<template>
<Stories :stories="items">
<template #header="{story}">
<story-header :story="story" />
</template>
</Stories>
</template>
<script>
import { Stories } from "vue-insta-stories";
export default {
components: { Stories },
data: () => ({
items: [ "https://picsum.photos/350/200/"]
})
};
</script>With custom slot
<template>
<Stories :stories="items">
<template #pool="{story}">
<pool-story :story="story" class="flex-grow"></pool-story>
</template>
</Stories>
</template>
<script>
import { Stories } from "vue-insta-stories";
export default {
components: { Stories },
data: () => ({
items: [{ poolId: 23, template: "pool" }]
})
};
</script>