vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

AnimateOnScroll documentation updated

pull/4683/head
Tuğçe Küçükoğlu 2023-10-24 17:06:17 +03:00
parent d1997c7855
commit 5f57d57406
4 changed files with 68 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
doc/animateonscroll/AccessibilityDoc.vue Normal file
View File

@ -0,0 +1,9 @@
<template>
<DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
<h3>Screen Reader</h3>
<p>AnimateOnScroll does not include any roles and attributes by default, any attribute is passed to the root element so aria roles and attributes can be added if required.</p>
<h3>Keyboard Support</h3>
<p>Component does not include any interactive elements.</p>
</DocSectionText>
</template>

2
doc/animateonscroll/BasicDoc.vue
View File

@ -1,7 +1,7 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
Animate uses PrimeFlex animations, however it can perform animations with custom CSS classes too. Takes <i>enterClass</i> and <i>leaveClass</i> properties to simply add animation class during scroll or page load to manage elements
AnimateOnScroll uses PrimeFlex animations, however it can perform animations with custom CSS classes too. Takes <i>enterClass</i> and <i>leaveClass</i> properties to simply add animation class during scroll or page load to manage elements
animation if the element is entering or leaving the viewport.
</p>
</DocSectionText>

46
doc/animateonscroll/OnceDoc.vue Normal file
View File

@ -0,0 +1,46 @@
<template>
<DocSectionText v-bind="$attrs">
<p>When <i>once</i> modifiers are added to an AnimateOnScroll, it works only once.</p>
</DocSectionText>
<div class="card flex flex-column align-items-center">
<div v-animateonscroll.once="{ enterClass: 'flip', leaveClass: 'fadeoutleft' }" class="flex justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000 animation-ease-out">
<span class="text-900 text-3xl font-bold">flip</span>
</div>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
code: {
basic: `
<div class="card flex flex-column align-items-center">
<div v-animateonscroll.once="{ enterClass: 'flip', leaveClass: 'fadeoutleft' }" class="flex justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000 animation-ease-out">
<span class="text-900 text-3xl font-bold">flip</span>
</div>
</div>
`,
options: `
<template>
<div class="card flex flex-column align-items-center">
<div v-animateonscroll.once="{ enterClass: 'flip', leaveClass: 'fadeoutleft' }" class="flex justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000 animation-ease-out">
<span class="text-900 text-3xl font-bold">flip</span>
</div>
</div>
</template>
`,
composition: `
<template>
<div class="card flex flex-column align-items-center">
<div v-animateonscroll.once="{ enterClass: 'flip', leaveClass: 'fadeoutleft' }" class="flex justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000 animation-ease-out">
<span class="text-900 text-3xl font-bold">flip</span>
</div>
</div>
</template>`
}
};
}
};
</script>

12
pages/animateonscroll/index.vue
View File

@ -9,8 +9,10 @@
</template>
<script>
import AccessibilityDoc from '@/doc/animateonscroll/AccessibilityDoc.vue';
import BasicDoc from '@/doc/animateonscroll/BasicDoc.vue';
import ImportDoc from '@/doc/animateonscroll/ImportDoc.vue';
import OnceDoc from '@/doc/animateonscroll/OnceDoc.vue';
export default {
data() {
@ -25,6 +27,16 @@ export default {
id: 'basic',
label: 'Basic',
component: BasicDoc
},
{
id: 'once',
label: 'Once',
component: OnceDoc
},
{
id: 'accessibility',
label: 'Accessibility',
component: AccessibilityDoc
}
]
};