Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

📝 docs: update documentation for the animate on overflow prop - Closes #324 #325

Merged
merged 3 commits into from
May 20, 2024
Merged

📝 docs: update documentation for the animate on overflow prop - Closes #324 #325

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4c6aa54
📝 docs: update documentation for the animate on overflow prop
megasanjay May 20, 2024
f038766
⬇️ chore: modify deps for docs
megasanjay May 20, 2024
0e343d5
⬇️ chore: modify deps for docs
megasanjay May 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 17 additions & 17 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,21 +114,21 @@ This should register as a global component that you can call anywhere in your ap

More detailed explanations are provided in the [documentation](https://vue3-marquee.vercel.app/api/props).

| Prop | Type | Default Value | Description |
| ----------------- | -------------------------------------- | --------------- | -------------------------------------------------------------------------------------- |
| direction | String of either 'normal' or 'reverse' | "normal" | The direction for the content to move in |
| duration | Number | 20 | The time taken for the marquee content to move the width of the container (in seconds) |
| delay | Number | 0 | A delay before the animation starts (in seconds) |
| loop | Number | 0 | The number of instances that the marquee animation should run (0 is infinite) |
| gradient | Boolean | false | Whether to show a gradient overlay |
| gradientColor | Array of 3 RGB values | [255, 255, 255] | The RGB colors for the color of the gradient |
| gradientLength | String | 200px | Length of portion of the container edges that should be taken by the gradient overlay |
| pause | Boolean | false | A reactive prop to pause the marquee |
| pauseOnHover | Boolean | false | Whether to pause the marquee on hover |
| pauseOnClick | Boolean | false | Whether to pause the marquee when you hold the right click button |
| clone | Boolean | false | Whether to clone the content if you want no empty spaces in the animation |
| vertical | Boolean | false | Whether to make the marquee vertical |
| animateOnOverflow | Boolean | false | Whether to animate the marquee if the content overflows the container |
| Prop | Type | Default Value | Description |
| --------------------- | -------------------------------------- | --------------- | -------------------------------------------------------------------------------------- |
| direction | String of either 'normal' or 'reverse' | "normal" | The direction for the content to move in |
| duration | Number | 20 | The time taken for the marquee content to move the width of the container (in seconds) |
| delay | Number | 0 | A delay before the animation starts (in seconds) |
| loop | Number | 0 | The number of instances that the marquee animation should run (0 is infinite) |
| gradient | Boolean | false | Whether to show a gradient overlay |
| gradientColor | Array of 3 RGB values | [255, 255, 255] | The RGB colors for the color of the gradient |
| gradientLength | String | 200px | Length of portion of the container edges that should be taken by the gradient overlay |
| pause | Boolean | false | A reactive prop to pause the marquee |
| pauseOnHover | Boolean | false | Whether to pause the marquee on hover |
| pauseOnClick | Boolean | false | Whether to pause the marquee when you hold the right click button |
| clone | Boolean | false | Whether to clone the content if you want no empty spaces in the animation |
| vertical | Boolean | false | Whether to make the marquee vertical |
| animateOnOverflowOnly | Boolean | false | Whether to animate the marquee if the content overflows the container |

## Events

Expand All @@ -143,9 +143,9 @@ A few events are emitted from the component. Look at the [Demos](#demos) for exa
- onResume
- This event is emitted if you have either `pauseOnHover` or `pauseOnClick` enabled. It will notify if the animation resumes.
- onOverflowDetected
- This event is emitted if you have `animateOnOverflow` enabled. It will notify if the content overflows the container.
- This event is emitted if you have `animateOnOverflowOnly` enabled. It will notify if the content overflows the container.
- onOverflowCleared
- This event is emitted if you have `animateOnOverflow` enabled. It will notify if the content no longer overflows the container. (useful if you need to add a class to the container when the content overflows)
- This event is emitted if you have `animateOnOverflowOnly` enabled. It will notify if the content no longer overflows the container. (useful if you need to add a class to the container when the content overflows)

## Credits

Expand Down
29 changes: 0 additions & 29 deletions docs/components/content/ImagesWithAnimateOnOverflow.vue
View file
Open in desktop

This file was deleted.

86 changes: 86 additions & 0 deletions docs/components/content/ImagesWithAnimateOnOverflowOnly.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
<template>
<div>
<Vue3Marquee :animate-on-overflow-only="true">
<img
v-for="img in imgArray"
:key="img"
:src="img"
class="image"
width="100"
/>
</Vue3Marquee>

<button class="btn" @click="addImages">Add images</button>
</div>
</template>

<script setup>
const allImages = [
'https://sponsors.vuejs.org/images/vueschool.avif',
'https://sponsors.vuejs.org/images/vehikl.avif',
'https://sponsors.vuejs.org/images/dronahq.avif',
'https://sponsors.vuejs.org/images/passionate_people.png',
'https://sponsors.vuejs.org/images/storyblok.png',
'https://sponsors.vuejs.org/images/ionic.png',
'https://sponsors.vuejs.org/images/cypress_io.svg',
'https://sponsors.vuejs.org/images/vuemastery.avif',
'https://sponsors.vuejs.org/images/laravel.png',
'https://sponsors.vuejs.org/images/html_burger.png',
'https://sponsors.vuejs.org/images/neds.png',
'https://sponsors.vuejs.org/images/icons_8.png',
'https://sponsors.vuejs.org/images/tidelift.png',
'https://sponsors.vuejs.org/images/intygrate.png',
'https://sponsors.vuejs.org/images/myetherwallet_inc.avif',
'https://sponsors.vuejs.org/images/flowdash.avif',
'https://sponsors.vuejs.org/images/plaid__inc_.svg',
'https://sponsors.vuejs.org/images/lendio.avif',
'https://sponsors.vuejs.org/images/fastcoding_inc.svg',
]

const imgArray = ref([
'https://sponsors.vuejs.org/images/vueschool.avif',
'https://sponsors.vuejs.org/images/vehikl.avif',
])

const addImages = () => {
// Add 2 random images from allImages to imgArray
imgArray.value.push(
allImages[Math.floor(Math.random() * allImages.length)],
allImages[Math.floor(Math.random() * allImages.length)],
)
}
</script>

<style scoped>
.image {
font-size: 30px;
margin: 0 10px;
}

.btn {
padding: 5px;
margin: 10px 0;
transition: all 0.2s;
background-color: blanchedalmond;
border-radius: 8px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.btn:hover {
background: rgb(226, 226, 226);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.dark .card {
background-color: rgb(31, 30, 28);
}

.dark .btn {
color: rgb(31, 30, 28);
}

.dark .btn:hover {
background: rgb(46, 45, 43);
color: var(--docus-body-color);
}
</style>
6 changes: 4 additions & 2 deletions docs/content/2.api/1.props.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ You need to have a parent container with an explicit height for this to work pro

[`vertical demo`](/examples#vertical-marquee)

## `animateOnOverflow` :badge[New]{type="success"}
## `animateOnOverflowOnly` :badge[New]{type="success"}

A prop that allows the marquee to animate only when the content overflows its container.

Expand All @@ -119,13 +119,15 @@ This prop does not work with `vertical` marquee animations. Since a fixed height
::

::alert{type="info"}
The animation snaps back to the start when the content overflow is resolved. You can use the `justify-content` css property to control the alignment of the content in this instance. Example coming soon...
The animation snaps back to the start when the content overflow is resolved. You can use the `justify-content` css property to control the alignment of the content in this instance. View the link to the demo below for more info.
::

| Type | Default value | Required | Accepted values |
| ------- | ------------- | -------- | ----------------- |
| Boolean | `false` | no | `true` or `false` |

[`animateOnOverflowOnly demo`](/examples#image-marquee-with-animateonoverflowonly)

## `clone`

Whether to clone the content. If you want no empty spaces in the animation use this option to auto clone fill content.
Expand Down
4 changes: 2 additions & 2 deletions docs/content/2.api/2.events.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@ This event is emitted if you have either `pauseOnHover` or `pauseOnClick` enable

## onOverflowDetected

This event is emitted if you have `animateOnOverflow` enabled. It will notify if the animation is animating due to content overflow.
This event is emitted if you have `animateOnOverflowOnly` enabled. It will notify if the animation is animating due to content overflow.

## onOverflowCleared

This event is emitted if you have `animateOnOverflow` enabled. It will notify if the animation is animating due to content overflow.
This event is emitted if you have `animateOnOverflowOnly` enabled. It will notify if the animation is animating due to content overflow.
58 changes: 58 additions & 0 deletions docs/content/3.examples.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -211,6 +211,64 @@ If you need more functionality than this, using a carousel component might be be
::
::

## Image marquee with `animateOnOverflowOnly` :badge[New]{type="success"}

You can use the [`animateOnOverflowOnly`](/props#animateonoverflowonly) prop to animate the marquee only when the content overflows the container. You can adjust the size of the window to see the effect.

::alert{type="warning"}
This prop does not work with `vertical` marquee animations. Since a fixed height parent container is required for `vertical` animations, this feature is not supported.
::

::alert{type="info"}
The animation snaps back to the start when the content overflow is resolved. You can use the `justify-content` css property to control the alignment of the content in this instance.
::

::alert{type="success"}
You could try this system for items like stock tickers for a static on start but adding on more items as the content grows. This could also work for music players where the song title is displayed. The animation would only start when the song title is too long to fit in the container.
::

::code-group
::code-block{label="Preview" preview}
::images-with-animate-on-overflow-only
::
::
::code-block{label="Code"}
```vue
<template>
<Vue3Marquee :animate-on-overflow-only="true">
<img
v-for="img in imgArray"
:key="img"
:src="img"
/>
</Vue3Marquee>
<button @click="addImages">Add images</button>
</template>

<script setup>
const allImages = [
'https://sponsors.vuejs.org/images/vueschool.avif',
'https://sponsors.vuejs.org/images/vehikl.avif',
'https://sponsors.vuejs.org/images/dronahq.avif',
...
]

const imgArray = [
'https://sponsors.vuejs.org/images/layer0.avif',
'https://sponsors.vuejs.org/images/plaid__inc_.svg',
]

const addImages = () => {
imgArray.value.push(
allImages[Math.floor(Math.random() * allImages.length)],
allImages[Math.floor(Math.random() * allImages.length)],
)
}
</script>
```
::
::

## Vertical marquee :badge[New]{type="success"}

With this component you can also create a vertical marquee. This is useful if you want to create a vertical scrolling list of items.
Expand Down
2 changes: 1 addition & 1 deletion docs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
"@nuxtjs/plausible": "^0.2.1",
"@types/node": "^20.2.5",
"eslint": "^8.42.0",
"nuxt": "^3.5.3"
"nuxt": "3.11.0"
},
"dependencies": {
"vue3-lottie": "^3.0.0",
Expand Down
Loading
Loading