<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>
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4