0.0.5 • Published 1 year ago
vue-insta-stories-webpage-integration v0.0.5
DISCLAIMER
This code is NOT completely by myself! Package was originally made by dnldsht. All I did was to add the option to add whole webpages to a story. So all credits go to him <3
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://github.com/dnldsht/vue-insta-stories",
type: "html",
},
]
})
};
</script>Props
| Property | Type | Default | Description |
|---|---|---|---|
stories | 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(Number) | - | Callback when a story starts |
storyEnd | Function(Number) | - | Callback when a story ends |
allStoriesEnd | Function() | - | Callback when all stories in the array have ended |
Story Object
| Property | Description |
|---|---|
url | The url of the resource, image or video. |
type | Optional. Type of the story. 'image' \| 'video' \| 'html' |
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>