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

Doc fixes

pull/5848/head
tugcekucukoglu 2024-06-06 11:50:02 +03:00
parent 4230a0fbe9
commit 82f8646d9f
2 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
doc/autocomplete/GroupDoc.vue
View File

@ -6,8 +6,8 @@
<AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="search" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Hint: type 'a'">
<template #optiongroup="slotProps">
<div class="flex items-center country-item">
<img :alt="slotProps.item.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.item.code.toLowerCase()} mr-2`" style="width: 18px" />
<div>{{ slotProps.item.label }}</div>
<img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" />
<div>{{ slotProps.option.label }}</div>
</div>
</template>
</AutoComplete>
@ -61,8 +61,8 @@ export default {
<AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="search" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Hint: type 'a'">
<template #optiongroup="slotProps">
<div class="flex items-center country-item">
<img :alt="slotProps.item.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.item.code.toLowerCase()} mr-2\`" style="width: 18px" />
<div>{{ slotProps.item.label }}</div>
<img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
<div>{{ slotProps.option.label }}</div>
</div>
</template>
</AutoComplete>
@ -73,8 +73,8 @@ export default {
<AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="search" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Hint: type 'a'">
<template #optiongroup="slotProps">
<div class="flex items-center country-item">
<img :alt="slotProps.item.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.item.code.toLowerCase()} mr-2\`" style="width: 18px" />
<div>{{ slotProps.item.label }}</div>
<img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
<div>{{ slotProps.option.label }}</div>
</div>
</template>
</AutoComplete>
@ -149,8 +149,8 @@ export default {
<AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="search" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Hint: type 'a'">
<template #optiongroup="slotProps">
<div class="flex items-center country-item">
<img :alt="slotProps.item.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.item.code.toLowerCase()} mr-2\`" style="width: 18px" />
<div>{{ slotProps.item.label }}</div>
<img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
<div>{{ slotProps.option.label }}</div>
</div>
</template>
</AutoComplete>

12
doc/styleclass/AnimationDoc.vue
View File

@ -1,13 +1,13 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
Classes to apply during enter and leave animations are specified using the <i>enterClass</i>, <i>enterActiveClass</i>, <i>enterToClass</i>, <i>leaveClass</i>, <i>leaveActiveClass</i>,<i>leaveToClass</i>properties. In addition in case the
target is an overlay, <i>hideOnOutsideClick</i> would be handy to hide the target if outside of the popup is clicked.
Classes to apply during enter and leave animations are specified using the <i>enterFromClass</i>, <i>enterActiveClass</i>, <i>enterToClass</i>, <i>leaveFromClass</i>, <i>leaveActiveClass</i>,<i>leaveToClass</i>properties. In addition in
case the target is an overlay, <i>hideOnOutsideClick</i> would be handy to hide the target if outside of the popup is clicked.
</p>
</DocSectionText>
<div class="card flex flex-col items-center">
<div>
<Button v-styleclass="{ selector: '.box', enterClass: 'my-hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
<Button v-styleclass="{ selector: '.box', enterFromClass: 'my-hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
<Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'my-hidden' }" label="Hide" severity="secondary" />
</div>
<div class="my-hidden animate-duration-500 box">
@ -23,7 +23,7 @@ export default {
return {
code: {
basic: `
<Button v-styleclass="{ selector: '.box', enterClass: 'my-hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
<Button v-styleclass="{ selector: '.box', enterFromClass: 'my-hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
<Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'my-hidden' }" label="Hide" severity="secondary" />
<div class="my-hidden animate-duration-500 box">
<div class="flex bg-green-500 text-white items-center justify-center py-4 rounded-md mt-4 font-bold w-32 h-32">Content</div>
@ -33,7 +33,7 @@ export default {
<template>
<div class="card flex flex-col items-center">
<div>
<Button v-styleclass="{ selector: '.box', enterClass: 'my-hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
<Button v-styleclass="{ selector: '.box', enterFromClass: 'my-hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
<Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'my-hidden' }" label="Hide" severity="secondary" />
</div>
<div class="my-hidden animate-duration-500 box">
@ -81,7 +81,7 @@ export default {
<template>
<div class="card flex flex-col items-center">
<div>
<Button v-styleclass="{ selector: '.box', enterClass: 'my-hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
<Button v-styleclass="{ selector: '.box', enterFromClass: 'my-hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
<Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'my-hidden' }" label="Hide" severity="secondary" />
</div>
<div class="my-hidden animate-duration-500 box">